Shopify Plus PartnerMagento-spesialist
Hopp til innhold

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.

StihlSonaxL'OréalBurtonEivyKevin MurphySkeppshultMinerals by Nordic20graderDellbäckBjelinVoidLivioKDKahlsUSWECamp ScandinaviaBrightFärskvaruhusetMalte GustavssonTell Me MoreSorselestuganStihlSonaxL'OréalBurtonEivyKevin MurphySkeppshultMinerals by Nordic20graderDellbäckBjelinVoidLivioKDKahlsUSWECamp ScandinaviaBrightFärskvaruhusetMalte GustavssonTell Me MoreSorselestugan

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

Levert i skarp drift.

Alle kundecaseEt utvalg — 150+ prosjekter siden 2016

Hva kundene sier.

★★★★★
Sammen med teamet har vi jobbet mot et tydelig mål — å skalere opp og lansere i flere land. Vi har nådd målene våre og er i dag et betydelig mer effektivt og lønnsomt selskap.
CA
Christian Amborg
Daglig leder, Arrak Outdoor
★★★★★
Vi har jobbet med Dahlquist over lengre tid og kan med sikkerhet si at vi ikke kunne vært i bedre hender. Grundige, tar initiativ og stiller alltid opp.
Marketing, Voidcycling.com
Fredrik Gustafsson
Marketing, Voidcycling.com
★★★★★
En virkelig god partner innen netthandel og web! Bygde vår Magento 2 med integrasjon mot ERP-et vårt. Anbefales på det varmeste!
Kevin Murphy
Svante Pettersson
Kevin Murphy
★★★★★
Always helpful and easy to work with. Recommend Dahlquist to build your e-commerce. Love working with them.
CTO, Sonax
Erika Sorum
CTO, Sonax
★★★★★
Dahlquist er en lydhør og ansvarlig partner. Etter hardt felles arbeid er vi nå kostnadseffektive med en digital løsning som støtter forretningsmodellen vår.
Gründer, Dellbäck
Gustav Dellbäck
Gründer, Dellbäck
★★★★★
Vi ønsket et raskt, enkelt og funksjonelt nettsted. At det faktisk fungerer er alfa og omega for oss — vi og forhandlerne våre er svært fornøyde.
CTO, Skeppshultcykeln
Sven
CTO, Skeppshultcykeln
★★★★★
Jeg har leid dem inn for å jobbe med netthandelen til kundene mine, og de leverer eksepsjonelle resultater — innovative strategier og en genuint hands-on holdning.
SG
Shirin Ghanfili
Forretningsutviklingskonsulent
★★★★★
Vi bygde Shopify-en vår med Dahlquist. Høy kompetanse og grundighet, men alle møter er avslappede og hyggelige. Anbefales!
Daglig leder, Utown Media
Johan Johansson
Daglig leder, Utown Media
★★★★★
Dahlquist hjalp oss å digitalisere selskapet, og vi er supernøyde — i dag er vi mer effektive og lønnsomme enn noensinne. Ekstremt høy kompetanse innen IT.
Daglig leder, Skyltkoncept
Magnus Andreasson
Daglig leder, Skyltkoncept

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.

Få et forslag på opplegg.

Svar på noen raske spørsmål, så kommer vi tilbake med et tilbud eller et forslag innen én virkedag.

Steg 1 av 6

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.

Niklas Dahlquist

Niklas Dahlquist · Grunnlegger & daglig leder

Du snakker direkte med en senior partner.

Et kostnadsfritt formøte gir dere:

  • Behovsanalyse — mål, omfang og riktig plattform
  • En realistisk tidsplan for levering i etapper
  • Grunnlag for fast tilbud per etappe — uten forpliktelser
Ring direkte: +46 31-37 62 404
kontakt@dahlquist.se
Strömstadsvägen 48, 451 50 Uddevalla

Kontor i Uddevalla, Sverige — vi leverer prosjekter i hele Norden.

Rangert netthandelsbyrå — les omtalene