Блок товаров в письме — это настоящая онлайн-витрина. Здесь есть описание «в самое сердечко», яркая картинка, выгодная цена и призыв к действию. В этой статье расскажем, как оформить карточки товаров, чтобы они продавали.
В каких ситуациях используют карточки товаров
Классическая карточка товара — это картинка, краткое описание, цена и кнопка-призыв к действию. В самом простом варианте верстки карточки выровнены по высоте и ширине и расположены параллельно друг другу.
Некоторые бренды делают карточки писем нестандартными. При этом пользователь легко считывает привычные смыслы и функции: тут картинка, тут описание, а тут кнопка с переходом на сайт.
Главная задача карточек — продемонстрировать товар и продать его. Пользователь должен совершить целевое действие: перейти на сайт, оформить заказ, оставить заявку. Для этого у каждого товара есть отдельная кнопка перехода.
Использовать карточки товаров в письме можно в различных ситуациях:
Специальные предложения. Анонсы для постоянных клиентов, владельцев карт или именинников.
Выгодная цена выделена шрифтом и бросается в глаза
А еще можно отправить подборку товаров, которые пользователь добавил в корзину, но так и не купил. Так вы напомните о себе и мотивируете оформить заказ.
Тематические подборки. Компании часто отправляют письма с топовыми товарами к 23 февраля, 8 марта, Новому году или Черной пятнице. А еще делятся подборками продуктов для узкой аудитории: мужчин или женщин, новых или постоянных клиентов, владельцев конкретных моделей авто.
Такую верстку нетрудно сделать: нужен яркий баннер и изображения товаров
Новинки. Свежие поступления или новинки производства. Вдруг, в письме есть то, чего давно ждет клиент?
«Л'этуаль» использует необычную верстку карточек и красивые сочетания цветов
Скидки. Письмо о скидках с карточками убивает двух зайцев: информирует о снижении цен и демонстрирует конкретный товар.
Главный призыв к действию — под первым баннером. Он предлагает выбрать книги на сайте. А подборка товаров может зацепить клиента конкретной книжкой
Итак, с помощью карточек можно анонсировать новинки и спецпредложения, а также мотивировать пользователей купить конкретные товары.
Как сверстать письмо с карточками
Создавать письма с карточками удобнее всего в конструкторе. Для этого можно использовать готовые шаблоны или начать с нуля.
Создание письма с нуля займет больше времени. Нужно выстроить структуру, а потом уже наполнить письмо контентом.
Готовые шаблоны экономят время. В Unisender есть шаблоны для разных ниш и инфоповодов. Их легко редактировать, поэтому создать и отправить рассылку можно за несколько минут.
Для карточек товаров маркетологи используют несколько самых распространенных вариантов верстки в зависимости от количества и расположения товаров. Можно разместить в строке от 1 до 3 товаров, расположить их друг под другом или в шахматном порядке.
Один товар в строке. В такой верстке можно использовать крупные картинки и подробные описания — места хватит. Отлично подойдет для небольшого количества товаров — от 3 до 5. Если же их будет больше, письмо получится слишком длинным.
Этот шаблон Unisender — универсальный. Он подойдет для любого письма с подборкой товаров. Шаблон можно найти в категории «Все шаблоны»
А этот шаблон продемонстрирует товар с подробным описанием и поможет сделать акцент на выгодной скидке. Ищите его в категории E-commerce
Шаблоны с пастельным фоном легко адаптировать под любой товар. Они подходят для косметики, одежды, обуви, цифровых продуктов. А вот яркие контрастные шаблоны часто используют для электроники, спортивных товаров и продаж в Черную пятницу.
Сочетание белого, черного и фиолетового цветов помогает расставить нужные акценты. Шаблон находится в категории «Все шаблоны»
Два товара в строке. Оптимальный вариант верстки. Можно продемонстрировать подписчику от 4 до 8 товаров, удобно разместить кнопку, акцентировать внимание на цене и «поиграть» с расположением элементов.
Например, в этом шаблоне из раздела «E-Commerce» нет стоимости, основной акцент на дизайне письма, картинках и кнопках.
А вот здесь акцент сделан на размере скидок в Черную пятницу. Ссылка на товары также вшита в картинки. Подписчик щелкает на понравившийся каталог и сразу переходит на сайт.
Как вставить картинку и добавить ссылку
Шаблон из категории «Все шаблоны»: каталог и встроенный таймер
Три товара в строке. Такая верстка позволяет анонсировать от 6 до 12 товаров в одном письме. Здесь важно не перегрузить подписчика информацией, правильно подобрать картинки и тексты.
В этом шаблоне из категории «Все шаблоны» у товаров нет описания. Акцент сделан на яркой кнопке «Купить сейчас». Темный шрифт на белом фоне легко читается и не отвлекает внимание.
Другой шаблон из категории «Все шаблоны» более яркий, но тоже не перегружен информацией. Нет подробного описания, а картинка — это товар крупным планом на светлом фоне. Главный призыв к действию находится после блока с карточками: кнопка «Перейти в магазин» ведет на сайт.
Важно: не располагайте в одной строке больше трех товаров. Картинки будут мелкими, текст нечитаемым, а еще письмо будет неудобно смотреть с мобильных.
Другие варианты верстки
«Шахматка». Товары располагаются не друг под другом, а в шахматном порядке. Этот прием помогает сделать письмо более динамичным и разместить яркие картинки с фоном.
Если похожие фото товаров расположить друг под другом, они сольются и будут смотреться одинаковыми. Шахматная верстка помогает решить эту проблему. Ищите шаблон в категории «Все шаблоны»
Этот шаблон тоже «шахматный». Но между блоками много свободного пространства, есть фоновый рисунок и светлая подложка.
Если вы не хотите работать с готовым шаблоном, но не любите начинать совсем с нуля, используйте типовые незаполненные шаблоны Unisender.
В них уже есть готовый макет карточек товаров, а инструкции помогут быстро сверстать письмо.
Как создать письмо с помощью шаблона
Как адаптировать карточки товаров для мобильных
Письмо с карточками товаров по-разному отображается на десктопе и смартфонах.
Например, так карточки товаров выглядят в готовом шаблоне из категории «Valentine’s day» на десктопе.
А вот так они выстраиваются в смартфоне. Карточки располагаются в один ряд, друг под другом. Изображения и текст остаются крупными, их удобно смотреть на маленьком вертикальном экране.
Такая особенность называется адаптивностью. Она помогает сделать письмо удобным и красивым для любых устройств.
Все шаблоны Unisender адаптивны. Но вы можете отключить эту функцию в конструкторе. Для этого нажмите на нужный блок, перейдите в его настройках на вкладку «Структура» и выключите параметр «Переносить колонки друг под друга».
Если в карточках товара есть текст описания, кнопки и цены, в неадаптивном варианте они могут отображаться некрасиво и неровно. В этом случае советуем не отключать адаптивность.
Важно: перед отправкой неадаптивного сообщения проверьте верстку. Отправьте тестовые письма и откройте их на смартфоне с разных почтовых клиентов и приложений.
Как адаптировать письмо под мобильные устройства
Советы по структуре и дизайну
Подготовьте хорошие фотографии. Именно они продают товар в карточке. Демонстрируйте реальные фотографии ваших товаров, чтобы в будущем избежать претензий и возвратов от покупателей.
Пусть это будет не векторная картинка, а фото товара на модели. Так сразу понятно, как смотрится кулон на шее или пальто на модели.
В своих рассылках «МИФ» всегда публикует живые фото книг в интерьере. Посмотрите, они как будто уже на вашей книжной полке. Так и хочется открыть и полистать 😊
Выделите цену. Если вы анонсируете скидку, сделайте выгодную цену более заметной. Важно, чтобы подписчик сразу обратил внимание на актуальную стоимость, а не размышлял над информацией.
В этой карточке есть и новая, и старая цена, и даже размер скидки. Пользователь сразу считывает выгоду предложения
Сделайте акцент на важных товарах. Топовые товары лучше разместить в самом начале письма. А еще их можно выделить с помощью большого блока — просто покажите карточку товара в одну строку.
Добавьте «воздуха». Используйте свободное пространство между смысловыми блоками. Это помогает глазам отдохнуть и разделить письмо на части. А еще с помощью пустоты можно акцентировать внимание на объекте, например кнопке целевого действия.
Добавить «воздух» в верстку легко в конструкторе писем. Используйте для этого готовый пустой блок спейсер.
В верстке этого шаблона из категории «Черная пятница» есть спейсер между текстом и кнопкой
Итак, сверстать письмо с карточками товаров можно легко и быстро с помощью готовых шаблонов Unisender. От вас потребуются только хорошие фотографии, несколько минут на редактирование — и письмо готово!
