«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 — с оценкой стоимости каждого варианта.
Свяжитесь с нами
Хотите применить это в своём магазине?
Расскажите, что нужно вашему магазину на Shopify, — мы предложим решение и оценим объём работ