Своя вёрстка письма

Своя вёрстка — это письмо рассылки, которое вы или ваш верстальщик пишете целиком в HTML-коде, а не собираете из блоков. Магазин отправляет такое письмо почти как есть: сам он только проводит ссылки через учёт переходов, дописывает неполные адреса картинок, добавляет строку рядом с темой, метку открытия и, если нужно, строку отписки, а из кода убирает то, что почта всё равно не покажет. Эта страница — руководство для того, кто пишет код письма: что магазин делает с ним сам и как свёрстать письмо, чтобы оно одинаково выглядело в Gmail, Outlook и в телефоне.

Как устроены рассылки в целом, как выбрать получателей, отправить письмо и читать отчёт, описано на странице Рассылки покупателям.

Когда выбирать свою вёрстку#

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

Своя вёрстка нужна, когда:

• у вас уже есть свёрстанное письмо: от верстальщика, из другого сервиса рассылок или из прошлой платформы магазина;
• письму нужен вид, которого из блоков не собрать: несколько колонок, фон во всю ширину, свои шрифты и цвета, баннер с текстом поверх, своя шапка и подвал;
• письмо должно выглядеть иначе, чем письма о заказах, например праздничная рассылка в другом оформлении.

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

Как включить#

1. Откройте «Маркетинг» → «Рассылки» и создайте рассылку с каналом «Письмо на почту» или откройте черновик.
2. В блоке «Письмо» нажмите «Своя вёрстка» на переключателе «Конструктор» / «Своя вёрстка».
3. Если кода ещё нет, магазин подставит в поле образец. Замените в нём тексты, цвета и адреса или удалите его целиком и вставьте свой код.
4. Блок «Как увидит покупатель» ниже обновляется сам, пока вы правите код. Переключатель «Компьютер» и «Телефон» меняет ширину.

Блоки конструктора при этом не пропадают: если вы вернётесь в «Конструктор», они будут на месте. Уйдёт то письмо, которое выбрано на переключателе.

Начать можно и с готового шаблона: нажмите «Шаблоны» в шапке блока «Письмо» и возьмите «Своя вёрстка: образец». Вместе с кодом придут тема и строка рядом с темой. Свою удачную вёрстку сохраните кнопкой «Сохранить как шаблон», и в следующий раз она будет в списке «Ваши шаблоны», см. Шаблоны писем.

Образец#

Образец — это готовое письмо-документ шириной 600 точек со стилями прямо в тегах. Так его одинаково показывают Gmail, Outlook и почта в телефоне. В нём есть:

• шапка с названием магазина {{shop_name}};
• заголовок, приветствие {{first_name|друг}} и абзац текста;
• кнопка, которая ведёт на главную страницу витрины (href="/");
• подвал «Вы получили это письмо, потому что подписались на новости магазина…» со ссылкой отписки {{unsubscribe_url}}.

Цвета, шрифты и тексты меняйте под себя. Адрес кнопки поменяйте на нужную страницу.

Полный документ или кусок разметки#

Магазин смотрит, есть ли в коде <html или <!doctype, и от этого решает, как отправить письмо.

Полный документ — код с <!doctype html>, <html>, <head> и <body>. Такое письмо уходит в том виде, как свёрстано. Шапку и подвал общего шаблона магазин к нему не добавляет, поэтому название магазина, контакты и прочее должны быть в самом коде. Так устроен образец, и так удобнее всего переносить письмо из другого сервиса рассылок.

Кусок разметки — код без <html>: несколько абзацев, таблица, картинка. Магазин ставит его в общий шаблон писем на место текста письма, так же как письмо из блоков. Шапка с названием магазина, рамка и подвал берутся из шаблона, и письмо выглядит как остальные письма магазина. Общий шаблон настраивается в «Настройки платформы» → «Уведомления» → «Уведомления», блок «Оформление писем» → «Общий шаблон письма». Правка шаблона меняет и письма о заказах.

В стандартном шаблоне у текста письма поля по 32 точки по бокам, поэтому куску разметки остаётся 536 точек ширины. Картинки и таблицы в куске делайте не шире этого, а свою обёртку шириной 600 точек в кусок не ставьте: она уже есть в шаблоне.

Если вы не уверены, что выбрать, начните с куска: шапку, подвал и цвета магазина за вас сделает общий шаблон.

Подстановки#

В коде и в теме письма можно подставить данные получателя. Подстановка пишется в двойных фигурных скобках:

Подстановка	Что подставится
{{first_name}}	имя покупателя
{{name}}	имя вместе с фамилией
{{shop_name}}	название магазина. Если оно не задано в настройках, подставится название витрины
{{unsubscribe_url}}	адрес отписки этого получателя

Если у покупателя нет имени, подстановка останется пустой. Чтобы этого не было, напишите запасное слово через черту: {{first_name|друг}} даст «Здравствуйте, Олена!» тому, у кого имя есть, и «Здравствуйте, друг!» тому, у кого его нет. Запасное слово работает у {{first_name}}, {{name}} и {{shop_name}}. Фигурных скобок в запасном слове быть не должно.

Подстановки работают в любом месте кода: в тексте, в alt картинки, в адресе ссылки. Значения магазин подставляет безопасно: если в имени покупателя окажутся угловые скобки или кавычки, они не сломают вёрстку. В строке рядом с темой подстановки не работают.

{{unsubscribe_url}} ставьте в адрес ссылки:

<a href="{{unsubscribe_url}}" style="color:#6b7280;">Отписаться</a>

Ссылка ведёт на страницу магазина с вопросом «Больше не присылать вам новости и предложения магазина?» и кнопкой «Отписаться». В предпросмотре и в проверочном письме ссылка тоже ведёт на эту страницу, но никого не отписывает.

Что магазин делает с письмом сам#

Ссылки: учёт переходов и метки#

Каждую ссылку <a href="…"> и каждую область карты-картинки <area href="…"> магазин проводит через себя, как и в конструкторе. Покупатель нажимает ссылку, попадает на короткий адрес магазина, а оттуда сразу на нужную страницу. Так в отчёте видны переходы и карта кликов.

К ссылкам на страницы вашей витрины магазин добавляет метки utm_source=email, utm_medium=newsletter и метку рассылки в utm_campaign. По ним в отчёте видно, какие заказы принесла рассылка. Если в ссылке уже есть utm_source, магазин оставляет ваши метки как есть. Ссылки на чужие сайты меток не получают, но переходы по ним тоже считаются.

Адрес ссылки можно написать так же, как в адресной строке браузера:

• полный адрес с https:// или http://;
• адрес сайта без https://, например www.shop.com/sale. Магазин сам допишет https:// в начало;
• адрес с двумя косыми чертами в начале, например //partner.com/promo. Магазин сам допишет впереди https:;
• адрес страницы магазина, например /sale, /catalog/new?sort=price или просто sale. Магазин сам допишет перед ним адрес витрины, выбранной в рассылке.

Сайт от страницы магазина отличает точка в первой части адреса, до косой черты: shop.com/sale — это сайт, а sale и catalog/new — страницы магазина. Если первая часть кончается расширением файла, например sale.html, page.php или price.pdf, магазин тоже считает её страницей магазина. Адрес страницы с точкой другого рода, например promo.2026, магазин примет за сайт, поэтому такой адрес пишите с косой чертой в начале: /promo.2026. Адрес с одной косой чертой в начале магазин всегда считает страницей своей витрины.

Не трогает магазин такие ссылки:

• ссылку отписки {{unsubscribe_url}}. Скопированную ссылку отписки магазин меняет на адрес получателя, см. «Строка отписки»;
• mailto:, tel: и sms:;
• якоря на место в письме, href="#…", и пустой href;
• адреса с другим началом, не https:// и не http://, например viber://…. Такая ссылка уйдёт как есть, но переходы по ней в отчёт не попадут.

В предпросмотре и в проверочном письме ссылки ведут прямо на страницы, без учёта переходов. Метки в них уже стоят.

Адреса картинок#

Если адрес картинки в src неполный, магазин сам допишет его до полного:

• адрес от корня, например /images/banner.jpg, получит впереди адрес витрины, выбранной в рассылке;
• адрес без косой черты в начале, например files/autumn.jpg, магазин считает файлом, загруженным в магазин, и ищет его в папке /storage/: получится https://адрес-магазина/storage/files/autumn.jpg;
• адрес с двумя косыми чертами в начале, например //cdn.example.com/banner.jpg, получит впереди https:.

Полные адреса https://… и http://…, встроенные картинки data:image/… и вложения cid: остаются как есть. Адреса в background и srcset магазин не дописывает, поэтому в них пишите только полный адрес.

Строка отписки#

Закон требует, чтобы в каждом рекламном письме можно было отказаться от рассылки. Если в письме есть ссылка <a> или <area> с адресом {{unsubscribe_url}}, магазин считает, что отписку вы поставили сами, и ничего не добавляет. Если такой ссылки нет, магазин сам добавит в конец письма строку «Вы получили это письмо, потому что подписались на новости магазина…» со ссылкой «Отписаться».

Бывает, что ссылку отписки копируют из предпросмотра или из проверочного письма и вставляют в код готовым адресом. Такая ссылка кончается на /mailings/u/preview или на /mailings/u/ и набор букв и цифр. Магазин узнаёт её, сам ставит вместо неё адрес отписки каждого получателя и своей строки не добавляет. Удобнее всё же писать {{unsubscribe_url}}: так сразу видно, где в коде стоит отписка.

Подстановка в комментарии или просто текстом, без ссылки, не считается: тогда магазин добавит свою строку. А вот ссылку в скрытом блоке, например со стилем display:none, магазин от видимой не отличает, и строки отписки в письме не будет. Ставьте ссылку отписки туда, где покупатель её увидит.

Кроме ссылки в письме, магазин передаёт почтовым службам адрес отписки в один клик. Gmail и другие службы показывают по нему кнопку «Отписаться» рядом с именем отправителя. Это работает и в своей вёрстке, делать для этого ничего не нужно.

Метка открытия#

В конец письма магазин ставит картинку размером в одну точку. Когда почтовая программа её загружает, письмо считается открытым. Если письмо — полный документ, картинка встаёт перед </body>, если кусок — после него. В предпросмотре и проверочном письме метки нет. Почему открытия всё равно неточны, рассказано на странице Рассылки покупателям.

Строка рядом с темой#

Поле «Строка рядом с темой» магазин ставит в самое начало письма скрытым текстом: у полного документа сразу после <body>, у куска — перед вашим кодом. Почтовые программы показывают его в списке писем после темы, а в самом письме его не видно. Свой скрытый текст для этого в код писать не нужно: заполните поле. Если поле пустое, магазин ничего не добавляет.

Что убирается при отправке#

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

• теги <script>, <noscript>, <iframe>, <frame>, <frameset>, <object>, <embed>, <applet>, <template>, <portal>;
• старые теги <plaintext>, <xmp>, <noembed>, <noframes> и <title> внутри письма. В <head> полного документа <title> остаётся. Незакрытый такой тег превращает в простой текст всё, что стоит после него, вместе со строкой отписки;
• формы и их поля: <form>, <input>, <textarea>, <select>, <button>;
• векторные рисунки <svg> и формулы <math> вместе со всем, что внутри. Значки и рисунки ставьте картинками PNG;
• <base> и <meta http-equiv="…">;
• <link> любого вида, кроме таблиц стилей rel="stylesheet";
• атрибуты-обработчики событий: onclick, onload, onerror и все остальные, которые начинаются с on;
• адреса javascript: и vbscript: в href, src, background, srcset, poster, action и подобных атрибутах. Атрибут удаляется целиком;
• адреса data:, кроме встроенных картинок data:image/… в src, srcset и background. Встроенные SVG-картинки data:image/svg… тоже убираются;
• атрибут style целиком, если в нём есть expression(, javascript:, vbscript: или -moz-binding.

Таблицы, стили в атрибутах и в теге <style>, картинки, шрифты, условные комментарии для Outlook и остальная вёрстка остаются вашими. Почтовые программы всё перечисленное выше и так не показывают, поэтому письмо, свёрстанное по правилам почты, от очистки не меняется.

Обратите внимание на <button>: кнопку в письме делают ссылкой <a>, а тег <button> пропадёт вместе с надписью. Как сделать кнопку, показано ниже.

Размер письма#

Код письма — не больше 200 000 знаков. Длиннее магазин не сохранит и покажет ошибку у поля.

На деле письмо стоит держать намного меньше. Gmail показывает только первые 102 КБ кода письма, а дальше пишет «Сообщение обрезано» и ссылку «Показать полностью». Под обрез попадают подвал, ссылка отписки и метка открытия: отписаться становится труднее, а открытие такого письма не засчитывается. Учтите, что 102 КБ — это байты, а не знаки: русская или украинская буква занимает два байта. Кроме того, при отправке каждая ссылка становится длиннее на адрес учёта переходов, а ссылки на магазин — ещё и на метки.

Держите код письма в пределах 70–80 КБ. Если не помещается, уберите лишние пробелы и комментарии, повторяющиеся стили и неиспользуемые классы, а встроенные картинки data: замените картинками по адресу.

Как верстать письмо для почты#

Почтовые программы понимают HTML гораздо хуже браузеров, и каждая по-своему. Эти правила дают письмо, которое одинаково выглядит в Gmail, Outlook, Apple Mail и в почте на телефоне.

Раскладка — таблицами. Колонки и отступы делайте вложенными таблицами <table role="presentation" cellpadding="0" cellspacing="0">, а не flex, grid или float. Outlook на компьютере рисует письма движком Word и понимает только таблицы. role="presentation" подсказывает экранным чтецам, что это раскладка, а не таблица с данными.

Ширина — 600 точек. Основная таблица письма — width="600" со стилем max-width:600px;width:100%. На компьютере письмо займёт 600 точек, а на телефоне сожмётся по ширине экрана. Для куска разметки ширина — до 536 точек, см. выше.

Стили — в атрибуте style. Gmail и многие почтовые программы вырезают или игнорируют часть стилей из <style> и внешние таблицы стилей. Всё важное для вида письма: цвета, шрифты, отступы — пишите прямо в теге. <style> годится для дополнительного: правил @media для телефона и тёмной темы.

Шрифты — с запасом. Свой шрифт через <link rel="stylesheet"> покажут не все программы, поэтому всегда пишите запасные: font-family:'Montserrat',Arial,sans-serif.

Картинки — по адресу, который открывается из интернета. Надёжнее всего писать полный адрес с https://. Неполный адрес в src магазин допишет сам (см. «Адреса картинок»), а в background и srcset — нет, и там картинка с адресом /images/banner.jpg у покупателя не загрузится, хотя в предпросмотре может выглядеть нормально. Картинку можно выложить, например, с помощью дополнения «Файловый менеджер»: кнопка «Копировать ссылку» даёт её полный адрес. Встроенные картинки data:image/… магазин пропускает, но Gmail и многие другие программы их не показывают.

У каждой картинки — width, alt и display:block. Пишите ширину атрибутом (width="536") и стилем (max-width:100%;height:auto), иначе Outlook покажет картинку в её настоящем размере. alt — то, что увидит покупатель, пока картинки не загружены, а многие программы по умолчанию их не загружают. Пишите alt так, чтобы письмо читалось без картинок. style="display:block;border:0" убирает лишние полоски под картинкой.

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

Тёмная тема. Gmail, Outlook и Apple Mail в тёмной теме сами меняют цвета письма, и каждая программа делает это по-своему. Чтобы письмо не пострадало:

• задавайте цвет фона явно у каждой ячейки с текстом, а не только у body;
• логотип и значки делайте PNG с прозрачным фоном и светлой обводкой или на подложке своего цвета, чтобы тёмный логотип не пропал на тёмном фоне;
• если вы готовите отдельные цвета для тёмной темы, добавьте в <head> <meta name="color-scheme" content="light dark"> и правило @media (prefers-color-scheme: dark) в <style>. Его понимает Apple Mail и часть других программ, Gmail — нет;
• проверьте письмо в тёмной теме на своём телефоне.

Проверочное письмо себе — обязательно. Предпросмотр в панели показывает письмо так, как его рисует браузер, а не почтовая программа. Перед отправкой введите свои адреса в «Куда отправить проверочное письмо» и нажмите «Отправить себе». Откройте письмо в Gmail, в Outlook, если им пользуются ваши покупатели, и на телефоне, в светлой и тёмной теме.

Пример: письмо-кусок#

Этот код без <html>, поэтому магазин поставит его в общий шаблон писем: шапка с названием магазина и подвал придут из шаблона, а строку отписки магазин добавит сам, потому что {{unsubscribe_url}} в коде нет.

<h1 style="margin:0 0 12px;font-size:24px;line-height:1.3;color:#111827;">
  {{first_name|Друг}}, осенняя распродажа уже началась
</h1>
<p style="margin:0 0 16px;font-size:15px;line-height:1.6;color:#374151;">
  До воскресенья пледы, свечи и посуда стоят на 30% дешевле. Количество
  товаров ограничено.
</p>
<a href="/sale">
  <img src="https://shop.example/storage/files/autumn.jpg" width="536"
       alt="Осенняя распродажа: скидка 30% на пледы и свечи"
       style="display:block;width:100%;max-width:536px;height:auto;border:0;border-radius:8px;">
</a>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:20px 0;">
  <tr>
    <td align="center">
      <a href="/sale" style="display:inline-block;padding:14px 28px;background:#b45309;color:#ffffff;font-size:15px;font-weight:bold;text-decoration:none;border-radius:8px;">
        Смотреть распродажу
      </a>
    </td>
  </tr>
</table>
<p style="margin:0;font-size:13px;line-height:1.5;color:#6b7280;">
  Вопросы по заказу — по телефону <a href="tel:+380441234567" style="color:#6b7280;">+38 044 123-45-67</a>.
</p>

Адрес /sale магазин превратит в полный адрес витрины с метками рассылки и учётом переходов, а ссылку tel: оставит как есть. Адрес картинки замените на адрес своей картинки.

Как вставить кнопку#

Кнопка в письме — это ссылка <a>, оформленная как кнопка. Тег <button> магазин из письма убирает. Чтобы кнопка стояла по центру во всех программах, поставьте ссылку в ячейку таблицы с align="center":

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" style="padding:8px 0 24px;">
      <a href="/catalog/new" style="display:inline-block;padding:14px 28px;background:#4f46e5;color:#ffffff;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;text-decoration:none;border-radius:8px;">
        Смотреть новинки
      </a>
    </td>
  </tr>
</table>

Чтобы кнопка сдвинулась влево или вправо, поменяйте align на left или right. Цвет фона пишите в background ссылки, а цвет текста — в color: без явного цвета почта покажет надпись синей и подчёркнутой. Outlook на компьютере не скругляет углы и может не учесть padding у ссылки, но кнопка в нём всё равно останется кнопкой с цветным фоном.

Частые проблемы#

В письме нет шапки и подвала магазина. Код содержит <html или <!doctype, и магазин отправил его как полный документ. Добавьте шапку и подвал в сам код или уберите <!doctype>, <html>, <head> и <body>, чтобы письмо встало в общий шаблон.

Внизу письма две строки отписки. Магазин добавил свою строку, потому что в письме нет ссылки с адресом {{unsubscribe_url}}: ваша ссылка отписки ведёт на другой адрес, или подстановка стоит просто текстом. Поставьте в свою ссылку href="{{unsubscribe_url}}", и строка магазина пропадёт. Ссылку, скопированную из предпросмотра или проверочного письма, магазин узнаёт сам. Ссылки отписки из другого сервиса рассылок не работают: отписывать покупателя от рассылок вашего магазина умеет только сам магазин.

Картинки не показываются у покупателя. Откройте проверочное письмо, скопируйте адрес картинки и откройте его в браузере без входа в панель. Чаще всего причина одна из двух: неполный адрес стоит в background или srcset, где магазин его не дописывает, или адрес написан без косой черты в начале, например images/…, и магазин ищет картинку среди загруженных файлов, в папке /storage/, а она лежит в другом месте. В обоих случаях пишите полный адрес https://….

Ссылка ведёт не туда. Адрес страницы магазина с точкой написан без косой черты в начале, например promo.2026, и магазин принял его за сайт. Пишите такой адрес с косой чертой: /promo.2026. Адрес чужого сайта надёжнее всего писать полностью, с https://.

Кнопка пропала. Она была сделана тегом <button>, а он из письма убирается. Сделайте кнопку ссылкой, см. «Как вставить кнопку».

В Outlook всё разъехалось. Скорее всего, раскладка сделана div, flex или float. Переделайте её таблицами, а ширину картинок задайте атрибутом width.

Gmail пишет «Сообщение обрезано». Код письма больше 102 КБ, см. «Размер письма».

Магазин не сохраняет рассылку и показывает ошибку у кода письма. Поле пустое или код длиннее 200 000 знаков.

В отчёте нет переходов по какой-то ссылке. Ссылка — не <a href> и не <area href> (например, адрес только в тексте), или это mailto:, tel:, якорь #… или адрес другого вида, например viber://…. Такие ссылки магазин не считает.

Вместо имени пусто или стоит запасное слово. У покупателя в карточке нет имени, тогда подставляется запасное слово после черты. В предпросмотре и проверочном письме всегда стоят запасные слова, потому что получателя ещё нет.