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

Своя верстка — це лист розсилки, який ви або ваш верстальник пишете цілком у 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://…. Такі посилання магазин не рахує.

Замість імені порожньо або стоїть запасне слово. У покупця в картці немає імені, тоді підставляється запасне слово після риски. У попередньому перегляді й перевірочному листі завжди стоять запасні слова, бо отримувача ще немає.