Headless Shopify med Hydrogen — når frontend skal få frie hender
Headless Shopify innebærer at vi kobler bort temaet og bygger frontend som en egen applikasjon mot Shopifys Storefront API — mens Shopify håndterer kasse, betaling og ordre som vanlig. Med Hydrogen og Oxygen, Shopifys egen React-stack og edge-hosting, går det an å bygge lynraske, helt skreddersydde opplevelser. Vi bygger headless når det løser et virkelig problem — og sier ærlig fra når et velbygd tema rekker lenger.
Hva headless Shopify faktisk er
I en vanlig Shopify-butikk rendres sidene av temaet. Headless betyr at presentasjonslaget løftes ut og bygges som en frittstående frontend som henter produkter, priser og innhold via API, mens Shopify beholder motoren — kasse, betalinger, lager og ordre. Dere bytter altså hodet, ikke hjertet. Gevinsten er total frihet i frontend; prisen er at funksjoner temaet gir gratis nå bygges og forvaltes av oss.
- Frontend som egen applikasjon — ingen tak for design og funksjon
- Shopify igjen som backend for kasse, betaling, lager og ordre
- Samme backend kan mate flere kanaler: web, app, skjermer i butikk
Shopifys headless-stack: Hydrogen, Oxygen og Storefront API
Shopify har en helhetlig vei til headless, og vi bygger på den. Storefront API mater frontend med data. Hydrogen er Shopifys React-rammeverk med ferdige byggeklosser for handlekurv, produktsider og SEO. Oxygen er edge-hostingen som kjører storefronten nær den besøkende på et globalt CDN. Det går an å gå headless også med Next.js mot Storefront API, men for de fleste tilfeller er Hydrogen og Oxygen den smidigste veien — laget for Shopify og for hverandre.
- Storefront API — produkter, priser, handlekurv og kasse via API
- Hydrogen — React-rammeverket for selve storefronten
- Oxygen — edge-hosting på globalt CDN for ytelse
- Alternativ: Next.js mot Storefront API når en konkret grunn finnes
Når headless Shopify lønner seg — og når det ikke gjør det
Vi er ærlige om avveiingen, for headless flytter kompleksitet fra plattformen til bygget. Det lønner seg for etablerte merkevarer — ofte på Plus — med konkrete krav til ytelse, en unik opplevelse temaet ikke takler, eller flere kanaler som skal dele samme backend. Mangler de behovene, blir headless som oftest å betale for fleksibilitet ingen utnytter, år etter år. Da anbefaler vi et velbygd tema i stedet — billigere, enklere og fullt raskt nok.
- Riktig når: ytelse i front, unik forretningskritisk opplevelse, flerkanal
- Riktig når: dere har ressurser til å forvalte en egen frontend over tid
- Feil når: en standardbutikk rekker — da er temaet det klokere valget
Ytelse og SEO — der headless vinner og hvor det er risikabelt
En velbygd headless-frontend på Oxygen når ofte LCP under 1,2 sekunder, mot en median rundt 3 sekunder for vanlige temaer — en virkelig ytelsesgevinst. Men en migrering til headless er følsom for SEO: mange butikker ser et trafikkfall på 3–6 måneder mens Google crawler om siden, og feilaktige canonicals, hreflang, strukturert data eller sitemaps kan senke rankingen. Vi bygger med server-side rendering slik at Google får ferdig HTML, og planlegger redirects, struktur og måling fra start slik at synligheten følger med.
- LCP ofte under 1,2 s på Oxygen mot ~3 s for vanlige temaer
- Server-side rendering slik at Google får fullstendig HTML
- 301-redirects, canonicals, hreflang og strukturert data planlagt fra start
- Måling og Search Console-overvåking gjennom hele migreringen
Vår leveranse — og et pågående eksempel
Vi tar headless-prosjekter fra behovsanalyse og arkitektur til bygg, migrering og drift, med Shopify igjen som motor. Dere får en fast kontaktperson, ryddige avtaler og full eiendomsrett til kode og butikk. Et pågående eksempel fra vårt eget verksted: for det svenske neglelakkmerket Heylinn bygger vi en headless storefront på Hydrogen mot deres Shopify-backend — nettopp en slik merkevaredrevet D2C-situasjon der headless gjør virkelig forskjell. Og som alltid: vi bygger det bare når det løser et virkelig problem.
- Behovsanalyse og arkitektur — er headless i det hele tatt riktig for dere?
- Bygg på Hydrogen og Oxygen, eller Next.js når grunn finnes
- Migrering med bevart SEO-verdi og løpende forvaltning
- Pågående Hydrogen-bygg for merkevaren Heylinn
Før dere bestemmer dere.
- Hva er headless Shopify?
- Headless Shopify innebærer at butikkens frontend bygges som en frittstående applikasjon mot Shopifys Storefront API, mens Shopify beholder kasse, betaling, lager og ordre. Presentasjonslaget — «hodet» — løftes ut og bygges separat, som oftest med Hydrogen, noe som gir full frihet i design og funksjon.
- Hva er Hydrogen og Oxygen?
- Hydrogen er Shopifys React-baserte rammeverk for å bygge headless-storefronts, med ferdige byggeklosser for handlekurv, produktsider og SEO. Oxygen er Shopifys edge-hosting som kjører Hydrogen-storefronten på et globalt CDN nær den besøkende. Sammen er de Shopifys egen, helhetlige vei til headless.
- Trenger vi Shopify Plus for headless?
- Storefront API og Hydrogen lar seg bruke på vanlige Shopify-planer, men headless-prosjekter gjøres i praksis som oftest av Plus-merkevarer — det er der volumet, kravene og ressursene til å forvalte en egen frontend pleier å finnes. Vi vurderer gjerne om det er berettiget for dere.
- Mister vi SEO om vi går headless?
- Ikke om det gjøres riktig. Risikoen finnes ved migrering — mange ser et trafikkfall på 3–6 måneder mens Google vurderer siden om. Vi bygger med server-side rendering slik at Google får ferdig HTML, og planlegger redirects, canonicals og strukturert data fra start slik at rankingen følger med.
Flere tjenester og guider.
Shopify Plus
Shopify Plus-byrå for volum, B2B og internasjonal handel. Checkout-tilpasning, Flow-automatisering og ERP-integrasjon. Bestill en gjennomgang med oss.
Les merShopify-byrå
Lei et sertifisert Shopify-byrå — 150+ prosjekter siden 2016 for blant andre Turtle Wax og Stihl. Slik foregår prosjektet, hva det koster og hvem dere jobber med. Bestill et møte.
Les merShopify B2B
Shopify B2B med company accounts, prislister, fakturabetaling og en B2B-checkout proffkjøpere faktisk bruker. Bestill en behovsanalyse med oss.
Les merNetthandelsplattformer
Markedsoversikt over netthandelsplattformer 2026: Shopify, Magento, WooCommerce, Norce og Centra. Ærlige styrker og svakheter per plattform. Les guiden.
Les merShopify-migreringer
Migrer til Shopify fra WooCommerce, Magento, Norce eller Wikinggruppen. Trygg datamigrering, 301-redirects og bevart ranking. Bestill en gjennomgang.
Les merGuider
Headless på Shopify: Hydrogen, Oxygen og Storefront API
Headless på Shopify betyr oftest Hydrogen og Oxygen — Shopifys egen React-stack mot Storefront API. Vi går gjennom hva den faktisk gir, når den lønner seg for en Shopify- eller Plus-butikk, hva den koster og hvor SEO-risikoene ligger ved en migrering.
Les merHeadless commerce: hva det er og om du trenger det
Headless commerce fremstilles ofte som netthandelens fremtid — men sannheten er at de fleste butikker ikke trenger det. Vi forklarer hva headless faktisk er, veier nytten mot kostnaden og er tydelige på når det er riktig og når det bare er kompleksitet.
Les merFå et forslag på opplegg.
Svar på noen raske spørsmål, så kommer vi tilbake med et tilbud eller et forslag innen én virkedag.
Var befinner ni er idag?
Heller bestille et møte direkte? Kontakt oss.
La oss snakke netthandel.
Fortell kort om prosjektet deres — gratis og uforpliktende. Vi svarer innen én virkedag.