Как правильно оформить карточки товаров в письмах и настроить автопарсинг

Эффективная карточка товара объединяет визуал, цену и призыв к действию в одном функциональном блоке. Такой формат превращает письмо в удобную витрину, где у покупателя всё под рукой для принятия решения. Для маркетолога же продуманный шаблон — это страховка от ошибок и возможность собирать рассылки в разы быстрее.

В этой статье разберём, как «приготовить» идеальную карточку, как настроить автоматическое подтягивание данных в Letteros и в каких случаях автопарсинг выигрывает у ручной сборки.

Из чего состоит карточка товара в письме

Хорошая карточка включает пять обязательных элементов. Убрать любой из них, значит потерять в конверсии.

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

Название. Короткое и понятное — до 60 символов. Без складских артикулов и кодов, которые только путают покупателя.

Описание. Одно-два ключевых свойства, важных для человека: не «полипропилен 600D», а «не промокает под дождем и выдерживает мороз». Письмо не заменяет сайт — нам нужно только зацепить внимание.

Цена. Актуальная стоимость и зачёркнутая старая (если есть скидка). Это работает лучше любого текста о «выгоде».

CTA-кнопка. Один товар — одна кнопка. Ссылка должна вести прямо на страницу этого товара, а не в общий каталог.

Вот пример того, как карточки выглядят в реальном письме.Первая — полный набор элементов: изображение, название, описание, цена в кнопке.Вторая — сокращённый вариант: только изображение, название и ссылка.Обратите внимание: кнопка левой карточки содержит цену прямо в тексте («От 19 500 ₽») — это сильнее, чем просто «Купить», потому что читатель видит предложение ещё до клика.

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

Правила оформления каждого элемента

Изображение

Пропорции всех изображений в одной рассылке должны совпадать — иначе сетка карточек разъедется. Оптимально — квадрат (1:1) или формат 4:3. Минимальное разрешение — 600×600 пикселей, иначе на ретина-экранах картинка будет замыленной. Для фото лучше использовать JPG или WebP, PNG — только если у товара прозрачный фон.

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

Цена

Сделайте цену крупнее основного текста. Если есть скидка — ставьте старую цену рядом и зачеркивайте её. Если продаете наборы или весовой товар — обязательно указывайте единицу измерения.

Важный нюанс: почта — это не сайт. Цена в письме «замораживается» в момент отправки. Если через час после рассылки товар подорожал, в письме останется старая цифра. Это техническое ограничение самого формата email, а не ошибка сервиса.

CTA-кнопка

Не заставляйте пользователя выбирать. Две кнопки («Купить» и «Описание») под одним товаром только рассеивают внимание и снижают вероятность клика.

Автопарсинг vs ручное заполнение

Данные в карточки можно добавлять двумя способами: вручную или через автопарсинг. Разница существенная — особенно когда товаров много.

Практика показывает: если вы делаете рассылки с товарами регулярно, автопарсинг окупается с первого же выпуска. Руками стоит собирать только разовые письма.

Как работает автопарсинг в Letteros

Автопарсинг в Letteros — это автоматический перенос данных с сайта в блоки письма на этапе подготовки рассылки. Нет ручной копипасты: название, цена, изображение и ссылка подтягиваются сами по заранее описанным параметрам.

Кратко о том, как это устроено:

• Специалисты Letteros один раз готовят верстку блока в мастер-шаблоне — в неё закладываются все параметры, которые нужно подтягивать.
• Источником данных служит страница сайта или файл с товарами.
• Данные фиксируются на этапе подготовки письма. После отправки динамическое обновление невозможно.
• Никаких доработок самого продукта Letteros не требуется — только разовая подготовка шаблона и подключение источника.

Как настроить автопарсинг: пошаговая инструкция

Шаг 1. Подготовьте сайт

Прежде чем настраивать парсинг, нужно убедиться, что сайт его технически допускает.

Проверьте доступность страниц. Если на сайте стоит защита от ботов (капча, Cloudflare с проверкой браузера), парсер не получит данные. Уточните у разработчиков, есть ли ограничения в файле robots.txt.

Убедитесь в стабильности отдачи данных. Страницы с товарами должны открываться без ошибок и отдавать полный HTML — не заглушку «загрузка через JavaScript».

Добавьте понятные CSS-селекторы или data-атрибуты. Это ключевой технический момент. Для каждого поля, которое нужно подтягивать, должен быть надёжный CSS-селектор или атрибут в разметке. Обычно нужны:

• название товара,
• цена (актуальная),
• старая цена (если есть),
• ссылка на изображение,
• ссылка на страницу товара,
• краткое описание.

Чтобы было понятно, о чём речь — вот упрощённый пример. На странице товара в коде сайта есть примерно такая структура:

<div class=»product-card»>

<h1 class=»product-title»>Беспроводные наушники Pro X</h1>

<img class=»product-image» src=»/images/headphones.jpg»>

<span class=»product-price»>5 990 ₽</span>

<span class=»product-price-old»>7 490 ₽</span>

<p class=»product-description»>40 ч автономной работы</p>

<a class=»product-link» href=»/catalog/headphones-pro-x»>Смотреть товар</a>

</div>

Тогда CSS-селекторы для парсера будут такими:

У каждого сайта своя разметка — классы и теги будут другими. Задача разработчика сайта: убедиться, что для каждого нужного поля есть однозначный селектор, по которому парсер всегда найдёт правильный элемент. Если разметка не позволяет это сделать, попросите разработчиков добавить data-атрибуты, например, data-product-name, data-product-price.

Шаг 2. Настройте мастер-шаблон в Letteros

Верстальщики Letteros подготовят блок карточки. В него закладывается логика: какое поле куда подставить и как отформатировать цену (например, чтобы вместо 5990.00 было красиво 5 990 ₽). Это разовая работа, которая потом экономит часы в каждой рассылке.

Шаг 3. Подключите источник данных

В интерфейсе Letteros откройте раздел парсинга данных. Вставьте ссылку на источник — это может быть страница каталога на сайте, страница отдельного товара или файл с данными (например, XML-фид или CSV).

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

Шаг 4. Запустите тестовый импорт и проверьте данные

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

• цены актуальны и форматированы корректно (не «5990.00», а «5 990 ₽»),
• изображения загружаются и не обрезаны,
• названия не содержат служебных символов и не обрезаются,
• ссылки ведут именно на тот товар, к которому привязана карточка.

Только после проверки можно готовить рассылку к отправке.

Подробная пошаговая инструкция по настройке парсинга карточек товаров в Letteros

Вёрстка карточек: сетка и мобильные устройства

Почти 70% людей читают письма с телефона. Если ваша карточка отлично выглядит на мониторе, это не значит, что её будет удобно нажимать пальцем на бегу.

Сколько карточек ставить в ряд

Выбор количества колонок зависит от типа товара и объёма информации в карточке.

Три варианта вёрстки одного товара: широкий баннер, горизонтальная карточка и сетка из двух вертикальных карточек. Выбор зависит от количества товаров и места в письме.

Как карточки адаптируются на мобильном

На узком экране многоколоночная сетка схлопывается — две колонки превращаются в одну, четыре в две или в одну. Это поведение задаётся в вёрстке мастер-шаблона через медиазапросы. Если адаптация не настроена, карточки на телефоне будут крошечными и нечитаемыми.

Что важно проверить на мобильном до отправки:

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

Проще всего проверить прямо в почтовом клиенте на телефоне или через режим мобильного просмотра в сервисах тестирования писем.

Типичные ошибки при работе с карточками

Неверные CSS-селекторы. Парсер берёт не то поле или не находит данные вовсе. Как избежать: проверять селекторы на нескольких разных товарах, а не на одном примере — структура разметки у разных страниц может отличаться.

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

Разные пропорции изображений. Одна карточка с квадратным фото, соседняя с вытянутым — сетка письма ломается. Нужно договориться об одном формате изображений ещё на этапе подготовки шаблона.

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

Слабый или нейтральный CTA. Кнопка «Подробнее» не говорит человеку, что произойдёт после клика. «Купить», «В корзину», «Смотреть товар» — глаголы, которые конвертируют.

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

Чек-лист перед отправкой рассылки с карточками

◻ Изображения одного размера и пропорций, загружаются без артефактов

◻ Цены актуальны на момент отправки

◻ Названия товаров не обрезаны и не содержат служебных кодов

◻ Описания читаются и не выглядят как технический текст

◻ Каждая кнопка ведёт на правильную страницу товара

◻ В ссылках прописаны UTM-метки

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

◻ Запущен тестовый импорт, все поля заполнены корректно

Итог

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