Headless Shopify на Hydrogen: коли це варто робити, а коли ні

«Headless» — одне з найгучніших слів в e-commerce. Агенції охоче його продають: окремий фронтенд на React, миттєві переходи між сторінками, повна свобода дизайну. Shopify має для цього власний фреймворк — Hydrogen — і безкоштовний хостинг Oxygen.

Але headless — це не апгрейд теми, а інша архітектура магазину з іншими витратами. Для більшості магазинів добре зроблена тема Shopify дає той самий результат за значно менші гроші. Розберімо, коли Hydrogen справді окупається, а коли ні.

Головне за 30 секундHeadless означає, що вітрину (те, що бачить покупець) зроблено окремим застосунком, а Shopify лишається «бекендом»: товари, кошик, оформлення замовлення.
Окупається, коли у вас нестандартний UX, кілька вітрин або контент із різних джерел — і є бюджет на постійну розробку.
Не окупається, коли проблема у швидкості, дизайні чи конверсії — це вирішується темою.
Приховані витрати: частина додатків перестає працювати, редактор теми зникає, кожна зміна — це робота розробника.

Що таке headless і Hydrogen

У звичайному магазині Shopify сторінки генерує тема на мові Liquid. Ви редагуєте її в адмінці, а додатки вбудовуються в неї самі.

У headless-магазині сторінки генерує окремий застосунок, який отримує дані з Shopify через Storefront API. Hydrogen — це фреймворк Shopify для таких застосунків на React (він побудований на React Router). Oxygen — хостинг Shopify для Hydrogen-вітрин, без доплати на більшості тарифів (окрім Starter).

	Тема (Liquid)	Hydrogen (headless)
Хто змінює сторінки	Маркетолог у редакторі теми	Розробник у коді або редактор у CMS
Додатки з App Store	Вбудовуються в тему автоматично	Лише ті, що мають API; решту треба інтегрувати вручну
Оформлення замовлення	Checkout Shopify	Той самий Checkout Shopify
Швидкість	Висока, якщо тема чиста	Висока, але залежить від якості коду
Свобода UX	В межах можливостей теми	Будь-який інтерфейс
Вартість запуску	Нижча	У кілька разів вища
Підтримка	Здебільшого без розробника	Потрібен розробник постійно

Оформлення замовлення не змінюється

Навіть у headless-магазині покупець платить на стандартному Checkout Shopify. Тому платіжні провайдери, Shop Pay і більшість налаштувань оплати працюють так само, як і з темою.

Коли headless окупається

Нестандартний покупецький досвід. Конфігуратор товару, складні калькулятори, персоналізація в реальному часі, інтерфейс, близький до застосунку, — те, що в темі робиться через милиці.
Кілька вітрин на одних даних. Різні бренди, країни чи B2B-портал з одного каталогу, кожен зі своїм дизайном.
Контент — частина продукту. Медіа-бренд, де статті, лукбуки й товари змішані, а контент живе в окремій CMS.
Інтеграції, яких тема не витримує. Ціни, наявність чи рекомендації з вашого ERP або власного сервісу в реальному часі.
Є команда. Ви маєте (або готові оплачувати) React-розробників на постійній основі — не лише на запуск, а й на підтримку.

Найкраще headless працює, коли збігається кілька пунктів одразу. Один пункт рідко виправдовує витрати.

Коли headless не окупається

Магазин повільний. Зазвичай винні зайві додатки, важкі зображення й скрипти. Це виправляється в темі — дивіться 10 причин повільного магазину.
Хочеться «унікального дизайну». Кастомна тема Shopify дає майже будь-який дизайн, а маркетолог зберігає редактор.
Невисока конверсія. Причина рідко в архітектурі — частіше в UX, фото, ціні чи доставці.
Невелика команда без розробника. Кожен банер, акція чи нова сторінка перетворяться на задачу для програміста.
Магазин тримається на додатках. Відгуки, лояльність, апсели, віджети — у headless більшість із них доведеться інтегрувати заново або замінити.

Приховані витрати headless

Додатки: усе, що вбудовується в тему (віджети відгуків, попапи, бейджі), на headless-вітрині саме не з'явиться.
Редактор: редактор теми зникає — потрібна CMS (метаоб'єкти Shopify, Sanity, Contentful) і її налаштування.
SEO й аналітика: мета-теги, sitemap, структуровані дані, згода на cookies і відстеження подій треба налаштувати в коді.
Підтримка: оновлення фреймворку, API Shopify і залежностей — це постійна робота, а не разовий проєкт.

Що змінюється для магазину в Україні

Якщо ваш магазин працює з українськими сервісами, перевірте ці моменти заздалегідь (детальніше — у статті Shopify в Україні):

Що	З темою	З Hydrogen
Платіжні провайдери	На Checkout	Без змін — на тому ж Checkout
Фіскальні чеки (ПРРО)	Через провайдера або сервіс	Без змін
Вибір відділення Нової пошти	Віджет додатка в кошику	Потрібна власна реалізація через API Нової пошти
BAS, KeyCRM та інші облікові системи	Через конектори	Без змін — вони працюють із замовленнями, а не з вітриною

Найбільше роботи зазвичай додає саме вибір відділення в кошику: віджети додатків розраховані на тему, тож у headless цей крок треба будувати самостійно.

Компромісні варіанти

Між «лише тема» і «повний headless» є проміжні рішення:

Варіант	Що це	Коли підходить
Оптимізована тема	Чиста тема Online Store 2.0, мінімум додатків, власні секції	Більшість магазинів
Кастомні секції й метаоб'єкти	Складні блоки й контент без зміни архітектури	Потрібна гнучкість, але не новий фронтенд
Гібрид	Основний магазин на темі, окрема Hydrogen-вітрина для спецпроєкту	Конфігуратор, лендинг кампанії, B2B-портал
Повний headless	Уся вітрина на Hydrogen	Великий бренд із командою розробки

Гібрид часто найрозумніший старт: ви перевіряєте headless на одному проєкті, не ризикуючи всім магазином.

Чекліст рішення

Відповідайте чесно. Якщо більшість відповідей «ні» — залишайтеся на темі.

Чи є конкретна функція, яку тема не може реалізувати (а не «хочеться сучаснішого»)?
Чи вирішили ви вже проблеми швидкості й UX у темі — і впираєтеся в її межі?
Чи є бюджет на постійну розробку, а не лише на запуск?
Чи готова команда вносити зміни через CMS або розробника замість редактора теми?
Чи перевірили ви кожен важливий додаток — чи працює він без теми?
Чи окупить зростання конверсії вищу вартість запуску й підтримки?

Не впевнені, чи потрібен вам headless?

Ми оцінимо ваш магазин і скажемо чесно: чи вирішить задачу тема, гібрид чи повний Hydrogen — з оцінкою вартості кожного варіанту.