Senior Frontend Architect, 10+ років досвіду побудови production-проєктів на Next.js. Contentful Certified Professional (2024). Спеціалізація: React Server Components, headless eCommerce, інженерія Core Web Vitals.
Шукаєте ціну headless Shopify — і майже кожен результат це форма розрахунку в подобі блог-поста. Це не випадково. Вартість справді змінна, а розмитість тримає перемовини відкритими. Цей текст робить навпаки: розділяє три речі, що реально коштують грошей, каже, які з них безкоштовні, і показує, де збірка тихо доходить до шестизначної суми, а де цього не потрібно. Написано тим, хто збирає ці вітрини, тож може дозволити собі називати цифри, а не ховати їх за дзвінком.
Фреймворк і хостинг безкоштовні, і це дивує
Найчастіша хиба — що перехід у headless означає платити за дорогу нову інфраструктуру. Ні. Hydrogen, власний React-фреймворк Shopify для headless-вітрин, відкритий і безкоштовний. Oxygen, глобальний хостинг Shopify для цих вітрин, входить у плани Shopify без доплати. Вітрину можна зібрати й на Next.js та хостити в іншому місці — цей шлях розбирає повний гайд зі збірки, а порівняння Hydrogen і Next.js чесно зважує обидва. Суть у будь-якому разі одна: фреймворк і хостинг — не та стаття, що коштує вам грошей. Коштує збірка.
Вартість платформи Shopify
Це передбачувана частина. Якщо ви на стандартному плані Shopify, headless його не змінює. Якщо ви на обсязі, де Shopify Plus має сенс, його зазвичай називають стартом близько 2300 доларів на місяць на сторінці цін Shopify, з переходом на оплату за оборотом на великих доходах. Headless сам по собі не привід переходити на Plus. На Plus ідуть заради кастомізації checkout, вищих лімітів API й B2B-функцій, а headless просто добре з цим поєднується, але вартість плану — бізнес-рішення, з яким ви зіткнетеся і без кастомної вітрини.
Вартість збірки й що її реально визначає
Ось де діапазон вибухає і де живе чесна цифра. Кастомна збірка агенції зазвичай іде від приблизно 10 000 доларів за сфокусовану вітрину до сильно за 100 000 для enterprise-масштабу, і розкид не випадковий. Він іде за коротким списком чинників: скільки кастомного дизайну, стандартний checkout і платіжний шлях чи сильно кастомізований, скільки інтеграцій потрібно магазину, скільки SEO і розмітки треба акуратно перенести, і наскільки серйозно проєктуються продуктивність і доступність, а не припускаються. Кожен із них — реальна робота, і кожен із них — робота, що вже зроблена одного разу і може бути перевикористана.
Приховані витрати, яких майже ніхто не перелічує
- Ризик SEO. Недбала headless-переробка може впустити позиції, втративши канонічні URL і розмітку, а повернути цей трафік коштує куди дорожче, ніж зробити правильно з першого разу. Якщо Search Console вже вас позначає, як читати провалену оцінку Core Web Vitals — дешевший перший крок.
- Інженерія продуктивності. Швидкість — увесь сенс headless, але її проєктують, а не отримують задарма. Збірка, що це пропустила, може виявитися повільнішою за тему, яку замінила, а це найгірший із результатів, за які платять.
- Постійне обслуговування. Разова кастомна збірка без тестів — це магазин, що тихо ламається в міру оновлення залежностей, і кожна правка — новий рахунок. Збірка з реальним покриттям тестами поводиться за пів року так само, як у день запуску.
- Доступність. WCAG 2.2 AA — це і питання конверсії, і юридичне питання, а дооснащувати її потім дорожче, ніж вбудувати з самого початку.
Чи працюватимуть мої застосунки Shopify після переходу на headless?
Більшість — ні, і саме це найдужче дивує в кошторисі. Застосунки з App Store, які щось додають на вітрину, роблять це, вбудовуючись у вашу Liquid-тему, а в headless-вітрини Liquid-теми, куди вбудовуватися, немає. Позиція самого Shopify видна з того, як у нього все влаштовано: документація по headless відправляє вас до застосунків, зроблених для headless-комерції, і під кастомні вітрини є окрема підбірка в App Store, а не загальний каталог. Усе, що працює з бекендом, у порядку: вітрини воно й не торкалося. Перезбирати треба видимий шар.
Тому чесний спосіб рахувати headless-збірку — спершу провести аудит застосунків і розкласти їх на три частини: бекенд-застосунки, що переїжджають без змін; застосунки, у чийого вендора є API для інтеграції; і вітринні застосунки без headless-шляху, які доведеться перезбирати як частину вітрини. Саме третя частина рухає кошторис, і її розмір ніхто не назве, не подивившись ваш список. Темплейт зменшує це тим, що функції, які зазвичай і потрапляють у третю частину, вже зібрані: відгуки й рейтинги-зірки, вішлист, рекомендації товарів і фасетний пошук, тож вони перестають бути рядками в кошторисі. Аудит це не скасовує, і в магазину з нестандартним застосунком робота все одно буде.
Кастомна збірка агенції проти протестованого темплейта
Найясніше побачити, куди йдуть гроші, — поставити два підходи поруч. Темплейт не пропускає складні частини, він уже заплатив за них одного разу, тому вартість збірки й схлопується.
| Область витрат | Кастомна збірка агенції | Збірка на темплейті |
|---|---|---|
| Основа вітрини | Збирається з нуля щоразу | Уже зібрана і протестована, вмикається конфігом |
| Checkout та інтеграції | Кастомна робота, оплата за годинами | Стандартний хостовий checkout Shopify, підключається конфігом |
| SEO і розмітка | Переноситься вручну, легко втратити | Вбудовано: метадані, карта сайту і JSON-LD за замовчуванням |
| Тести і доступність | Опційно, часто ріжуть заради бюджету | 460+ тестів і WCAG 2.2 AA у гейтах CI |
| Час до запуску | Тижні-місяці | Години на підключення і запуск |
| Типовий діапазон | ~10 000 до 100 000+ доларів | Частка вартості кастомної збірки |
Як темплейт змінює розрахунок
Причина, чому протестований темплейт настільки дешевший, не в тому, що він робить менше. У тому, що дорога, ризикована база вже зроблена і перевірена, тому бюджет купує ваш магазин, а не оплачує вдруге сантехніку, яка потрібна кожному. Темплейт headless-комерції працює на Shopify з його стандартним хостовим checkout, з вбудованим SEO, типізованим шаром даних, 460+ автотестами, доступністю WCAG 2.2 AA, що перевіряється на кожній зміні, і гейтами Lighthouse за продуктивністю. Та сама вітрина працює і на Magento через один перемикач у конфізі, і це лишає платформу оборотною, а не прив'язує до неї всю збірку. Ви підключаєте свій Shopify і запускаєтеся за години. Подивитися в роботі — на живому демо, а як headless лягає на масштаб — в архітектурі enterprise-комерції.
Коли headless Shopify не вартий грошей
Найдешевший headless-проєкт — той, який ви вирішили не запускати. Тема, що вже швидко вантажиться, проходить свої метрики й робить те, що потрібно бренду, не є проблемою в очікуванні бюджету, і платити за її заміну означає перетворити робочий актив на рахунок. Те саме з магазином, який ще з'ясовує, що продається: гроші, вкладені в переробку вітрини на цьому етапі, це гроші, не вкладені в пошук товару, який працює. Витрату виправдовують дані, а не архітектура. Коли вітрина у ваших власних цифрах виглядає тим, що обмежує виторг, збірка себе окупає; до того ні, і той, хто виставляє вам кошторис, має сказати це сам. Безкоштовний аудит сайту покаже ваші польові дані для будь-якого URL, а розбір headless-архітектури покриває глибшу роботу, якщо цифри кажуть, що час.
Скільки коштує headless-магазин на Shopify?
Для кастомної збірки агенції — зазвичай десь між приблизно 10 000 доларів за сфокусовану вітрину і сильно за 100 000 для enterprise-масштабу, поверх вашого плану Shopify, який не змінюється, якщо ви не переходите на Plus близько 2300 доларів на місяць. Самі фреймворк і хостинг безкоштовні. На протестованому темплейті вартість збірки — частка кастомного проєкту, бо складні частини вже зроблені, і ви підключаєте свій Shopify і запускаєтеся за години, а не платите за місяці кастомної роботи. Чесна відповідь: платформа передбачувана, а збірка — там, де живе справжній розкид.
Чи вартий headless Shopify своїх грошей?
Вартий, коли швидкість і контроль вимірно коштують вам продажів, і не раніше. Бізнес-обґрунтування тримається на реальних цифрах: Deloitte з'ясував, що десята частка секунди мобільної швидкості підняла конверсію в ритейлі на 8,4 відсотка, а дані Google на web.dev показують: у сайтів, що проходять Core Web Vitals, на 24 відсотки нижча частка відмов. Якщо повільна тема тримає ці цифри внизу, швидка headless-вітрина себе окупає. Якщо ваша тема вже швидка — ні, і дешевша чесна відповідь: дати їй спокій.
Скільки часу займає збірка headless Shopify?
Кастомна збірка — це місяці, а не тижні, і саме час зазвичай перетворює фіксований кошторис на змінний. Сама вітрина рідко буває найдовшою ділянкою. Строк розтягують аудит застосунків вище, checkout і платіжний шлях, перенесення SEO без втрати позицій і кола правок по кастомному дизайну, і кожен із цих пунктів живе в чужому календарі не менше, ніж у вашому. Будь-який строк, названий до того, як прочитали ваш список застосунків, вважайте заглушкою.
Темплейт існує, щоб забрати більшу частину цього. Ви підключаєте Shopify, додаєте токени бренду й контент, і оформлена оптимізована вітрина працює вже за години, бо фундамент, на збірку й тестування якого інакше йдуть місяці, уже зібраний і протестований. Лишається ваша конкретна робота: застосунки з третьої частини, усе нестандартне в каталозі й дизайнерські рішення, які можете ухвалити лише ви. Цей залишок чесно оцінюється в розмові й нечесно — до неї.
Як отримати чесний розрахунок?
Почніть з живого демо і темплейта headless-комерції: удвох вони показують, що саме лежить у коробці, а чого там немає. Якщо підходить, темплейт підключається до вашого Shopify і запускається за години, за частку вартості кастомної збірки, бо дорога база вже зроблена. Коли захочете, щоб цифри розібрали проти вашого плану й вашого каталогу, зв'яжіться, і ми порахуємо, чи виправдана витрата сьогодні, чи тема, яка у вас є, ще робить свою роботу.