Headless e-commerce — Shopify Storefront API + custom frontend

1. Co to headless e-commerce

"Headless" = oddzielenie warstwy backendu (produkty, koszyk, płatności, magazyn) od frontendu (to co widzi użytkownik w przeglądarce). W standardowym Shopify oba są w jednym systemie — theme renderuje strony używając Liquid templates. W headless setup:

• Backend (Shopify): zarządzanie produktami, zamówieniami, klientami, płatnościami, magazynem, fulfillment — bez zmian, używasz Shopify admin jak dotychczas
• Frontend (custom): Next.js, Astro lub Hydrogen — Twoja własna aplikacja webowa, która pobiera dane z Shopify przez API i renderuje strony

Zalety: pełna kontrola nad UX, dowolny stack, optymalne performance. Wady: musisz utrzymywać dwa systemy + brak no-code visual editora dla wyglądu.

2. Kiedy headless ma sens

Scenariusz A: Sklep DTC z silnym brandem

Marki kosmetyczne, modowe, lifestyle — gdzie wygląd strony to 50% wartości brandu. Standardowy theme Shopify ogranicza unikalność, custom storefront pozwala na animacje, micro-interactions, custom typography, dokładnie taki user flow jaki chcesz. Brand value > cost savings.

Scenariusz B: B2B sklep z konfiguratorem produktu

Klient wybiera produkt, kolor, rozmiar, opcje pakowania, wykończenie — i widzi cenę live. Shopify theme tego nie zrobi cleanly. Headless + React state management = łatwy konfigurator. Aplikacje B2B często tak właśnie zaczynają.

Scenariusz C: Multi-channel (sklep + mobile app + kiosk + content site)

Macie sklep online + native mobile app + kioski w showroomach + blog/content site. Wszystkie muszą widzieć ten sam catalog. Headless = jeden Shopify backend, wiele frontends. Standardowy Shopify dałby Ci tylko web.

Scenariusz D: Wymagania performance (Core Web Vitals)

Jeśli kampanie Google/Meta mają być profitable, mobile CWV musi być Good. Standard Shopify theme często wpada w Poor (Dawn theme jest lepsze ale wciąż nie top). Headless Next.js/Astro = startujesz z 95+ score.

3. Stack — porównanie 3 opcji

Stack	Shopify + Hydrogen	Shopify + Next.js	Shopify + Astro
Wsparcie Shopify	Oficjalne	Community	Community
Ekosystem JS	Remix-based	Największy (React)	Multi-framework
Performance (CWV)	~90	~92	~95-99
Hosting	Oxygen (free)	Vercel/Netlify	Vercel/Netlify/Cloudflare
Learning curve	Średnia (Remix)	Niska (popularne)	Niska
Dynamiczne content	Świetne (SSR)	Świetne (ISR)	OK (SSG + Islands)
SEO out-of-the-box	OK	Świetne (next/seo)	Świetne (built-in)

Rekomendacja: Next.js dla większości sklepów. Astro dla content-heavy (sklep + duży blog + kategorie ze SEO content). Hydrogen jeśli zespół zna już Remix lub chcesz oficjalne wsparcie Shopify.

4. Shopify Storefront API — co umie

Shopify Storefront API to GraphQL endpoint (/api/2024-04/graphql.json) z poniższymi features:

• Produkty: listing, filtrowanie, warianty, ceny, dostępność, custom metafields
• Kolekcje: kategorie produktów z filtrami
• Koszyk: create, add, remove, update — wszystko po stronie klienta, Shopify zarządza stanem
• Checkout: przejście do Shopify-hosted checkout (z Twoim brandingiem) — nie musisz budować checkoutu
• Klienci: rejestracja, logowanie, historia zamówień, adresy
• Search: built-in product search + Shopify Search API (advanced)
• Lokalizacje: multi-currency, multi-language (Markets)

Przykład query w GraphQL:

query GetProducts {
  products(first: 12, sortKey: BEST_SELLING) {
    edges {
      node {
        id
        title
        handle
        priceRange {
          minVariantPrice { amount currencyCode }
        }
        images(first: 1) {
          edges { node { url altText } }
        }
      }
    }
  }
}

5. Koszty headless w PL (2026)

Setup (jednorazowo)

• Mały sklep (200-1000 produktów, standard funkcjonalność): 25-60 000 PLN
• Średni z customem (B2B portal, konfigurator, ERP integration): 60-150 000 PLN
• Enterprise multi-channel: 150-400 000 PLN

Miesięczne (utrzymanie)

• Shopify Basic ($29) / Shopify ($79) / Advanced ($299) — zależnie od obrotu
• Shopify Plus ($2000+) — dla większych, wymagany dla niektórych headless features
• Vercel/Netlify hosting: 0 PLN (Hobby) lub 80 PLN/mies. (Pro) — dla większości sklepów free tier wystarczy
• CDN images (Shopify CDN włączone w abonament) — bezpłatnie
• Maintenance dev: 1-3k PLN/mies. dla regularnych updates

6. Performance — realny gain

Liczby z migracji standard Shopify Dawn → headless Next.js, sklep DTC z 600 produktami:

• LCP (Largest Contentful Paint): 3.4s → 1.1s (-68%)
• INP (Interaction to Next Paint): 220ms → 80ms (-64%)
• CLS (Cumulative Layout Shift): 0.12 → 0.02 (-83%)
• Mobile PageSpeed Score: 58 → 96
• Konwersja: 1.4% → 1.9% (+36% — pierwsze 3 mies. po deploy)

Performance gain pochodzi z: (1) eliminacji blocking JS (Shopify scripts ładowane lazy), (2) custom ISR cache strategy, (3) Vercel Edge Network (CDN), (4) optymalizacji obrazów (next/image lub Astro Image), (5) tree-shaking unused code.

7. Pułapki o których nikt nie mówi

Tracking i pixele

Headless == musisz ręcznie wstawić Meta Pixel, Google Ads Conversion, Klaviyo tracking. Shopify ma to "out of the box" w theme. Plan na 1-2 dni dewelopera na initial setup.

Shopify Apps

Wiele Shopify Apps modyfikuje frontend (np. recenzje produktów, popup'y, upsell). Headless = większość z nich nie zadziała. Musisz znaleźć "headless-compatible" apps lub zbudować features samodzielnie. To często gating issue dla migracji istniejących sklepów.

Brak theme editora

Klient nie kliknie sobie "zmień kolor banera" w Shopify admin. Każda zmiana wyglądu = dev. Można to złagodzić: użyj Shopify metafields jako "CMS" dla treści edytowalnych przez klienta (sliders, banery promocyjne, content sekcje).

Storefront API rate limits

1000 req/min per app token. Wystarczy dla większości, ale przy traffic spike (kampania, viral, Black Friday) trzeba cache'ować agresywnie. Vercel ISR + Shopify webhooks (invalidate cache na product update) załatwia 99% przypadków.

8. Decision tree

1. Obrót sklepu > 200k PLN/mies? TAK → headless może mieć sens. NIE → standardowy theme.
2. Mobile PageSpeed < 70 i kampanie tracą $ na konwersji? TAK → headless. NIE → najpierw zoptymalizuj theme.
3. Potrzebujecie custom UX (konfigurator, B2B portal, mobile app)? TAK → headless. NIE → theme + apps wystarczą.
4. Macie budżet 30-80k PLN i 8-16 tyg czasu? TAK → headless. NIE → odłóż na rok.
5. Klient (edytor) musi sam zmieniać wygląd? TAK → standard Shopify lub Shopify + custom moduły. NIE → headless OK.

---

Podobne artykuły