Дизайн интернет-магазина
Настройки внешнего вида списка продукции и разделов

Важно: 

Настройки дизайна общие для всех разделов интернет-магазина

Кратко:

Чтобы настроить внешний вид списка товаров и разделов, нужно: перейти на страницу любого раздела и открыть меню дизайна - Общие настройки дизайна → Список товаров

Перейти на страницу любого раздела. Это можно сделать из меню навигации (если она настроена) или нажав кнопку "Просмотр" в карточке раздела (Магазин → Разделы)

Открыть меню дизайна можно 2 способами:

  1. Нажать круглую синюю кнопку со скрещенным карандашом и линейкой

2. Навести курсор на вкладку "Общие настройки дизайна" на панели инструментов вверху и выбрать пункт "Список товаров"

Вверху меню дизайна есть схема блоков, из которых состоит список товаров и разделов. Каждый из блоков настраивается отдельно.

Есть 4 основных блока:

  1. Информация о разделе продукции
  2. Список разделов и подразделов
  3. Фильтр продукции
  4. Список продукции
1

Информация о разделе продукции

Здесь вы можете:

  • Шрифты - настроить шрифты, размер и цвет шрифта, а также выравнивание названия, заголовков и текста
  • Заголовки для избранного и поиска - указать заголовки для избранного и результатов поиска при наличии или отсутствии товаров
  • Фон, отступы и ширина - настроить фоновое изображение или цвет фона, вертикальные отступы и ширину блока (800, 1000, 1200 пикселей или во всю ширину экрана)
2

Список разделов и подразделов

Здесь вы можете:

  • Шаблоны карточек разделов - выбрать внешний вид списка разделов, на выбор дается 4 варианта
  • Список разделов - настроить отображение разделов по 2, 3 или 4 в ряд, соотношение сторон и кадрирование изображений, цвет подложки, шрифты, размер и цвет шрифта и выравнивание названия раздела
  • Кнопка (для варианта списка разделов № 3 и 4) - указать текст на кнопке перехода в раздел, настроить шрифты, размер и цвет шрифта текста, а также цвет фона кнопки, цвет и толщину обводки, вертикальные и горизонтальные отступы, а также радиус скругления кнопки
  • Фон, отступы и ширина - настроить фоновое изображение или цвет фона, вертикальные отступы и ширину блока (800, 1000, 1200 пикселей или во всю ширину экрана)
3

Фильтр продукции

Здесь вы можете:

  • Основные настройки - настроить шрифты, размер и цвет шрифта названия и параметров фильтров, цвет шрифта и цвет фона активного пункта, цвет фона параметров и цвет иконки удаления
  • Кнопка - указать текст на кнопке применения фильтра, настроить шрифты, размер и цвет шрифта текста, а также цвет фона кнопки, цвет и толщину обводки, вертикальные и горизонтальные отступы, а также радиус скругления кнопки
  • Фон, отступы и ширина - настроить фоновое изображение или цвет фона, вертикальные отступы и ширину блока (800, 1000, 1200 пикселей или во всю ширину экрана)

Важно: 

Если не указать текст в поле "Текст на кнопке", то сама кнопка фильтрации не будет отображаться
4

Список продукции

Здесь вы можете:

  • Шаблоны карточек товаров - выбрать внешний вид списка товаров, на выбор дается 7 вариантов
  • Основные настройки - указать состав информации, которая отображается на карточке, настроить цвет подложки, шрифты, размер и цвет шрифта и выравнивание названия, описания, цены, старой цены, цвет перечеркивания старой цены, шрифты, размер и цвет шрифта межстраничной навигации и активного пункта навигации, а также указать количество товаров на странице
  • Сетка и изображения - настроить отображение товаров по 2, 3 или 4 в ряд для десктопов и по 1 или 2 в ряд для мобильных, соотношение сторон и кадрирование изображений
  • Кнопка добавления в корзину - включить/выключить кнопку, указать текст на кнопке, настроить шрифты, размер и цвет шрифта текста, а также цвет фона кнопки, цвет и толщину обводки, вертикальные и горизонтальные отступы, а также радиус скругления кнопки
  • Ленты - настроить шрифты, размер и цвет шрифта преимуществ товара (Новинка и Рекомендуем), а также цвет ленты
  • Фон, отступы и ширина - настроить фоновое изображение или цвет фона, вертикальные отступы и ширину блока (800, 1000, 1200 пикселей или во всю ширину экрана)

Важно: 

Эти же настройки отвечают и за внешний вид блока Prod01: Продукты из интернет-магазина
Товар добавлен в корзину
Оформить заказ

Смотрите также
от {{product.formated_min_price}}