Как автоматически создавать карточки товаров в email-рассылках

Ни для кого не секрет, что верстка даже одной карточки товара в емейл-рассылке — та еще головная боль маркетолога. Особенно когда карточка содержит много данных: фрагмент текста, ссылки, альт-текст, старая/новая цена и т.д.

Во-первых, вручную это заполнять долго, а во-вторых, риск допустить ошибку очень высок.

Можно ли сделать процесс заполнения карточек более простым и автоматизировать его? Можно! С помощью Smart-блоков.

Что такое Smart-блоки и как они помогают ускорить создание емейл-рассылок

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

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

Читать инструкцию, как настроить Smart-блоки >>

Примеры использования Smart-блоков

Казалось бы, что автозаполнение структур будет полезно только интернет-магазинам, в письмах которых есть большое количество карточек товаров. На самом деле с помощью смарт-контейнеров можно автоматизировать подстановку данных в любые блоки:

• с карточками товаров;

• со статьями блога;

• с полезными фото- и видеоматериалами, шаблонами и т.д.

Чтобы иметь представление о том как красиво отобразить такие блоки в письме и вдохновиться на их создание, рассмотрим примеры.

Вертикальная карточка товара

Самый популярный вариант оформления карточек товаров. C вертикальной ориентацией обычно хорошо обыгрываются фото товаров на людях в полный рост. Хотите выгодно показать как выглядит одежда или аксессуар на человеке — используйте вертикальные блоки.

Горизонтальная карточка товара

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

Карточка товара с художественным оформлением

Со смарт-блоками можно креативить также, как и с обычными. Выбрав горизонтальный стиль подачи карточки товара, смарт-свойства нужно настроить для всей структуры. В ней же содержатся обычные контейнеры.

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

Декоративная карточка товара

Еще одна идея реализации декоративной карточки товара подана с помощью квадратных картинок в вертикальных смарт-блоках. Заголовок, цена и описание размещаются на специальной плашке под фото. Так карточки товаров, расположенные в ряд, становятся похожими на декоративные закладки или стикеры.

Карточки товаров шахматном порядке

Еще одна идея использования горизонтальных смарт-блоков воплощена в примере с шахматной группировкой. Такой распространенный вариант подачи карточек товаров можно смело реализовывать с помощью смарт-структур в проморассылке.

Карточки статей для блога

Блоговые рассылки тоже требуют рутинной работы по подстановке информации в карточки с анонсом статей. Рассмотрим вариации для них.

Горизонтальная карточка статьи блога с описанием

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

Вертикальные карточки с фоновой картинкой

Что ни говори, а правильно подобранный фон поможет разнообразить структуру из стандартно оформленных блоков статей. Особенно когда они составлены из мелких элементов.

Фон задается также, как и для обычной структуры — во вкладке “Внешний вид”:

Рассылка статей блога eSputnik

Мы пользуемся smart-блоками, чтобы анонсировать последние статьи нашего блога в рассылке eSputnik Blog. Для этого мы настроили структуру из трех смарт-контейнеров, куда входят:

• аватарка статьи,

• название,

• 2 ссылки - под картинкой и под названием,

• альт-текст для изображения.

Чтобы настроить один такой smart-контейнер, нам понадобился набор из двух стандартных переменных: p_image и p_name.

1. Для p_image мы задаем следующие правила соответствия во вкладку “куда применить”:

Затем открываем страницу со статьей и исследуем исходный код картинки. Находим нужный селектор:

Тегов img может быть на странице много, но мы нашли именно тот, который относится к аватарке статьи:

div.content > div.field.field-name-field-blog-image.field-type-image.field-label-hidden > div > div > img

Полученный код мы вставляем в поле CSS селектор во вкладку “откуда взять”:

Для переменной p_name все необходимые данные из кода статьи содержатся в теге h1. Поэтому берем тег h1 и используем его в качестве селектора для переменной во вкладке “откуда взять”:

Так как мы хотим добавить не только заголовок статьи, а и заголовок картинки вместе с альтернативным текстом — нам нужно чуть больше селекторов.

Поэтому мы задали правила для переменной p_name во вкладку “куда применить”, вставили ссылку на статью и нажали кнопку “получить значения”.

Вот как выглядит результат подстановки полученных данных в коде smart-блока:

Готовый smart-контейнер добавляем в модули для использования в качестве шаблона.

Дальше дело за малым: из модулей перетягиваем готовый контейнер в структуру, проставляем нужные ссылки в поле url смарт-блока и данные подтягиваются автоматически.

Настройте свою первую Smart-структуру

Смотрите инструкцию, как настроить смарт-блоки в редакторе eSputnik

Если вам нужна будет помощь в настройке smart-блоков - доверьте это нам!

Мы поможем настроить смарт-блоки для проморассылки в стиле вашего сайта и учтем все ваши пожелания! :)