Headless commerce förklaras ofta i abstrakta termer — men på Shopify har det blivit ganska konkret. Vill man bygga en fristående frontend mot sin Shopify-butik finns numera en egen stack för det: Hydrogen, Oxygen och Storefront API. Här går vi igenom vad de tre faktiskt gör, när det lönar sig att gå headless på Shopify, vad det kostar och — viktigast — var SEO-riskerna ligger om man migrerar en butik som redan rankar. Den bredare frågan om vad headless är och om du behöver det har vi en separat guide om; den här texten handlar specifikt om Shopify.
Vad headless betyder på just Shopify
I en vanlig Shopify-butik renderas sidorna av temat — Liquid-mallar som Shopify själv kör. Headless innebär att man kopplar bort temat och bygger frontend som en egen applikation, som hämtar produkter, priser och innehåll från Shopify via API och bestämmer själv hur allt presenteras. Backend — kassa, betalningar, order, lager — ligger kvar hos Shopify. Man byter alltså ut "huvudet", presentationslagret, men behåller motorn.
Poängen är frihet i frontend: en frontend som är en ren React-applikation har i princip inget tak för vad som går att bygga. Priset är att man lämnar mycket som temat annars sköter gratis — och får bygga och förvalta det själv.
Shopifys headless-stack: Hydrogen, Oxygen och Storefront API
Shopify har byggt en egen, sammanhållen väg till headless. Tre delar är värda att hålla isär:
- Storefront API — gränssnittet som matar din frontend med produkter, kollektioner, priser, varukorg och kassa. Det är fundamentet allt headless på Shopify vilar på.
- Hydrogen — Shopifys React-baserade ramverk för att bygga själva storefronten, med färdiga byggstenar för varukorg, produktsidor och SEO så att man slipper börja från noll.
- Oxygen — Shopifys edge-hosting som kör Hydrogen-storefronten på ett globalt CDN, nära besökaren. Det är där prestandavinsten till stor del kommer ifrån.
Man kan bygga headless på Shopify även utan Hydrogen — exempelvis med Next.js mot Storefront API — men 2026 täcker Hydrogen de flesta fall, och man går till Next.js först när det finns ett konkret tekniskt skäl. Fördelen med Hydrogen och Oxygen är att de är gjorda för varandra och för Shopify.
När det lönar sig på Shopify
Headless på Shopify riktar sig framför allt till etablerade varumärken på Plus-nivå med konkreta krav. Känn igen lägena där investeringen betalar sig:
- Prestanda i absolut framkant — en välbyggd headless-frontend når ofta LCP under 1,2 sekunder, mot en median runt 3 sekunder för vanliga teman.
- En unik upplevelse som temat inte kan leverera, och där skillnaden är affärskritisk — inte bara kosmetisk.
- Flera kanaler som ska dela samma backend — webb, app, skärmar i butik — med innehåll och produkter från en sanning.
- Ett team eller en byrå som kan förvalta en egen frontend över tid, inte bara lansera den.
Känner ni inte igen er i något av detta räcker ett välbyggt tema nästan alltid längre — billigare, enklare och fullt snabbt nog. Headless är ett verktyg för specifika problem, inte en uppgradering alla butiker behöver.
Priset och SEO-risken — var ärlig
Två saker nämns sällan i samma andetag som fördelarna, men hör hemma i beslutet:
- Kostnaden — ett riktigt headless-bygge är en större investering än ett tema, både initialt och löpande, eftersom funktioner temat ger gratis nu ska byggas och underhållas. Räkna med utvecklingsresurser över tid, inte bara fram till lansering.
- SEO-risken vid migrering — många butiker ser en trafiksvacka på 3–6 månader när Google ska crawla om och värdera om sajten, även när allt är tekniskt rätt gjort. Felaktiga canonicals, hreflang, strukturerad data eller sitemaps kan sänka rankingen rejält.
Det som räddar SEO i headless är server-side rendering: både Hydrogen och Next.js renderar färdig HTML på servern, så att Google får samma fullständiga sida som en vanlig server-renderad butik. Bygger man en ren klient-app som renderar i webbläsaren först, då blir det problem. Görs det rätt behöver headless inte kosta synlighet — men det kräver att man planerar för det från början.
Headless på Shopify är inte snabbare för att det är headless — det är snabbare för att någon byggt frontend rätt och kör den på edge. Tekniken är möjligheten, inte garantin.
Ur vår egen verkstad: Heylinn på Hydrogen
Ett konkret exempel: för det svenska nagellaksvarumärket Heylinn bygger vi en headless storefront på Hydrogen, mot deras Shopify-backend. Det är just en sådan situation headless är gjort för — ett varumärkesdrivet D2C-bolag som vill ha full kontroll över upplevelsen och prestanda i framkant, med Shopify kvar som motor för produkter, kassa och betalning. Vi bygger headless när det löser ett verkligt problem och håller oss till tema när det räcker — för Heylinn är det förstnämnda rätt.
Slutsats och nästa steg
Headless på Shopify betyder i praktiken Hydrogen, Oxygen och Storefront API — Shopifys egen stack för att bygga en fristående frontend mot en backend som ändå sköter det tunga. Det ger frihet och prestanda för varumärken med konkreta behov och resurser att förvalta det, till priset av en större investering och en migrering som måste göras varsamt för SEO:ns skull. För de flesta butiker räcker ett bra tema; för rätt varumärke är headless ett lyft.
Funderar ni på om headless Shopify är värt det för er — eller vill ni ha ett ärligt svar på om ett tema räcker? Vi bygger e-handel på Shopify sedan 2016, headless med Hydrogen när det behövs och tema när det räcker, och hjälper er gärna att avgöra vilket som gäller er butik.