Шаблон подтверждения заказа Shopify: дизайн с сохранением Liquid

В подтверждение заказа Shopify можно добавить небольшой брендовый вводный блок, сохранив товары, суммы, оплату и доставку из работающего уведомления. Mailvex здесь нужен для визуального проекта этого блока. Вы перенесёте только его проверенный HTML, а существующий Shopify-шаблон останется основой письма.

Если задача ограничена логотипом и акцентным цветом, собственных настроек Shopify может быть достаточно. Описанный ниже путь имеет смысл для отдельной текстовой панели и требует аккуратной работы с исходным кодом. Это ручная адаптация, без Shopify-профиля Mailvex, интеграции аккаунтов или полной замены уведомления.

Инструкция рассчитана на владельца магазина или специалиста с разрешением редактировать уведомление. Используйте существующий работающий Order confirmation. Основание — документация и локальная проверка рендера блока от 25 октября 2026 года; экспорт из аккаунта, сохранение в Shopify, заказ и отправка нами не выполнялись.

1. Сохраните точную исходную версию

До любых изменений скопируйте текущую тему и весь HTML тела уведомления в отдельные локальные файлы. Укажите магазин, язык, дату и версию, например order-confirmation-ru-before-20261025.html. Сохраните также рабочую копию для правки. Не заменяйте резервную копию скриншотом: для возврата понадобятся исходные выражения и разметка.

Запишите, кто поддерживает этот шаблон и какие нестандартные сценарии он обслуживает. Если заказ уже отображается неверно, сначала восстановите рабочее поведение. Визуальная вставка не исправляет отсутствующие данные. Возврат к стандартному шаблону также не равен восстановлению индивидуальных настроек вашего магазина.

2. Определите, что остаётся в Shopify

В этой работе вы не переписываете Liquid. Сохраняются исходные выражения, фильтры, присваивания, capture, циклы и ветвления вместе с закрывающими тегами. Не переводите имена переменных и не собирайте суммы заказа вручную. Письмо должно продолжать получать данные из своей существующей логики.

Оставьте товары, скидки, налоги, адреса, инструкции по оплате, варианты доставки или самовывоза, действующую ссылку статуса заказа и футер. Не переносите весь Shopify-шаблон через импорт Mailvex: это не проверенный способ сохранить Liquid. Наш новый блок не содержит данных покупателя, динамических изображений или собственной кнопки заказа.

3. Создайте отдельный статический блок в Mailvex

Нужен аккаунт с подтверждённым email и доступными лимитами создания и экспорта. Откройте «Шаблоны» → «Создать шаблон», выберите «Обычное» и «Без брендбука». В поле «Название» введите shopify-intro-ru-v01, затем нажмите «Создать». Это отдельный проект для панели, а не импорт существующего уведомления магазина.

• Если новый проект содержит стартовые элементы, удалите их через «Удалить блок». Это действие относится только к новому проекту Mailvex.
• Слева в «Блоки» добавьте ровно один «Заголовок + текст».
• Впишите статическое название бренда в «Заголовок» и короткий нейтральный абзац в «Текст».
• В «Видимость» выключите «Скрыть на мобильных» и «Скрыть на десктопе». В «Условие показа (ESP)» оставьте «Показывать по условию» выключенным.
• Не добавляйте картинку, ссылку, кнопку, отдельный футер, мобильные переопределения или специальную тёмную тему в первый образец.

Для воспроизводимого примера используйте Arial, заголовок 22 px, абзац 16 px и отступы по 16 px с каждой стороны. У «Размер заголовка (px)» задайте 22. Выберите выравнивание влево, спокойный светлый фон и достаточно контрастный текст. Это параметры образца, а не обязательные размеры Shopify.

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

4. Скачайте HTML один раз

Откройте «Экспорт HTML», оставьте «Формат переменных (ESP)» равным mailvex и нажмите «Скачать HTML». Отдельное копирование кода не требуется. Сохраните полный файл без изменений рядом с рабочей копией. Проверьте доступную квоту перед повторным экспортом: изменение проекта не обновляет ранее скачанный HTML.

Профиля Shopify здесь нет. Выбор mailvex не проверяет Liquid и не подставляет данные заказа. В первом образце нет ссылок и изображений, поэтому настройка их хостинга или UTM не нужна. Посмотрите панель в широком и узком предпросмотре, но окончательное решение принимайте по сочетанию с реальным уведомлением.

5. Выделите целую таблицу блока, а не документ

Откройте скачанный файл как исходный текст и найдите уникальный заголовок Cedar House или собственное название. Для этого минимального блока нужна ближайшая охватывающая его таблица с role="presentation": от открывающего table до соответствующего закрывающего table после абзаца. В проверенном текстовом блоке нет вложенных таблиц.

Не берите внешний контейнер письма, DOCTYPE, html, head, body, скрытый прехедер или глобальные CSS-правила. Следующий пример показывает форму одного блока по локальному рендеру. Это ориентир границ, не полный Shopify-шаблон и не выгрузка из клиентского аккаунта; ID класса в вашем файле будет другим:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#F5F8FE" style="background:#F5F8FE" class="fr-block frb_stage10-static-intro"> <tr><td style="padding:16px 16px 16px 16px"> <h1 class="mob_font_sm" style="margin:0 0 12px 0;font-family:'Arial', Arial, sans-serif;font-size:22px;font-weight:700;color:#2563EB;line-height:1.2;text-align:left">Cedar House</h1> <p style="margin:0;font-family:'Arial', Arial, sans-serif;font-size:16px;font-weight:normal;line-height:1.6;color:#2D3436;text-align:left">Спасибо, что выбрали наш магазин. Информация о вашем заказе находится ниже.</p> </td></tr> </table>

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

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

6. Найдите допустимое место в текущем уведомлении

В Shopify откройте Settings → Notifications → Customer notifications → Order processing → Order confirmation → Edit code. Работайте с копией того же исходника, который сохранили. Найдите точную строку:

<p>{{ email_body }}</p>

Продолжайте только если она встречается ровно один раз, находится в обычной видимой HTML-ячейке и окружающая структура понятна. Если строка отсутствует, повторяется или включена в необычную пользовательскую логику, остановите вставку. Не создавайте её самостоятельно и не выбирайте произвольный закрывающий тег вместо неё.

Полный новый фрагмент размещается непосредственно перед этой строкой. Сам абзац и последующая логика остаются на месте. Не вставляйте таблицу внутрь абзаца, capture, цикла или ветвления Liquid. Не открывайте ячейку, которую закрывает код Shopify, и не переносите в блок чужие закрывающие теги.

Обозначьте начало добавленной области собственным HTML-комментарием:

<!-- MAILVEX-INTRO START -->

После полной таблицы вступления и обязательной таблицы подписи, если она есть, поставьте второй комментарий. Исходный абзац Shopify должен находиться уже за ним:

<!-- MAILVEX-INTRO END -->

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

7. Сравните исходник до и после

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

8. Проверьте сочетание блока и уведомления

Email subject неизменен. Измените Email body (HTML). Preview без сохранения; Send test email отправляет на адрес входа администратора. Если всё верно, закройте предпросмотр, затем Save.

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

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

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

9. Отдельно проверьте событие заказа, если это требуется

Уполномоченный оператор может пройти существующий настроенный тестовый checkout с адресом, который контролирует. Это отдельное действие от просмотра HTML. Согласуйте его до выполнения: небольшой дизайн-блок не повод менять рабочие платёжные настройки, оформлять реальную покупку или запускать исполнение заказа без разрешения.

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

Если что-то пошло не так

Для точного отката верните сохранённые тему и весь исходный HTML затронутого уведомления. Default означает стандартный вариант, а не вашу резервную копию. После восстановления проверьте исходный сценарий, прежде чем пробовать новую вставку. Не меняйте заодно рабочую логику заказа, чтобы скрыть проблему оформления.

Как поддерживать небольшой блок дальше

Храните проект Mailvex, полный экспорт, выделенный фрагмент и версию Shopify вместе с датой и ответственным. В последующей правке меняется небольшая помеченная область, но её новый экспорт и обязательная подпись снова проверяются. Изменения в Mailvex не обновляют Shopify автоматически.

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

Частые вопросы

Можно заменить всё письмо экспортом Mailvex?

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

Можно добавить имя покупателя или ещё одну кнопку?

Для первого варианта оставьте текст статическим и сохраните исходное действие Shopify. Динамические элементы и новые ссылки расширяют задачу и требуют проверки в контексте существующего шаблона.

Получится ли точная копия всего предпросмотра Mailvex?

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