Внешний вид: кнопка, окно, цвета, CSS

На вкладке «Внешний вид» три группы: основные настройки, цветовая схема и CSS. Четвёртая группа, «Настройки формы обратной связи», появляется, когда включена форма (см. Форма вопроса).

Основные настройки

Основные настройки вкладки «Внешний вид»

Параметр Что значит
Разместить в блоке покупки Включено: «Таблица размеров» появляется в блоке покупки рядом с корзиной автоматически (место зависит от темы; в теме по умолчанию — под кнопкой «В корзину»). Выключено: HTML-код кнопки (он показывается под переключателем) вы вставляете в шаблон темы сами. Кнопка видна только у товаров, у которых есть таблица.
Свернуть таблицу Блоки описания и формы превращаются в «гармошку»: видны заголовки со значком «+», содержимое раскрывается по нажатию. Окно получается компактнее.
Описание таблицы Показывать блок описания (поле «Описание таблицы» в карточке).
Несколько таблиц для товара Одна (последняя подходящая) или все подходящие. См. условия показа.
Положение описания До таблицы или после. Показывается при включённом описании.
Заголовок описания Заголовок блока. Если пусто, подставляется «Как определить свой размер?».
Форма обратной связи Показывать в окне блок с формой.
Заголовок формы Заголовок блока формы. Если пусто, подставляется «Проблемы с выбором?».
Закруглённые углы Скруглить углы окна.
Ширина модального окна (px) Максимальная ширина окна в пикселях, например 900.

Окно в режиме «Свернуть таблицу»: заголовки описания и формы со значком «+»

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

Цвета задавайте в формате hex: #FFFFFF, #333333, #FF5733. Рядом с полем показывается образец цвета.

Цветовая схема: поля цветов и загрузка фоновой картинки

Параметр Что меняет
Цвет фона всплывающего окна Затемнение за окном (подложка поверх страницы).
Прозрачность фона всплывающего окна От 0 (полностью прозрачный) до 1 (непрозрачный), шаг 0,1.
Цвет текста Основной цвет текста в окне.
Цвет модального окна Цвет самого окна.
Изображение модального окна Фоновая картинка окна. Форматы: png, jpg/jpeg, gif, svg, webp. Не больше 10 МБ. Кнопка «Удалить» убирает картинку.
Цвет текста полей ввода Цвет текста, который вводит покупатель.
Цвет фона полей ввода Цвет фона полей формы. Только hex.
Цвет разделительных линий Линии между строками таблицы и блоками.
Цвет при наведении Фон строки таблицы под курсором.
Выделить столбец Номер столбца, который выделяется жирным (1 — первый). Пусто — без выделения.

Если цвет введён неверно или выбран файл недопустимого формата, под полем появляется сообщение, а кнопка «Сохранить» остаётся неактивной, пока значение не исправлено.

Собственный CSS

Поле «Свой CSS» позволяет изменить внешний вид любого элемента.

Блок CSS с раскрытой инструкцией

  1. Откройте на витрине страницу, где показывается кнопка или окно плагина.
  2. Наведите курсор на элемент, нажмите правую кнопку мыши и выберите «Просмотреть код» (или «Инспектировать»).
  3. Скопируйте имя класса из атрибута class="…". Классы плагина начинаются с startwebsite.
  4. В поле «Свой CSS» впишите имя с точкой впереди и стили в фигурных скобках:
.startwebsite__table-size_link {
  color: #cc0000;
  font-size: 15px;
}

Краткая инструкция есть и в самих настройках: ссылка «Инструкция» под полем.

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