Содержимое и оформление
Текстовый контент
| Поле | Что делает |
|---|---|
| Заголовок модального окна | Заголовок. Можно использовать 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;
}
