Плагин «Товары»
Плагин «Товары» редактора макета позволяет разместить на любой странице сайта интернет-магазина карты товаров или слайдер с картами товаров. В свою очередь это позволяет увеличить конверсию интернет-магазина, поскольку плагин можно разместить в тематических статьях в блоге, на промо-страницах и далее.
Узнавайте подробнее про практический пример использования плагина «Товары» из соответствующего выпуска подкаста Що там в eCom? – Как сделать, чтобы статьи вашего блога продавали.
Чтобы начать работу с плагином «Товары» перейдите в редактор макета и нажмите на кнопку «ДОБАВИТЬ БЛОК».
После этого появится боковая панель, в которой нужно нажать на плагин «Товары» и перенести его в определенное место на странице сайта интернет-магазина.
После этого появится боковая панель настройки плагина «Товары». Рассмотрим детальнее каждую вкладку боковой панели настроек плагина «Товары».
Вкладка «Вид» позволяет выбрать дизайн отображения товаров 1 и в случае дизайна отображения товаров «Слайдер товаров» и «Товары в несколько рядов» можно выбрать дизайн превью товаров 2, Также можно изменить настройки элементов товарной карточки 3 и в случае дизайна отображения товаров «Слайдер товаров» можно настроить элементы управления слайдером товаров 4.
Рассмотрим детальнее настройки элементов товарной карточки.
Элемент товарной карточки «ИЗБРАННОЕ И СРАВНЕНИЕ» не появляется в случае выбранного дизайна отображения товаров «Вертикальный список товаров», появляется в случае включенных настроек «Включить сравнение товаров» и «Включить избранное» в настройках каталога товаров и имеет следующие настройки.
- «Показывать избранное» 1 – этот переключатель позволяет отображать кнопку «Добавить в избранное» в товарной карточке;
- «Показывать сравнение» 2 – этот переключатель позволяет отображать кнопку «Добавить к сравнению» в товарной карточке;
- «Цвет иконки» 3 – эти настройки позволяют установить цвет иконки и цвет иконки при наведении на кнопки «Добавить в избранное» и «Добавить к сравнению»;
- «Цвет фона» 4 – эти настройки позволяют установить цвет фона и цвет фона иконки при наведении на кнопки «Добавить в избранное» и «Добавить к сравнению»;
- «Размер» 5 – эта настройка позволяет установить размер в пикселях иконок кнопок «Добавить в избранное» и «Добавить к сравнению»;
- «Выравнивание» 6 – эти настройки позволяют установить выравнивание относительно товарной карточки иконок кнопок «Добавить в избранное» и «Добавить к сравнению»
Элемент товарной карточки «ИЗОБРАЖЕНИЕ» позволяет установить нужную пропорцию изображения товара на товарной карточке по ширине:высоте.
Элемент товарной карточки «НАЗВАНИЕ ТОВАРА» имеет следующие настройки.
-
«Цвет текста» 1 – эти настройки позволяют установить цвет и цвет при наведении на название товара;
-
«Размер текста» 2 – эта настройка позволяет установить размер в пикселях текста названия товара;
-
«Стиль текста» 3 – эти настройки позволяют установить стиль текста названия товара, а именно: жирный, курсивный, подчеркнутый, БОЛЬШИМИ БУКВАМИ;
-
«Отступ сверху» 4 – эта настройка позволяет установить отступ в пикселях от названия товара к изображению товара;
-
«Отступ снизу» 5 – эта настройка позволяет установить отступ в пикселях от названия товара к цене, вариантов товара при наличии и кнопки «Купить» товарной карточки;
-
«Показывать расширенное название товара» 6 – этот переключатель позволяет показывать расширенное название товара в товарной карточке при его наличии. Узнать больше про расширенное название товара можно по ссылке;
-
«Размер текста» 7 – эта настройка позволяет установить размер в пикселях текста расширенного названия товара;
-
«Стиль текста» 8 – эти настройки позволяют установить стиль текста расширенного названия товара, а именно: жирный, курсивный, подчеркнутый, БОЛЬШИМИ БУКВАМИ;
-
«Отступ сверху» 9 – эта настройка позволяет установить отступ в пикселях от расширенного названия товара к названию товара и изображению товара;
-
«Отступ снизу» 10 – эта настройка позволяет установить отступ в пикселях от расширенного названия товара к цене, вариантов товара при наличии и кнопки «Купить» товарной карточки.
Элемент товарной карточки «ЦЕНА» имеет следующие настройки.
- «Цвет текста» 1 – эта настройка позволяет установить цвет текущей цены товара;
- «Размер текста» 2 – эта настройка позволяет установить размер текста в пикселях текущей цены товара;
- «Стиль текста» 3 – эти настройки позволяют установить стиль текста текущей цены товара, а именно: жирный, курсивный, подчеркнутый, БОЛЬШИМИ БУКВАМИ;
- «Цвет» 4 – эта настройка позволяет установить цвет акционной цены товара;
- «Размер текста» 5 – эта настройка позволяет установить размер текста в пикселях акционной цены товара;
- «Стиль текста» 6 – эти настройки позволяют установить стиль текста акционной цены товара, а именно: жирный, курсивный, подчеркнутый, БОЛЬШИМИ БУКВАМИ.
Элемент товарной карточки «РЕЙТИНГ ТОВАРА» появляется в случае настроенного отображения оценки товара в настройках страницы каталога товаров и имеет следующие настройки.
- «Показывать рейтинг товара» 1 – этот переключатель позволяет отображать рейтинг товара в товарной карточке;
- «Цвет звездочек» 2 – эта настройка позволяет выбрать цвет звездочек рейтинга товара в товарной карточке;
- «Цвет текста» 3 – эта настройка позволяет выбрать цвет текста рейтинга товара в товарной карточке;
- «Показывать количество комментариев» 4 – этот чекбокс позволяет отобразить или скрыть количество отзывов на товар в товарной карточке
Элемент товарной карточки «ВАРИАНТЫ ТОВАРА» не появляется в случае выбранного дизайна отображения товаров «Вертикальный список товаров» и имеет следующие настройки.
-
«ДИЗАЙН ОТОБРАЖЕНИЯ ВАРИАНТОВ» 1 – эти настройки позволяют выбрать один из имеющихся дизайнов отображения вариантов товаров в товарной карточке. Возможно выбрать следующие дизайны отображения вариантов товаров: «По умолчанию» – при этом дизайне варианты товара отображаются соответственно к настройкам модификации товаров, «Выпадающий список» – при этом дизайне варианты товара отображаются в виде выпадающего списка, «Кнопки с характеристиками» – при этом дизайне значение характеристик варианта товара отображается в виде кнопок, «Изображения вариантов товаров» – при этом дизайне варианты товара отображаются в виде изображений вариантов товара;
-
«ДИЗАЙН КНОПОК» 2 – эти настройки позволяют выбрать один из имеющихся дизайнов кнопок вариантов товара в случае выбранного варианта товара. Настройка не появляется при дизайне отображения «Выпадающий список»;
-
«Цвет выбранного варианта» 3 – эта настройка позволяет выбрать цвет кнопки выбранного варианта товара. Настройка не появляется при дизайне отображения «Выпадающий список».
Элемент товарной карточки «КНОПКА» имеет следующие настройки.
- «Показывать кнопку «Купить»» 1 – этот переключатель позволяет отображать кнопку «Купить» в товарной карточке;
- «Вид кнопки» 2 – эти настройки позволяют выбрать один из имеющихся видов кнопки «Купить»;
- «Цвет кнопки» 3 – эти настройки позволяют выбрать цвет кнопки «Купить» и цвет обводки или фона кнопки «Купить» при наличии;
- «Цвет при наведении» 4 – эти настройки позволяют выбрать цвет кнопки «Купить» и цвет обводки или фона при наличии при наведении на кнопку «Купить»;
- «Закругление краев» 5 – эти настройки позволяют выбрать вид краев кнопки «Купить»;
- «Стиль текста» 6 – эти настройки позволяют установить стиль текста кнопки «Купить», а именно: жирный, курсивный, подчеркнутый, БОЛЬШИМИ БУКВАМИ
- «Высота кнопки (рх)» 7 – эта настройка позволяет установить высоту в пикселях кнопки «Купить»;
- «Ширина кнопки (рх)» 8 – эта настройка позволяет установить ширину в пикселях кнопки «Купить»;
- «Размер текста (рх)» 9 – эта настройка позволяет установить размер текста кнопки «Купить».
Элемент товарной карточки «ДОПОЛНИТЕЛЬНО» имеет следующие настройки в случае выбранного дизайна отображения товаров «Слайдер товаров».
- «ФОН ДЛЯ ТОВАРА» 1 – эти настройки позволяют выбрать цвет фона товарной карточки и цвет фона товарной карточки при наведении на нее;
- «Показывать варианты товара и кнопку «Купить»» 2 – этот переключатель позволяет отображать варианты товара и кнопку «Купить» в товарной карточке;
- «Показывать варианты товара и кнопку «Купить» только при наведении на товар» 3 – этот переключатель позволяет отображать варианты товара и кнопку «Купить» лишь при наведении на товарную карточку;
- «Количество отображаемых товаров» 4 – эта настройка позволяет установить граничное значение количества товарных карточек, которые отображаются в слайдере товаров;
- «Расстояние между элементами (рх)» 5 – эта настройка позволяет установить боковое расстояние между товарными карточками в слайдере товаров;
- «Бесконечная прокрутка» 6 – этот переключатель позволяет установить бесконечную прокрутку товарных карточек, то есть последнюю товарную карточку слайда можно прокрутить вправо и после этого будет отображаться первая товарная карточка слайда. В случае выключенного переключателя «Бесконечная прокрутка» прокрутить последнюю товарную карточку вправо будет невозможно, нужно будет повернуться влево к первой товарной карточке;
- «Скорость прокрутки слайдера (мс)» 7 – эта настройка позволяет установить скорость прокрутки слайдера товаров в миллисекундах;
- «ТОВАРОВ В РЯД» 8 – эти настройки позволяют установить граничное значение отображаемых товарных карточек для настольной, ноутбучной, планшетной, мобильных (вертикальной и горизонтальной, экраны которые меньше чем 740 пикселей) версий сайта интернет-магазина
- «Сортировка» 9 – эта настройка позволяет установить сортировку товарных карточек по определенному параметру;
- «Направление сортировки» 10 – эти настройки позволяют установить направление сортировки товарных карточек
Элемент товарной карточки «ДОПОЛНИТЕЛЬНО» имеет следующие настройки в случае выбранного дизайна отображения товаров «Товары в несколько рядов».
- «ФОН ДЛЯ ТОВАРА» 1 – эти настройки позволяют выбрать цвет фона товарной карточки и цвет фона товарной карточки при наведении на нее;
- «Показывать варианты товара и кнопку «Купить»» 2 – этот переключатель позволяет отображать варианты товара и кнопку «Купить» в товарной карточке;
- «Показывать варианты товара и кнопку «Купить» только при наведении на товар» 3 – этот переключатель позволяет отображать варианты товара и кнопку «Купить» лишь при наведении на товарную карточку;
- «Количество отображаемых товаров» 4 – эта настройка позволяет установить граничное значение количества товарных карточек, которые отображаются в ряде;
- «ТОВАРОВ В РЯД» 5 – эти настройки позволяют установить граничное значение отображаемых товарных карточек для настольной, ноутбучной, планшетной, мобильных (вертикальной и горизонтальной, экраны, которые меньше чем 740 пикселей) версий сайта интернет-магазина;
- «Сортировка» 6 – эта настройка позволяет установить сортировку товарных карточек по определенному параметру;
- «Направление сортировки» 7 – эта настройка позволяет установить направление сортировки товарных карточек;
- «Отображать дополнительно» 8 – эта настройка позволяет дополнительно отображать определенные элементы в товарной карточке, например, краткое описание.
Элемент товарной карточки «ДОПОЛНИТЕЛЬНО» имеет следующие настройки в случае выбранного дизайна отображения товаров «Вертикальный список товаров».
- «ФОН ДЛЯ ТОВАРА» 1 – эти настройки позволяют выбрать цвет фона товарной карточки и цвет фона товарной карточки при наведении на нее;
- «Количество отображаемых товаров» 2 – эта настройка позволяет установить граничное значение товарных карточек, которые отображаются в вертикальном списке;
- «Сортировка» 3 – эта настройка позволяет установить сортировку товарных карточек по определенному параметру;
- «Направление сортировки» 4 – эта настройка позволяет установить направление сортировки товарных карточек.
Элемент товарной карточки «ДОПОЛНИТЕЛЬНО» имеет следующие настройки в случае выбранного дизайна отображения товаров «Изображение товара и описание справа».
- «ФОН ДЛЯ ТОВАРА» 1 – эти настройки позволяют выбрать цвет фона товарной карточки и цвет фона товарной карточки при наведении на нее;
- «Количество отображаемых товаров» 2 – эта настройка позволяет установить граничное количество товарных карточек, которые отображаются;
- «Сортировка» 3 – эта настройка позволяет установить сортировку товарных карточек по определенному параметру;
- «Направление сортировки» 4 – эта настройка позволяет установить направление сортировки товарных карточек;
- «Отображать дополнительно» 5 – эта настройка позволяет дополнительно отображать определенные элементы в товарной карточке, например, краткое описание.
Элемент товарной карточки «ТОЧКИ» появляется лишь в случае выбранного дизайна отображения товаров «Слайдер товаров» и имеет следующие настройки.
- «Отображать точки» 1 – этот переключатель позволяет отображать элемент управления слайдеров товаров «Точки»;
- «Цвет» 2 – эта настройка позволяет выбрать цвет элемента управления слайдером товаров «Точки»;
- «Форма» 3 – эти настройки позволяют выбрать форму элемента управления слайдером товаров «Точки»;
- «Выравнивание» 4 – эти настройки позволяют выбрать выравнивание элемента управления слайдером товаров «Точки»;
- «Скрывать на мобильных устройствах» 5 – этот переключатель позволяет скрыть отображения элемента управления слайдером товаров «Точки» в случае мобильных версий (экраны, которые меньше чем 740 пикселей) сайта интернет-магазина.
Элемент товарной карточки «СТРЕЛКИ» появляется лишь в случае выбранного дизайна отображения товаров «Слайдер товаров» и имеет следующие настройки.
- «Отображать стрелки» 1 – этот переключатель позволяет отображать элемент управления слайдером товаров «Стрелки»;
- «Иконка» 2 – эти настройки позволяют выбрать вид элемента управления слайдером товаров «Стрелки»;
- «Стиль» 3 – эти настройки позволяют выбрать стиль элемента управления слайдером товаров «Стрелки»;
- «Форма» 4 – эти настройки позволяют выбрать форму элемента управления слайдером товаров «Стрелки»;
- «Размер стрелок» 5 – эта настройка позволяет выбрать размер в пикселях элемента управления слайдером товаров «Стрелки»;
- «Цвет кнопки» 6 – эта настройка позволяет выбрать цвет элемента управления слайдером товаров «Стрелки»;
- «Цвет при наведении» 7 – эта настройка позволяет выбрать цвет элемента управления слайдером товаров «Стрелки» при наведении на него;
- «Положение» 8 – эти настройки позволяют выбрать положение элемента управления слайдером товаров «Стрелки»;
- «Скрывать на мобильных устройствах» 9 – этот переключатель позволяет скрыть отображения элемента управления слайдером товаров «Стрелки» в случае мобильных версий (экраны, которые меньше чем 740 пикселей) сайта интернет-магазина.
Вкладка «Товары» позволяет выбрать товары и категории, которые будут отображаться в плагине «Товары» по определенным критериям. Рассмотрим детальнее настройки вкладки «Товары» плагина «Товары».
Кнопка «Изменить» 1 позволяет изменить добавленные категории и товары из этих категорий, которые будут отображаться в плагине «Товары», в случае отсутствия добавленных категорий и товаров, эта кнопка будет иметь значение «Добавить».
При необходимости можно удалить определенную категорию или товар нажав на кнопку «Удалить» 2. Можно включить лишь отображение акционных товаров при помощи переключателя «Только акционные товары» 3.
Также можно установить отображение товаров по определенным брендам 4, модификациям 5 и стикерам 6. При необходимости можно установить минимальное 7 и максимальное 8 значение диапазона цен товаров, которые будут отображаться в плагине «Товары».
Вкладка «Заголовок» позволяет установить заголовок 1 и описание 2 блока плагина «Товары» на сайте интернет-магазина. Эта вкладка станет активной лишь в случае установленного дизайна отображения товаров «Слайдер товаров» и «Товары в несколько рядов».
Вкладка «Устройства» содержит настройки плагина «Товары» в виде мобильного меню и появляется лишь в случае дизайна отображения товаров «Товары в несколько рядов», «Вертикальный список товаров» и «Изображение товара и описание справа».
Рассмотрим детальнее настройки вкладки «Устройства».
- «Отображать в качестве мобильного меню» 1 – этот переключатель позволяет включить отображения плагина «Товары» в виде мобильного меню;
- «Название раздела в мобильном меню» 2 – эта настройка позволяет установить название блока плагина «Товары» в мобильном меню;
- «Отображать начиная с устройства» 3 – эта настройка позволяет добавлять товары к имеющемуся мобильному меню сайта интернет-магазина с определенного выбранного размера экрана если настройка «Отображать как мобильное меню» выключена;
- «Позиция в мобильном меню» 4 – эта настройка позволяет установить позицию блока плагина «Товары» в мобильном меню.
Закончив с настройками плагина «Товары» нажмите на кнопку «СОХРАНИТЬ», далее нажмите на кнопку «СОХРАНИТЬ» в редакторе макета, чтобы сохранить имеющиеся настройки.
Настроенный плагин «Товары» с дизайном отображения «Слайдер товаров» имеет следующий вид на сайте интернет-магазина.
Настроенный плагин «Товары» с дизайном отображения «Товары в несколько рядов» имеет следующий вид на сайте интернет-магазина.
Настроенный плагин «Товары» с дизайном отображения «Вертикальный список товаров» имеет следующий вид на сайте интернет-магазина.
Настроенный плагин «Товары» с дизайном отображения «Изображение товара и описание справа» имеет следующий вид на сайте интернет-магазина.
58 отзывов