Как правильно оформить карточки товаров в письмах и настроить автопарсинг
Эффективная карточка товара объединяет визуал, цену и призыв к действию в одном функциональном блоке. Такой формат превращает письмо в удобную витрину, где у покупателя всё под рукой для принятия решения. Для маркетолога же продуманный шаблон — это страховка от ошибок и возможность собирать рассылки в разы быстрее.
В этой статье разберём, как «приготовить» идеальную карточку, как настроить автоматическое подтягивание данных в Letteros и в каких случаях автопарсинг выигрывает у ручной сборки.
Из чего состоит карточка товара в письме
Хорошая карточка включает пять обязательных элементов. Убрать любой из них, значит потерять в конверсии.
Изображение. То, за что в первую очередь цепляется взгляд. Читатель видит фото раньше, чем читает название. Без него карточка превращается в скучный прайс‑лист.
Название. Короткое и понятное — до 60 символов. Без складских артикулов и кодов, которые только путают покупателя.
Описание. Одно‑два ключевых свойства, важных для человека: не «полипропилен 600D», а «не промокает под дождем и выдерживает мороз». Письмо не заменяет сайт — нам нужно только зацепить внимание.
Цена. Актуальная стоимость и зачёркнутая старая (если есть скидка). Это работает лучше любого текста о «выгоде».
CTA-кнопка. Один товар — одна кнопка. Ссылка должна вести прямо на страницу этого товара, а не в общий каталог.
Вот пример того, как карточки выглядят в реальном письме.
Первая — полный набор элементов: изображение, название, описание, цена в кнопке.
Вторая — сокращённый вариант: только изображение, название и ссылка.
Обратите внимание: кнопка левой карточки содержит цену прямо в тексте («От 19 500 ₽») — это сильнее, чем просто «Купить», потому что читатель видит предложение ещё до клика.
Также здесь видна типичная проблема: у карточек разные пропорции изображений — левая почти квадратная, правая вытянута горизонтально. В рассылке с несколькими карточками в ряд это нарушает сетку. О том, как этого избежать — в разделе про типичные ошибки.
Правила оформления каждого элемента
Изображение
Пропорции всех изображений в одной рассылке должны совпадать — иначе сетка карточек разъедется. Оптимально — квадрат (1:1) или формат 4:3. Минимальное разрешение — 600×600 пикселей, иначе на ретина‑экранах картинка будет замыленной. Для фото лучше использовать JPG или WebP, PNG — только если у товара прозрачный фон.
Чего лучше не делать: ставить скриншоты с сайта, фото с водяными знаками или лепить коллажи внутри одной маленькой карточки.
Цена
Сделайте цену крупнее основного текста. Если есть скидка — ставьте старую цену рядом и зачеркивайте её. Если продаете наборы или весовой товар — обязательно указывайте единицу измерения.
Важный нюанс: почта — это не сайт. Цена в письме «замораживается» в момент отправки. Если через час после рассылки товар подорожал, в письме останется старая цифра. Это техническое ограничение самого формата email, а не ошибка сервиса.
CTA-кнопка
| Плохо | Хорошо |
| «Нажмите здесь» | «Купить» |
| «Подробнее» | «В корзину» |
| «Ссылка» | «Смотреть товар» |
| «Перейти» | «Получить скидку» |
Не заставляйте пользователя выбирать. Две кнопки («Купить» и «Описание») под одним товаром только рассеивают внимание и снижают вероятность клика.
Автопарсинг vs ручное заполнение
Данные в карточки можно добавлять двумя способами: вручную или через автопарсинг. Разница существенная — особенно когда товаров много.
| Критерий | Ручное заполнение | Автопарсинг |
| Скорость подготовки | Долго: каждое поле копировать вручную | Быстро: данные подтягиваются автоматически |
| Количество товаров | Удобно до 5–10 позиций | Удобно для любого количества |
| Риск ошибок | Высокий: опечатки, старые цены, битые ссылки | Низкий: данные берутся напрямую с источника |
| Актуальность данных | Зависит от внимательности редактора | Актуальна на момент запуска импорта |
| Настройка | Не требует подготовки | Нужна разовая настройка шаблона и источника |
| Масштабирование | Трудозатраты растут линейно с числом товаров | Трудозатраты не зависят от числа товаров |
| Обновление после отправки | Невозможно в обоих случаях | Невозможно в обоих случаях |
Практика показывает: если вы делаете рассылки с товарами регулярно, автопарсинг окупается с первого же выпуска. Руками стоит собирать только разовые письма.
Как работает автопарсинг в 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-селекторы для парсера будут такими:
| Поле | Селектор |
| Название | .product-title |
| Изображение | .product-image |
| Актуальная цена | .product-price |
| Старая цена | .product-price-old |
| Описание | .product-description |
| Ссылка на товар | .product-link |
У каждого сайта своя разметка — классы и теги будут другими. Задача разработчика сайта: убедиться, что для каждого нужного поля есть однозначный селектор, по которому парсер всегда найдёт правильный элемент. Если разметка не позволяет это сделать, попросите разработчиков добавить 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% людей читают письма с телефона. Если ваша карточка отлично выглядит на мониторе, это не значит, что её будет удобно нажимать пальцем на бегу.
Сколько карточек ставить в ряд
Выбор количества колонок зависит от типа товара и объёма информации в карточке.
| Сетка | Когда использовать |
| 1 карточка в ряд | Премиальный товар, много текста, крупное изображение важно |
| 2 карточки в ряд | Универсальный вариант — хорошо работает и на десктопе, и на мобильном |
| 3–4 карточки в ряд | Только для десктопа, простые товары с минимумом текста |
Три варианта вёрстки одного товара: широкий баннер, горизонтальная карточка и сетка из двух вертикальных карточек. Выбор зависит от количества товаров и места в письме.
Как карточки адаптируются на мобильном
На узком экране многоколоночная сетка схлопывается — две колонки превращаются в одну, четыре в две или в одну. Это поведение задаётся в вёрстке мастер‑шаблона через медиазапросы. Если адаптация не настроена, карточки на телефоне будут крошечными и нечитаемыми.
Что важно проверить на мобильном до отправки:
- изображение не обрезается и не уменьшается до нечитаемого размера,
- текст названия и описания не переносится некрасиво,
- кнопка достаточно крупная, чтобы попасть по ней пальцем — минимум 44×44 пикселя,
- цена хорошо читается без увеличения.
Проще всего проверить прямо в почтовом клиенте на телефоне или через режим мобильного просмотра в сервисах тестирования писем.
Типичные ошибки при работе с карточками
Неверные CSS-селекторы. Парсер берёт не то поле или не находит данные вовсе. Как избежать: проверять селекторы на нескольких разных товарах, а не на одном примере — структура разметки у разных страниц может отличаться.
Нет проверки перед отправкой. Цены из старого кеша, битые ссылки на изображения, обрезанные названия — всё это обнаруживается только когда письмо уже ушло. Тестовый импорт и ручной просмотр карточек обязателен.
Разные пропорции изображений. Одна карточка с квадратным фото, соседняя с вытянутым — сетка письма ломается. Нужно договориться об одном формате изображений ещё на этапе подготовки шаблона.
Ожидание динамического обновления. Парсинг — это снимок данных в момент подготовки рассылки. Если цена изменилась после отправки, читатель увидит старые данные. Если нужны живые цены в уже отправленном письме, это другая технология — AMP-письма или ссылка на живой лендинг.
Слабый или нейтральный CTA. Кнопка «Подробнее» не говорит человеку, что произойдёт после клика. «Купить», «В корзину», «Смотреть товар» — глаголы, которые конвертируют.
Ошибки в разметке мастер‑шаблона. Если при первоначальной настройке шаблон собран с ошибками, они будут воспроизводиться в каждой рассылке. Необходимо один раз тщательно проверить шаблон вместе со специалистами Letteros.
Чек‑лист перед отправкой рассылки с карточками
◻ Изображения одного размера и пропорций, загружаются без артефактов
◻ Цены актуальны на момент отправки
◻ Названия товаров не обрезаны и не содержат служебных кодов
◻ Описания читаются и не выглядят как технический текст
◻ Каждая кнопка ведёт на правильную страницу товара
◻ В ссылках прописаны UTM-метки
◻ Письмо проверено на мобильном устройстве и в десктопном клиенте
◻ Запущен тестовый импорт, все поля заполнены корректно
Итог
Карточка товара работает, когда каждый из пяти элементов выполняет свою роль: изображение привлекает, название идентифицирует, описание убеждает, цена показывает выгоду, кнопка конвертирует. Автопарсинг позволяет собирать такие блоки быстро и без ошибок — особенно когда товаров много и рассылки выходят регулярно. Главное: один раз правильно подготовить мастер‑шаблон, подключить источник данных и не забывать проверять импорт перед каждой отправкой.