Headless commerce forklares ofte i abstrakte termer — men på Shopify har det blitt ganske konkret. Vil man bygge en frittstående frontend mot Shopify-butikken sin, finnes det nå en egen stack for det: Hydrogen, Oxygen og Storefront API. Her går vi gjennom hva de tre faktisk gjør, når det lønner seg å gå headless på Shopify, hva det koster og — viktigst — hvor SEO-risikoene ligger hvis man migrerer en butikk som allerede rangerer. Det bredere spørsmålet om hva headless er og om du trenger det har vi en egen guide om; denne teksten handler spesifikt om Shopify.
Hva headless betyr på akkurat Shopify
I en vanlig Shopify-butikk rendres sidene av temaet — Liquid-maler som Shopify selv kjører. Headless innebærer at man kobler bort temaet og bygger frontend som en egen applikasjon, som henter produkter, priser og innhold fra Shopify via API og bestemmer selv hvordan alt presenteres. Backend — kasse, betalinger, ordre, lager — ligger igjen hos Shopify. Man bytter altså ut «hodet», presentasjonslaget, men beholder motoren.
Poenget er frihet i frontend: en frontend som er en ren React-applikasjon har i prinsippet ikke noe tak for hva som går an å bygge. Prisen er at man forlater mye som temaet ellers håndterer gratis — og får bygge og forvalte det selv.
Shopifys headless-stack: Hydrogen, Oxygen og Storefront API
Shopify har bygget en egen, sammenhengende vei til headless. Tre deler er verdt å holde fra hverandre:
- Storefront API — grensesnittet som mater frontenden din med produkter, kolleksjoner, priser, handlekurv og kasse. Det er fundamentet alt headless på Shopify hviler på.
- Hydrogen — Shopifys React-baserte rammeverk for å bygge selve storefronten, med ferdige byggeklosser for handlekurv, produktsider og SEO så man slipper å begynne fra null.
- Oxygen — Shopifys edge-hosting som kjører Hydrogen-storefronten på et globalt CDN, nær den besøkende. Det er der prestasjonsgevinsten i stor grad kommer fra.
Man kan bygge headless på Shopify også uten Hydrogen — for eksempel med Next.js mot Storefront API — men i 2026 dekker Hydrogen de fleste tilfeller, og man går til Next.js først når det finnes en konkret teknisk grunn. Fordelen med Hydrogen og Oxygen er at de er laget for hverandre og for Shopify.
Når det lønner seg på Shopify
Headless på Shopify retter seg fremfor alt til etablerte merkevarer på Plus-nivå med konkrete krav. Kjenn igjen situasjonene der investeringen betaler seg:
- Prestasjon i absolutt front — en velbygd headless-frontend når ofte LCP under 1,2 sekunder, mot en median rundt 3 sekunder for vanlige temaer.
- En unik opplevelse temaet ikke kan levere, og der forskjellen er forretningskritisk — ikke bare kosmetisk.
- Flere kanaler som skal dele samme backend — web, app, skjermer i butikk — med innhold og produkter fra én sannhet.
- Et team eller et byrå som kan forvalte en egen frontend over tid, ikke bare lansere den.
Kjenner dere dere ikke igjen i noe av dette, rekker et velbygd tema nesten alltid lenger — billigere, enklere og fullt raskt nok. Headless er et verktøy for spesifikke problemer, ikke en oppgradering alle butikker trenger.
Prisen og SEO-risikoen — vær ærlig
To ting nevnes sjelden i samme åndedrag som fordelene, men hører hjemme i beslutningen:
- Kostnaden — et ekte headless-bygg er en større investering enn et tema, både initialt og løpende, fordi funksjoner temaet gir gratis nå skal bygges og vedlikeholdes. Regn med utviklingsressurser over tid, ikke bare frem til lansering.
- SEO-risikoen ved migrering — mange butikker ser et trafikkfall på 3–6 måneder når Google skal crawle om og verdsette nettstedet på nytt, selv når alt er teknisk riktig gjort. Feilaktige canonicals, hreflang, strukturerte data eller sitemaps kan senke rangeringen kraftig.
Det som redder SEO i headless er server-side rendering: både Hydrogen og Next.js rendrer ferdig HTML på serveren, så Google får samme fullstendige side som en vanlig server-rendret butikk. Bygger man en ren klient-app som rendrer i nettleseren først, da blir det problemer. Gjøres det riktig, trenger ikke headless å koste synlighet — men det krever at man planlegger for det fra begynnelsen.
Headless på Shopify er ikke raskere fordi det er headless — det er raskere fordi noen har bygget frontend riktig og kjører den på edge. Teknologien er muligheten, ikke garantien.
Fra vårt eget verksted: Heylinn på Hydrogen
Et konkret eksempel: for det svenske neglelakkvaremerket Heylinn bygger vi en headless storefront på Hydrogen, mot deres Shopify-backend. Det er nettopp en slik situasjon headless er laget for — et merkevaredrevet D2C-selskap som vil ha full kontroll over opplevelsen og prestasjon i front, med Shopify igjen som motor for produkter, kasse og betaling. Vi bygger headless når det løser et virkelig problem og holder oss til tema når det rekker — for Heylinn er det førstnevnte riktig.
Konklusjon og neste steg
Headless på Shopify betyr i praksis Hydrogen, Oxygen og Storefront API — Shopifys egen stack for å bygge en frittstående frontend mot en backend som likevel håndterer det tunge. Det gir frihet og prestasjon for merkevarer med konkrete behov og ressurser til å forvalte det, til prisen av en større investering og en migrering som må gjøres varsomt for SEO-ens skyld. For de fleste butikker rekker et godt tema; for riktig merkevare er headless et løft.
Lurer dere på om headless Shopify er verdt det for dere — eller vil dere ha et ærlig svar på om et tema rekker? Vi bygger netthandel på Shopify siden 2016, headless med Hydrogen når det trengs og tema når det rekker, og hjelper dere gjerne å avgjøre hvilket som gjelder butikken deres.