Примеры из практики
Примеры показывают, как сочетаются настройки плагина. Тексты, картинки и товары на скриншотах вымышленные.
Акция с таймером
Задача. Подчеркнуть скидку, которая действует до конкретной даты.
| Настройка | Значение |
|---|---|
| Формат | 3 — три карточки поровну |
| Размер | 250 px — вмещает заголовок, описание, таймер и кнопку |
| Вид | 3 — текст на тёмной полосе читается на любой картинке |
| Карточка с акцией | Заголовок «Палатки –20%», описание «Скидка до конца месяца», кнопка «Выбрать», дата и время окончания |
Таймер добавляйте только карточке с ограниченной акцией. Остальные карточки в группе пусть остаются без таймера, как на скриншоте.
Когда акция закончится, таймер покажет нули, но карточка останется на сайте. Поставьте себе напоминание убрать её или заменить.
Разделы каталога в один ряд
Задача. Дать быстрый переход в основные разделы.
| Настройка | Значение |
|---|---|
| Формат | 4 или 5 карточек в ряд |
| Размер | 150 или 200 px |
| Вид | 1 — подпись в левом нижнем углу |
| Содержимое | Заголовок в одно слово, описание не нужно, кнопка «Выбрать» |
В узких карточках длинные заголовки обрезаются. Если названия разделов длинные, выберите формат 3 или 2.
Широкий баннер
Задача. Одно крупное сообщение: новая коллекция, распродажа, доставка.
| Настройка | Значение |
|---|---|
| Формат | 1 — одна карточка на всю ширину |
| Размер | 400 px |
| Вид | 4 — приглушённая картинка и яркий текст |
| Картинка | Широкая, главное в центре: по бокам изображение обрежется |
Две группы на одной странице
Задача. Крупные акции сверху, лента подборок ниже.
- Первая группа: формат 3, размер 250 px — основные предложения.
- Вторая группа: формат 6 (первая карточка шире), размер 200 px — подборка и дополнительное предложение.
- В шаблон вставьте коды обеих групп друг за другом:
{shopStart_promocardsPlugin::setPromocardsGroup(1)}и{shopStart_promocardsPlugin::setPromocardsGroup(2)}.
Между группами остаётся небольшой промежуток, заданный в самих карточках. Если нужен больший, добавьте margin-top в свой CSS для нужной группы.
Одна группа на разных страницах
Вставьте код одной и той же группы в home.html и category.html. Карточки будут одинаковыми на обеих страницах. Если на странице категории нужно другое содержимое, создайте отдельную группу.