Как настроить продуктовую строку в конструкторе Mindbox

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

Настройки блока разделены на три вкладки в панели справа:

• «Наполнение» — какие продукты выводить.
• «Дизайн» — как выглядит карточка и сетка карточек.
• «Отображение» — при каких условиях блок показывается в письме.

Как добавить блок в письмоКак добавить блок в письмо

1. Откройте шаблон письма в конструкторе.
2. Нажмите «Блоки» в верхней панели.
3. Откройте «Пустой блок» → «Продуктовые» и перетащите в письмо один из пресетов.
4. Нажмите на добавленный блок, чтобы открыть его настройки.

НаполнениеНаполнение

На вкладке «Наполнение» выберите способ заполнения карточек продуктов:

• «Подобрать автоматически» — продукты подставляются в письмо автоматически по условию: из списков, сегментов, заказов, продуктовых рекомендаций и т.д.
• «Заполнить вручную» — продукты выбираются вручную из базы продуктов. Подробнее в статье «Ручная подборка продуктов».

Автоматический подборАвтоматический подбор

В разделе «Условия подбора продуктов» укажите, какие продукты отображать, и выберите источник (заказ, список продуктов, сегмент и др.).

Дополнительно можно:

• показывать только продукты в наличии в регионе клиента;
• выводить продукты в случайном порядке;
• не показывать продукты из одной и той же группы;
• отфильтровать продукты по вычисляемому полю клиента.

В поле «Если нет продуктов для отображения, то» выберите, как должен отображаться блок, если подходящих продуктов нет.

ДизайнДизайн

Элементы карточкиЭлементы карточки

Карточка собирается из элементов: картинка, текст, кнопка, разделитель,
группа элементов, HTML, лейблы.

Элементы можно добавлять, переставлять, копировать и удалять, как и в других блоках конструктора. Подробнее в статье «Конструктор писем Mindbox».

Чтобы элемент брал оформление из раздела «Настройки письма», в разделе «Стиль элемента» включите опцию «Применять фирменные стили письма к элементу». Подробнее о фирменных стилях.

Ориентация и сетка карточкиОриентация и сетка карточки

В разделе «Расположение продуктов» выберите ориентацию карточки:

• Вертикальная — карточки выводятся сеткой. Максимальное количество колонок и строк — 4. Элементы карточки располагаются друг под другом.

  

• Горизонтальная — карточки выводятся друг под другом. Элементы располагаются в колонках внутри карточки.

Колонки в горизонтальной карточкеКолонки в горизонтальной карточке

1. Чтобы добавить колонку, нажмите «+» в разделе «Колонки».

2. В поле «Пропорции колонок» задайте распределение ширины. Ширина карточки делится на 12 единиц — например, 6 и 6 дают две равные колонки, а 5, 4 и 3 — три колонки разной ширины.

   

3. Перетащите элементы в добавленные колонки.

4. Включите «Шахматную раскладку», чтобы порядок колонок чередовался в соседних карточках — например, картинка будет то слева, то справа.

   

Настройки для мобильной версииНастройки для мобильной версии

Часть настроек можно задать отдельно для десктопной и мобильной версии — например, размер шрифта, размеры кнопки, отступы. Такие настройки отмечены зеленой иконкой .

Чтобы задать значение для мобильной версии:

1. Переключитесь на мобильную версию — иконка телефона в верхней панели конструктора.

   

2. Измените нужную настройку.

3. Вернитесь на десктопную версию и проверьте, что ее значение не изменилось.

Чтобы колонки с горизонтальным расположением карточки выстраивались друг под другом в мобильной версии, включите опцию «Адаптировать колонки» в разделе «Перестройка на мобильном».

Пример настройки продуктовой строкиПример настройки продуктовой строки

Отображение: условия показа блокаОтображение: условия показа блока

На вкладке «Отображение» задайте, при каких условиях блок показывается в письме — например, только для определенного сегмента клиентов.

Подробнее в статье «Ограничить вывод блока по сегменту клиентов».

Как проверить и сохранитьКак проверить и сохранить

1. Нажмите «Предпросмотр», чтобы посмотреть письмо в десктопной и мобильной версии.
2. Сделайте тестовую отправку, чтобы проверить, какие продукты подставятся в письмо.
3. Нажмите «Сохранить».

Что дальшеЧто дальше

• Ограничить вывод блока по сегменту клиентов — подробнее про вкладку «Отображение».
• Как вывести продукты в добавленную продуктовую строку:
  • Вывод продуктов из сегмента
  • Ручная подборка продуктов
  • Вывод списка продуктов
  • Вывод брошенной корзины
  • Вывод измененного продукта из списка продуктов
  • Вывод просмотренных в сессии продуктов
  • Вывод измененного просмотренного продукта
  • Вывод продуктов из последней просмотренной категории
  • Вывод продукта из вычисляемого поля
  • Вывод заказа
  • Вывод рекомендаций к клиенту
  • Вывод рекомендаций к продукту