COS WP WooДокументация
Витрина

Оформление витрины

Палитра, шрифты, компоненты дизайна и готовые магазины под ключ — как выглядит витрина и что для этого нужно.

Раздел Витрина → Оформление отвечает за то, как магазин выглядит: цвета, шрифты, форма элементов, шапка и подвал, набор дизайн-компонентов и — в перспективе — готовые магазины, которые устанавливаются одним кликом.

Часть возможностей работает только вместе с фирменной темой-компаньоном плагина. Если у вас уже есть своя тема и вы ставите только плагин, начните с раздела «Режим только плагин» ниже — он честно показывает, что будет работать, а что нет.

Готовые магазины (Store Kits)

Витрина → Оформление → Готовые магазины (#/theme/kits).

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

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

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

Витрина → Оформление → Мастер настройки витрины (#/theme/wizard).

Пять шагов подряд вместо блуждания по четырём разным разделам меню:

  1. Оформление — цвета (сразу открывается вкладка «Цвета» раздела «Оформление»).
  2. Шрифты — выбор гарнитур; витрина подключает их с собственного сервера, без сторонних сетей вроде Google Fonts.
  3. Меню — главное меню сайта: по нему покупатель ходит по каталогу.
  4. Карточка товара — раскладка, вкладки и подписи на странице товара.
  5. Фильтр — поиск и фильтр на странице каталога (платный модуль; во Free-версии этот шаг пропускается).

Каждый шаг — тот же экран, что открывается из меню напрямую, просто сразу на нужной вкладке. Мастер можно пройти не до конца и вернуться к любому шагу позже через обычное меню.

Оформление

Витрина → Оформление → Оформление (#/theme).

Главный экран палитры и типографики, пять вкладок:

  • Редактор — каким редактором собираются страницы витрины: встроенный Gutenberg, либо (при наличии и активации нужного конструктора) Elementor или WPBakery. Один и тот же набор дизайн-компонентов рендерится одинаково во всех трёх — сменa редактора не меняет внешний вид уже собранных страниц. Тут же кнопка «Установить демо-страницы» — заготовки (о компании, доставка, возврат и т. п.) в формате выбранного редактора.
  • Цвета — палитра по группам: фирменные цвета (акцент, вторичный цвет и их состояния наведения), текст, поверхности (фон, карточки, границы), статусы (успех/ошибка/предупреждение), цвет текста поверх цветной заливки. У каждого поля — пипетка и HEX-код рядом.
  • Типографика — шрифт заголовков, основного текста, интерфейса и отдельно шрифт для цифр (артикулы, количества, цены) — список подтягивается из установленных на сервере шрифтов.
  • Форма витрины — углы (острые/мягкие/скруглённые), тени, плотность разметки, масштаб типографики, вид карточки товара и вид кнопок. Это меняет облик витрины сильнее, чем цвет, — именно этим набором отличаются друг от друга готовые магазины (Store Kits).
  • Макет — раскладка шапки (классическая, по центру, минимальная, поверх обложки, «редакционная», «маркет» с поиском и рубрикатором, «сервисная» и «B2B» с поиском по артикулу) и подвала (классический, брендовый с подпиской, минимальный, с условиями обслуживания, колонками ссылок или юридическими реквизитами для B2B); закрепление шапки при прокрутке, показ поиска в шапке, число колонок и меню подвала.

Кнопки сверху: «Сохранить», «Сбросить» (вернуть заводские значения темы), «Импортировать цвета из the7» (перенос палитры из темы the7, если магазин на неё переезжает) и ссылка «Открыть в Кастомайзере» — те же настройки видны и в стандартном Customizer WordPress, значения синхронизированы в обе стороны.

Внизу — тумблер «Предпросмотр только для администратора»: включает фирменную тему для вас, пока обычные посетители продолжают видеть текущий вид сайта. Удобно донастроить оформление, не показывая незавершённую витрину покупателям.

Если фирменная тема ещё не установлена, экран честно предупреждает: палитра в этом случае применяется поверх текущей темы через CSS-переменные, а полный макет (шапка, подвал, карточка товара) требует установки темы.

Компоненты

Витрина → Оформление → Компоненты (#/theme/components).

Галерея всех дизайн-компонентов конструктора страниц (герои, промоблоки, табы, цены, статистика, цитаты, вопрос-ответ, шаги, таблицы, новости, логотипы, карусели товаров и т. д.) с тумблером у каждого. Выключенный компонент пропадает из панели вставки блоков в Gutenberg и Elementor — уже размещённые на страницах экземпляры продолжают показываться как есть, просто новый такой блок вставить будет нельзя.

Компоненты работают только при активной фирменной теме. Если тема установлена, но не включена — экран покажет предупреждение с кнопкой «Активировать тему»; если её ещё нет вовсе — она подтягивается автоматически, достаточно перезагрузить страницу через пару секунд.

Отдельный тумблер «Строгий режим редактора»: ограничивает панель вставки блоков вашими фирменными компонентами плюс коротким списком базовых блоков WordPress (абзац, заголовок, картинка, список). Скрывает и выключенные компоненты, и готовые заготовки страниц, которые их используют. Включайте, если хотите, чтобы посадочные страницы собирались только из вашей библиотеки, а не из всего, что умеет редактор.

Кнопки «Включить все» / «Выключить все» есть и для всей галереи целиком, и для каждой смысловой группы компонентов отдельно.

Режим «только плагин»

Витрина → Оформление → Режим только плагин (#/theme/standalone).

Экран для случая «у меня уже есть сайт и своя тема, ставлю только плагин». Наверху — какая тема сейчас активна, и если это не фирменная тема плагина, экран открытым текстом объясняет: плагин её не трогает, и ниже показано, что будет работать как есть, что — иначе, а что не заработает вовсе без установки фирменной темы.

Список функций с тремя статусами:

  • Работает как есть — не зависит от темы вообще.
  • Работает иначе — есть, но с ограничением или другим видом.
  • Нужна наша тема — без неё не включается.

У каждой функции — короткое пояснение своими словами и, если применимо, ссылка «Открыть» прямо на нужный раздел настроек. Если фирменная тема доступна в дистрибутиве, тут же кнопка «Установить и активировать» (или просто «Активировать», если она уже установлена, но выключена).

Как собрать витрину с нуля

  1. Пройдите Мастер настройки витрины — он проведёт по оформлению, шрифтам, меню, карточке товара и фильтру по порядку.
  2. Если у вас нет готового дизайна, задайте палитру и форму витрины на вкладках «Цвета» и «Форма витрины» раздела «Оформление».
  3. Включите нужные дизайн-компоненты в разделе «Компоненты» и, если хотите ограничить редактор только своей библиотекой, включите «Строгий режим редактора».
  4. Соберите страницы (главную, каталог, посадочные) в выбранном редакторе из включённых компонентов.
  5. Когда всё готово, выключите «Предпросмотр только для администратора» в разделе «Оформление» — если он был включён, — чтобы витрину увидели все посетители.

Как настроить магазин на своей теме

  1. Откройте Режим только плагин и посмотрите список функций и их статус.
  2. Для функций «Работает как есть» и «Работает иначе» откройте соответствующие разделы по ссылке «Открыть» и настройте их обычным образом.
  3. Если какая-то нужная функция помечена «Нужна наша тема» — либо примите ограничение, либо установите и активируйте фирменную тему через кнопку на этом же экране (тема ставится рядом, вашу текущую тему это не удаляет и не переключает без вашего явного действия).

Что учесть

  • Фирменная тема-компаньон в дистрибутиве не активируется автоматически — чтобы не перебить тему, которую вы уже купили и настроили. Активация — всегда отдельное действие с вашей стороны.
  • Готовые магазины (Store Kits) сейчас недоступны для покупки — раздел показывает тизер, а не рабочий инструмент.
  • Один и тот же дизайн-компонент рендерится одинаково в Gutenberg, Elementor и WPBakery — смена редактора не «ломает» уже собранные страницы.
  • Отключение компонента в галерее не удаляет уже вставленные блоки на страницах — оно только прячет компонент из панели вставки для новых блоков.
  • Шрифты подключаются с вашего собственного сервера, без внешних сетей вроде Google Fonts — это ускоряет загрузку и не передаёт данные посетителей на сторону.

On this page