Shopify-магазин бренду дієтичних добавок: власний checkout з Новою Поштою, WayForPay і KeyCRM

Коротко: для українського бренду дієтичних добавок ми за чотири місяці (червень–жовтень 2026) перетворили Shopify-магазин на систему, де замовлення з власного checkout само потрапляє в Shopify, KeyCRM, Telegram і на пошту, а покупець обирає відділення чи поштомат Нової Пошти й платить через WayForPay. Додатково — тема на метаполях, відгуки з модерацією, промокоди, фіди для Google і Meta та англійська версія.

Клієнт і задача

Клієнт — український бренд дієтичних добавок (назву розкриємо після погодження). В асортименті добавки, медичні вироби й кілька лікарських засобів, які за правилами продаються лише через аптеки. Магазин уже працював на Shopify з темою на базі Dawn і двома конструкторами сторінок.

Що заважало продавати:

• стандартне оформлення замовлення не давало зручно вибрати відділення чи поштомат Нової Пошти й оплатити через WayForPay, як звикли українські покупці;
• замовлення доводилося вручну переносити в KeyCRM, де працює команда;
• тексти товарів (склад, дозування, кому підходить) були зашиті в шаблони — будь-яка правка ставала задачею для розробника;
• реклама не отримувала повних даних: не було подій ecommerce і товарних фідів для Google Merchant Center та Meta.

Обмеження

• Checkout Shopify. Глибока зміна кроків оформлення доступна лише на тарифі Shopify Plus. Доставку й оплату треба було побудувати поруч, не втративши облік замовлень у самому Shopify.
• Секрети. Ключі WayForPay, Нової Пошти, KeyCRM і поштових сервісів не можна тримати в темі: її код віддається в браузер.
• Живий магазин. Тема синхронізується з GitHub, тож кожна зміна в основній гілці одразу йде на сайт. Продажі не мали зупинятися ні на день.
• Лікарські засоби. Для них не може бути кошика й онлайн-оплати — потрібна окрема логіка картки.
• Редагування без коду. Команда клієнта мала сама змінювати контент в адмінці Shopify.

Рішення: архітектура і стек

Система складається з трьох частин, кожна з чіткою відповідальністю:

Частина	Що робить	Технології
Тема Shopify	Вітрина, картка товару, кошик, власна сторінка оформлення, кабінет покупця	Liquid, JavaScript, метаполя й metaobjects
Serverless-бекенд	Приймає замовлення, підписує платіж WayForPay, створює замовлення в Shopify і KeyCRM, надсилає Telegram і листи, проксує довідник Нової Пошти, синхронізує відгуки	Node.js на Vercel, Shopify Admin API, вебхуки
Утиліти	Масове оновлення SEO-полів, транслітерація адрес, перенесення даних між магазинами	Node.js-скрипти, Admin GraphQL API

Усі ключі живуть лише в змінних оточення бекенду. Тема знає тільки його адресу.

Етап 1. Власне оформлення замовлення

• Вибір міста, відділення або поштомата Нової Пошти з підказками від першого введеного символу, маска телефону +38 0….
• Оплата онлайн через WayForPay: бекенд підписує запит, браузер переходить на захищену сторінку оплати. Або оплата при отриманні.
• Бекенд створює замовлення в Shopify через Admin API, тож розділ «Замовлення», звіти й залишки лишаються в Shopify.
• Паралельно замовлення йде в KeyCRM зі структурованими полями доставки, команда отримує повідомлення в Telegram, адміністратор — лист, а покупець — підтвердження через eSputnik.
• Покупець бачить сторінку подяки одразу, а інтеграції виконуються у фоні. Кожен зовнішній запит обмежено 8 секундами, щоб повільний сервіс не гальмував оформлення.

Етап 2. Тема на метаполях

• Один універсальний шаблон картки для всіх товарів: переваги, склад, спосіб прийому, кроки прийому, картки інгредієнтів, FAQ і фото блоків беруться з метаполів і metaobjects.
• Порожнє поле ховає весь блок — на сайті не буває заглушок на кшталт «текст скоро з’явиться».
• Окремий документ для команди: яке поле за який блок відповідає і як його створити в адмінці.
• Для лікарських засобів замість кошика — кнопка «де купити» з посиланнями на аптеки (з атрибутом nofollow sponsored), ціна прихована, блок доставки не показується.
• Мега-меню за категоріями й «за потребою», каталог із фільтрами, власна сторінка пошуку, блог, сторінка акцій, брендова сторінка 404.

Етап 3. Продажі й довіра

• Подарунок до замовлення: товар-подарунок задається метаполем, без коду.
• Попап зі знижкою: кожен підписник отримує унікальний одноразовий код, дійсний місяць. Код створюється через Admin API й надходить листом через eSputnik.
• Покупка в один клік з окремою подією для аналітики.
• Попап кошика після додавання товару і крос-продаж у кошику (без лікарських засобів і медвиробів).
• Відгуки: форма на картці й окрема сторінка відгуків, підсумковий рейтинг з розподілом за зірками. Відгук з’являється на сайті, коли менеджер позначає його перевіреним в адмінці: вебхук Shopify сам додає його до товару або прибирає.
• Заявки з форми «Контакти» потрапляють у потрібну воронку KeyCRM.
• Кабінет покупця: статус замовлення і повтор попередньої покупки.

Етап 4. Аналітика і SEO

• GTM і GA4 з подіями ecommerce у dataLayer, Meta Pixel.
• XML-фід для Google Merchant Center (з окремим фото для фіду через метаполе) і фід для каталогу Meta.
• SEO-база: H1 на головній, власний robots.txt, alt для фото товарів, автоматичний meta description, якщо його не заповнили вручну, noindex для службових сторінок.
• Скрипт масового заповнення SEO title і description та скрипт транслітерації адрес сторінок, колекцій, статей і товарів.

Етап 5. Перенесення і англійська версія

Під запуск на новому магазині ми написали утиліту перенесення даних Shopify → Shopify через Admin GraphQL API. Вона переносить визначення метаполів і metaobjects, товари з варіантами, цінами, SEO й метаполями (з перепривʼязкою посилань), колекції, клієнтів, а історичні замовлення — наскільки це дозволяє API. Кроки запускаються по черзі з перевіркою між ними. Після цього з’явилася англійська версія теми і контентних сторінок.

Складнощі і як ми їх вирішили

• Checkout без Plus. Замість боротьби з обмеженнями платформи — власна сторінка оформлення і створення замовлення через Admin API. Покупець отримує звичний український сценарій, а облік лишається в Shopify.
• Повільні зовнішні сервіси. Спочатку оформлення чекало на всі інтеграції. Ми розвели їх: відповідь покупцю — одразу, Telegram, CRM і листи — у фоні з таймаутом.
• Одна знижка в усіх системах. Промокод мав однаково відображатися в кошику, на сторінці подяки, в листі, в eSputnik і в KeyCRM. У CRM знижка розкладається на ціни рядків, а не лише пишеться в коментар — інакше суми не сходилися б.
• Дублі в адресі доставки в CRM. Ми перевели доставку на структуровані поля KeyCRM замість одного текстового рядка.
• Код конструкторів сторінок. Секції, згенеровані конструкторами, ми не переписували руками: свої блоки винесли в окремі секції з власним префіксом.
• Синхронізація з GitHub. Одна помилка Liquid зупиняє синхронізацію теми. Тому зміни йшли невеликими релізами з перевіркою на тестовому магазині.

Результат

Конверсію, середній чек і дохід ми не публікуємо: ці дані в кабінетах клієнта, і покажемо їх після його погодження. Що змінилося на практиці:

• замовлення з’являється в Shopify, KeyCRM і Telegram без ручного перенесення;
• покупець обирає поштомат і платить онлайн без дзвінка менеджеру;
• команда клієнта сама редагує склад, дозування й FAQ товарів в адмінці;
• реклама отримує події ecommerce і товарні фіди;
• магазин має англійську версію і інструмент перенесення даних.

Обсяг: близько чотирьох місяців безперервної роботи (25 червня – 16 жовтня 2026), понад 330 комітів у репозиторії теми без урахування автоматичних синхронізацій з Shopify.

Що можна застосувати у вашому магазині

• Не підходить стандартний checkout — це не привід міняти платформу. Окрема сторінка оформлення, невеликий бекенд і Admin API зберігають облік у Shopify.
• Ключі — тільки на сервері. Усе, що лежить у темі, бачить будь-хто.
• Контент — у метаполях. Один шаблон на всі товари і поля, які заповнює команда, дешевші за десятки окремих шаблонів.
• Інтеграції — у фоні. Покупець не має чекати, поки відповість CRM.
• Знижка, ціна й доставка мають збігатися всюди — у кошику, листі, CRM і аналітиці.

Якщо ще обираєте платформу, почніть з порівняння Shopify і WooCommerce для українського ринку.

Пов’язані послуги і матеріали

• Розробка інтернет-магазину і робота з Shopify
• Інтеграція з CRM і наскрізна аналітика
• Проблеми, які закриває такий проєкт: клієнти кидають кошик, заявки губляться
• Ще один кейс на Shopify: аудит трекінгу й атрибуції

Хочете так само зв’язати свій магазин з доставкою, оплатою і CRM? Опишіть задачу — відповімо з планом і оцінкою.