20 мая 2019
10325
11 мин
4.79
Как автоматически создавать карточки товаров в email-рассылках
Ни для кого не секрет, что верстка даже одной карточки товара в емейл-рассылке — та еще головная боль маркетолога. Особенно когда карточка содержит много данных: фрагмент текста, ссылки, альт-текст, старая/новая цена и т.д.
Во-первых, вручную это заполнять долго, а во-вторых, риск допустить ошибку очень высок.
Можно ли сделать процесс заполнения карточек более простым и автоматизировать его? Можно! С помощью Smart-блоков.
Что такое Smart-блоки и как они помогают ускорить создание емейл-рассылок
Smart-блок — это структура или контейнер, в которые автоматически подставляются указанные данные с вашего сайта.
Один раз настройте смарт-блоки в шаблоне писем, добавьте их в библиотеку, а дальше просто вставляйте ссылку на нужный товар и данные сами будут подставляться в карточку. Так легче застраховать себя от путаницы, а письма — от ошибок.
Читать инструкцию, как настроить Smart-блоки >>
Примеры использования Smart-блоков
Казалось бы, что автозаполнение структур будет полезно только интернет-магазинам, в письмах которых есть большое количество карточек товаров. На самом деле с помощью смарт-контейнеров можно автоматизировать подстановку данных в любые блоки:
-
с карточками товаров;
-
со статьями блога;
-
с полезными фото- и видеоматериалами, шаблонами и т.д.
Чтобы иметь представление о том как красиво отобразить такие блоки в письме и вдохновиться на их создание, рассмотрим примеры.
Вертикальная карточка товара
Самый популярный вариант оформления карточек товаров. C вертикальной ориентацией обычно хорошо обыгрываются фото товаров на людях в полный рост. Хотите выгодно показать как выглядит одежда или аксессуар на человеке — используйте вертикальные блоки.
Горизонтальная карточка товара
Если фото на сайте у вас квадратные, вы можете оформить горизонтальную карточку товара, как на примере выше. Здесь оба блока, как картинка, так и текст с кнопкой, выглядят равноценно. Когда фото товара и сама карточка — на белом фоне, важно отделить структуры полосой разделителя и тогда пользователям будет удобнее воспринимать как фото товара, так и его описание.
Карточка товара с художественным оформлением
Со смарт-блоками можно креативить также, как и с обычными. Выбрав горизонтальный стиль подачи карточки товара, смарт-свойства нужно настроить для всей структуры. В ней же содержатся обычные контейнеры.
Например, если взять вертикальную картинку товара и расположить ее посередине, а текстовые блоки — справа, то оставшееся место можно использовать для декора, используя фоновую картинку в блоке.
Декоративная карточка товара
Еще одна идея реализации декоративной карточки товара подана с помощью квадратных картинок в вертикальных смарт-блоках. Заголовок, цена и описание размещаются на специальной плашке под фото. Так карточки товаров, расположенные в ряд, становятся похожими на декоративные закладки или стикеры.
Карточки товаров шахматном порядке
Еще одна идея использования горизонтальных смарт-блоков воплощена в примере с шахматной группировкой. Такой распространенный вариант подачи карточек товаров можно смело реализовывать с помощью смарт-структур в проморассылке.
Карточки статей для блога
Блоговые рассылки тоже требуют рутинной работы по подстановке информации в карточки с анонсом статей. Рассмотрим вариации для них.
Горизонтальная карточка статьи блога с описанием
Важные статьи блога нуждаются в особом внимании. Чтобы карточка статьи сразу бросалась в глаза, задайте акцент на картинке и теме статьи. Здесь советуем оформить смарт-структуру с крупной картинкой и заголовком, а остальные элементы уменьшить.
Вертикальные карточки с фоновой картинкой
Что ни говори, а правильно подобранный фон поможет разнообразить структуру из стандартно оформленных блоков статей. Особенно когда они составлены из мелких элементов.
Фон задается также, как и для обычной структуры — во вкладке “Внешний вид”:
Рассылка статей блога eSputnik
Мы пользуемся smart-блоками, чтобы анонсировать последние статьи нашего блога в рассылке eSputnik Blog. Для этого мы настроили структуру из трех смарт-контейнеров, куда входят:
-
аватарка статьи,
-
название,
-
2 ссылки - под картинкой и под названием,
-
альт-текст для изображения.
Чтобы настроить один такой smart-контейнер, нам понадобился набор из двух стандартных переменных: p_image и p_name.
-
Для 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-блоков - доверьте это нам!
Создать письмо со смарт-блоками
Мы поможем настроить смарт-блоки для проморассылки в стиле вашего сайта и учтем все ваши пожелания! :)