Headless Shopify med Hydrogen — när frontend ska få fria händer
Headless Shopify innebär att vi kopplar bort temat och bygger frontend som en egen applikation mot Shopifys Storefront API — medan Shopify sköter kassa, betalning och order som vanligt. Med Hydrogen och Oxygen, Shopifys egen React-stack och edge-hosting, går det att bygga blixtsnabba, helt skräddarsydda upplevelser. Vi bygger headless när det löser ett verkligt problem — och säger ärligt ifrån när ett välbyggt tema räcker längre.
Vad headless Shopify faktiskt är
I en vanlig Shopify-butik renderas sidorna av temat. Headless betyder att presentationslagret lyfts ut och byggs som en fristående frontend som hämtar produkter, priser och innehåll via API, medan Shopify behåller motorn — kassa, betalningar, lager och order. Ni byter alltså huvudet, inte hjärtat. Vinsten är total frihet i frontend; priset är att funktioner temat ger gratis nu byggs och förvaltas av oss.
- Frontend som egen applikation — inget tak för design och funktion
- Shopify kvar som backend för kassa, betalning, lager och order
- Samma backend kan mata flera kanaler: webb, app, skärmar i butik
Shopifys headless-stack: Hydrogen, Oxygen och Storefront API
Shopify har en sammanhållen väg till headless, och vi bygger på den. Storefront API matar frontend med data. Hydrogen är Shopifys React-ramverk med färdiga byggstenar för varukorg, produktsidor och SEO. Oxygen är edge-hostingen som kör storefronten nära besökaren på ett globalt CDN. Det går att gå headless även med Next.js mot Storefront API, men för de flesta fall är Hydrogen och Oxygen den smidigaste vägen — gjorda för Shopify och för varandra.
- Storefront API — produkter, priser, varukorg och kassa via API
- Hydrogen — React-ramverket för själva storefronten
- Oxygen — edge-hosting på globalt CDN för prestanda
- Alternativ: Next.js mot Storefront API när ett konkret skäl finns
När headless Shopify lönar sig — och när det inte gör det
Vi är ärliga med avvägningen, för headless flyttar komplexitet från plattformen till bygget. Det lönar sig för etablerade varumärken — ofta på Plus — med konkreta krav på prestanda, en unik upplevelse temat inte klarar, eller flera kanaler som ska dela samma backend. Saknas de behoven blir headless oftast att betala för flexibilitet ingen utnyttjar, år efter år. Då rekommenderar vi ett välbyggt tema i stället — billigare, enklare och fullt snabbt nog.
- Rätt när: prestanda i framkant, unik affärskritisk upplevelse, flerkanal
- Rätt när: ni har resurser att förvalta en egen frontend över tid
- Fel när: en standardbutik räcker — då är temat det klokare valet
Prestanda och SEO — där headless vinner och var det är riskabelt
En välbyggd headless-frontend på Oxygen når ofta LCP under 1,2 sekunder, mot en median runt 3 sekunder för vanliga teman — en verklig prestandavinst. Men en migrering till headless är känslig för SEO: många butiker ser en trafiksvacka på 3–6 månader medan Google crawlar om sajten, och felaktiga canonicals, hreflang, strukturerad data eller sitemaps kan sänka rankingen. Vi bygger med server-side rendering så att Google får färdig HTML, och planerar redirects, struktur och mätning från start så att synligheten följer med.
- LCP ofta under 1,2 s på Oxygen mot ~3 s för vanliga teman
- Server-side rendering så Google får fullständig HTML
- 301-redirects, canonicals, hreflang och strukturerad data planerade från start
- Mätning och Search Console-bevakning genom hela migreringen
Vår leverans — och ett pågående exempel
Vi tar headless-projekt från behovsanalys och arkitektur till bygge, migrering och drift, med Shopify kvar som motor. Ni får en fast kontaktperson, svenska avtal och full äganderätt till kod och butik. Ett pågående exempel ur vår egen verkstad: för det svenska nagellaksvarumärket Heylinn bygger vi en headless storefront på Hydrogen mot deras Shopify-backend — just en sådan varumärkesdriven D2C-situation där headless gör verklig skillnad. Och precis som alltid: vi bygger det bara när det löser ett verkligt problem.
- Behovsanalys och arkitektur — är headless ens rätt för er?
- Bygge på Hydrogen och Oxygen, eller Next.js när skäl finns
- Migrering med bevarat SEO-värde och löpande förvaltning
- Pågående Hydrogen-bygge för varumärket Heylinn
Innan ni bestämmer er.
- Vad är headless Shopify?
- Headless Shopify innebär att butikens frontend byggs som en fristående applikation mot Shopifys Storefront API, medan Shopify behåller kassa, betalning, lager och order. Presentationslagret — "huvudet" — lyfts ut och byggs separat, oftast med Hydrogen, vilket ger full frihet i design och funktion.
- Vad är Hydrogen och Oxygen?
- Hydrogen är Shopifys React-baserade ramverk för att bygga headless-storefronts, med färdiga byggstenar för varukorg, produktsidor och SEO. Oxygen är Shopifys edge-hosting som kör Hydrogen-storefronten på ett globalt CDN nära besökaren. Tillsammans är de Shopifys egen, sammanhållna väg till headless.
- Behöver vi Shopify Plus för headless?
- Storefront API och Hydrogen går att använda på vanliga Shopify-planer, men headless-projekt görs i praktiken oftast av Plus-varumärken — det är där volymen, kraven och resurserna att förvalta en egen frontend brukar finnas. Vi bedömer gärna om det är motiverat för er.
- Tappar vi SEO om vi går headless?
- Inte om det görs rätt. Risken finns vid migrering — många ser en trafiksvacka på 3–6 månader medan Google värderar om sajten. Vi bygger med server-side rendering så Google får färdig HTML, och planerar redirects, canonicals och strukturerad data från start så att rankingen följer med.
Fler tjänster och guider.
Shopify Plus
Shopify Plus-byrå för volym, B2B och internationell handel. Checkout-anpassning, Flow-automation och ERP-integration. Boka en genomgång med oss.
Läs merShopify-byrå
Anlita en certifierad Shopify-byrå — 150+ projekt sedan 2016 för bl.a. Turtle Wax & Stihl. Så går projektet till, vad det kostar och vilka ni jobbar med. Boka ett möte.
Läs merShopify B2B
Shopify B2B med company accounts, prislistor, fakturabetalning och en B2B-checkout som proffsköpare faktiskt använder. Boka en behovsanalys med oss.
Läs merE-handelsplattformar
Marknadsöversikt över e-handelsplattformar 2026: Shopify, Magento, WooCommerce, Norce och Centra. Ärliga styrkor och svagheter per plattform. Läs guiden.
Läs merShopify-migreringar
Migrera till Shopify från WooCommerce, Magento, Norce eller Wikinggruppen. Säker datamigrering, 301-redirects och bevarad ranking. Boka en genomgång.
Läs merGuider
Headless på Shopify: Hydrogen, Oxygen och Storefront API
Headless på Shopify betyder oftast Hydrogen och Oxygen — Shopifys egen React-stack mot Storefront API. Vi går igenom vad den faktiskt ger, när den lönar sig för en Shopify- eller Plus-butik, vad den kostar och var SEO-riskerna ligger vid en migrering.
Läs merHeadless commerce: vad det är och om du behöver det
Headless commerce framställs ofta som e-handelns framtid — men sanningen är att de flesta butiker inte behöver det. Vi förklarar vad headless faktiskt är, väger nyttan mot kostnaden och är tydliga med när det är rätt och när det bara är komplexitet.
Läs merFå ett förslag på upplägg.
Svara på några snabba frågor så återkommer vi med en offert eller ett förslag inom en arbetsdag.
Var befinner ni er idag?
Hellre boka ett möte direkt? Kontakta oss.
Låt oss prata e-handel.
Berätta kort om ert projekt — kostnadsfritt och förutsättningslöst. Vi återkommer inom en arbetsdag.