Содержимое и оформление

Текстовый контент

Поле Что делает
Заголовок модального окна Заголовок. Можно использовать HTML-теги, например Ваша <b style="color: red;">скидка</b>
Текст модального окна Основной текст; HTML-теги тоже можно
Текст закрыть Текстовая ссылка, которая закрывает окно, например «Нет, спасибо»
Описание акции Подробности. Если поле заполнено, в окне появляется панель «Подробнее»
Код HTML Только для типа «HTML» — произвольный код
Таймер обратного отсчёта Дата и время окончания: плагин покажет дни, часы, минуты и секунды. Заполните и дату, и время. Ссылка «Удалить дату» очищает таймер

Раздел «Текстовый контент» и «Медиа-контент»

Медиа-контент

  • Изображение. Файл с компьютера: png, jpeg, svg, gif или webp. Под полем появляется превью и ссылка «Удалить». Другие форматы плагин не принимает.
  • Видео YouTube. Вставьте iframe-код видео целиком (на YouTube: «Поделиться» → «Встроить»), а не ссылку.

Используйте картинки разумного размера: тяжёлые файлы замедляют открытие окна.

Раздел «Медиа-контент»

Кнопки

Доступны две кнопки. Для каждой задаются текст, ссылка и класс. Если текст пустой, кнопка не показывается. В поле «Класс» можно указать CSS-класс вашей темы, чтобы кнопка выглядела как остальные кнопки магазина.

Раздел «Кнопки»

Социальные сети

Поле Что вводить
ВК ID группы Числовой ID сообщества ВКонтакте
OK.RU ID группы ID группы в Одноклассниках
Facebook src ссылка На странице Facebook Page Plugin задайте ширину 500, нажмите «Получить код», на вкладке IFrame скопируйте ссылку из атрибута src
Поделиться кнопками социальных сетей, скрипт Яндекса На странице Яндекс.Поделиться настройте кнопки и скопируйте код без тега script, например <div class="ya-share2" data-services="vkontakte,telegram"></div>

Раздел показывает только поля, подходящие выбранному типу окна.

Цветовая схема

Поле Что меняет
Основной цвет Заголовок и основные элементы окна
Дополнительный цвет Дополнительные элементы окна
Акцентный цвет Элементы, закрывающие окно
Цвет фона Затемнение за окном
Прозрачность фона От 0 до 1
Цвет всплывающего окна Цвет самого окна
Фоновое изображение модального окна Картинка на фоне окна
Цвет текста поля формы Цвет вводимого текста
Цвет фона поля формы Только в формате hex, например #FF5733
Цвет обводки Цвет рамки

Цвета вводятся как значение CSS (#2796ff, red); рядом с полем показывается образец. Пустое поле — цвет по умолчанию. Цвет кнопок задаётся полем «Класс» в разделе «Кнопки»: укажите CSS-класс вашей темы.

Цветовая схема

Свой CSS

Внизу страницы настроек есть общее для всех окон поле «Пользовательский CSS» и раскрывающаяся «Инструкция». Чтобы узнать класс элемента, откройте страницу с окном, нажмите правой кнопкой на элемент и выберите «Посмотреть код». Затем впишите точку, имя класса и фигурные скобки со стилями:

.startwebsite-popup__info-title_content {
    color: black;
    font-size: 24px;
}

Чтобы изменить только окно №1, добавьте атрибут с номером:

[data-popup-number="1"] .startwebsite-popup__info-title_content {
    color: red;
}

Свой CSS, кнопки «Добавить» и «Копировать» и сохранение

Просмотр изображения
Оригинал