Shopify Headless Commerce: Den komplette veiledningen for 2024

Vurderer du å investere i Shopify hodeløs handel?

Kanskje du har hørt begrepet "hodeløs handel" og lurt på hva alt oppstyret handlet om.

Eller kanskje du har oppdaget et behov for mer fleksibilitet med dine eksisterende Shopify oppbevare.

Omfavner de hodeløse egenskapene som er tilgjengelige på Shopify kan være en utmerket måte å oppgradere nettbutikken din på.

Men er hodeløs handel riktig for deg? og nøyaktig hvordan kommer du i gang med Shopify?

Her er alt du trenger å vite om Shopify hodeløst forslag.

Hva du lærer i denne artikkelen:

• Forstå hva Shopify Hodeløs handel er faktisk
• fordeler med Shopify Hodeløs handel
• Forstå hvis Shopify Hodeløs handel rett for bedriften din
• Eksempler fra den virkelige verden Shopify Hodeløs handel

Hva er hodeløs handel? Det grunnleggende

Hodeløs handel er en av de raskest voksende trendene i e-handelslandskapet. Det er en tilnærming til bygge en e-handelsopplevelse som skiller front-end-teknologien til nettstedet ditt (den kundevendte delen) fra backend (verktøyene du bruker for å drive butikken din).

Salesforce fant det rundt 80% av selskapene som ikke brukte hodeløs arkitektur planla å gjøre det i løpet av de neste to årene.

Hvorfor?

Fordi hodeløs teknologi gir bedrifter friheten til å bygge unike kundeopplevelser som ikke er mulig på standardplattformer.

Med hodeløs handel, selskaper kan låse opp fullstendig utviklingskontroll, dra nytte av komponerbare teknologistabler, og til og med skape forskjellige frontend-opplevelser for forskjellige berøringspunkter.

Nett-, salgs-, tale- og mobilgrensesnittene dine kan alle snakke med én enkelt backend gjennom et API-nivå, noe som gir en allsidig omnikanalopplevelse.

Hva er Shopify Hodeløs?

Shopify Hodeløs handel er den hodeløse arkitekturløsningen som tilbys av en av verdens største leverandører av e-handelsplattformer.

Det lar brukere bygge butikkfronter for nettet raskere med Hydrogen, Shopifysitt reaksjonsbaserte rammeverk. I tillegg inkluderer den tilgang til "Oxygen" for global hosting.

Se hydrogenoversiktsvideoen:

Når du går hodeløs med Shopify, opprettholder du alle de utrolige backend-funksjonene Shopify tilbud til bedrift og butikkdrift.

Imidlertid du kan også bytte ut Shopifysin frontend, med nye verktøy som driver den kundevendte siden av butikken din.

Slik ser et kodeeksempel ut Store

Dette betyr at du kan velge å bruke helt andre temaer og temaredigeringsverktøy. Du kan samarbeide med Shopify experts å bygge tilpassede butikkfronter, og integrere systemet med verktøyene du allerede bruker, for eksempel regnskap eller samarbeidsverktøy.

Hva er den Shopify Storefront API?

En av grunnene Shopify er så attraktivt for selskaper som omfavner hodeløs arkitektur, er at plattformen allerede er bygget med tanke på separasjon.

Den kan enkelt romme en annen frontend, uten at du trenger å overhale hele økosystemet ditt og lage en teknologistabel selv.

Shopify driver hodeløse butikkfronter gjennom sin "Storefront API", skrevet med GraphQL. Det er det grunnleggende verktøyet som låser opp alt potensialet til Shopify hodeløs handel.

Denne løsningen ble utviklet med det formål å sikre at tredjepartsleverandører ville være kompatible med Shopify plattform. Med API, "anrop" lages mellom frontend- og backendverktøyene dine.

Dette betyr at de to lagene i forretningsteknologien din kan snakke med hverandre, dele data og justere sømløst.

Hvorfor gå hodeløs med Shopify?

Begrepet «hodeløs e-handel” har blitt stadig mer populær de siste årene, ettersom selskaper ser etter måter å levere en fantastisk brukeropplevelse til kunder på tvers av alle plattformer. Men å bygge en hodeløs Shopify oppbevare kan være mer komplisert enn å bare bruke det tradisjonelle verktøysettet.

Hvis du leter etter en enkel e-handelsopplevelse, Shopify fungerer allerede som en fantastisk one-stop-shop for bedrifter. Den inkluderer en rekke Shopify app-integrasjoner for forskjellige verktøy, og en flott tilpassbar betalingsopplevelse.

Den har også verktøy for SEO og betalingsbehandling, sofistikert ordreadministrasjon og lagerstyringsverktøy.

Men som enhver monolitisk e-handelsplattform, Shopify kan føles litt begrensende når virksomheten din begynner å vokse.

Migrerer til en hodeløs Shopify Store lar deg opprettholde mer kontroll over hvordan du samhandler med kundene dine på tvers av ulike landskap.

Det kan bidra til lynraske sideinnlastingstider, intuitive opplevelser på mobilapper, og det gir deg et fullt fleksibelt innholdsstyringssystem og URL-struktur.

Fordeler og ulemper med Shopify Hodeløs handel

For små bedrifter, holde Shopify backend og frontend-tilkobling gir vanligvis mest mening. Det er billigere og enklere enn å ha en hodeløs tilnærming, og du får fortsatt all funksjonaliteten du trenger for å drive en vellykket butikk.

Men hvis du leter etter skalerbarhet og mer avanserte tilpasningsmuligheter, hodeløs Shopify kan være det riktige valget.

La oss skissere de viktigste fordelene og ulempene ved Shopify hodeløs handel.

Proffene

• Mer kontroll: En hodeløs arkitektur gir deg mer kontroll over "presentasjonslaget" til nettbutikken og brukeropplevelsene. Samtidig som Shopify har noen flotte temaer og stylingsalternativer å velge mellom, hodeløse verktøy gir deg mer frihet. Du vil ha mer potensial til å skille butikken din fra konkurrentene.
• skalerbarhet: Hodeløs handel er i seg selv skalerbar. Hvis du bygger en internasjonal virksomhet, eller ønsker å lage ulike produktlinjer og merkevarer, kan hodeløs arkitektur være utrolig nyttig. Du kan redesigne arbeidsflyter og administrere innhold i stor skala, og skape unike opplevelser for alle målgruppene dine.
• Nettstedets hastighet og ytelse: Studier viser hele tiden at raskere lasting av nettsteder genererer mer salg, spesielt på mobil. Jo mer du tilpasser din Shopify lagre med apper og kode, jo mer tynger du det. Å bli hodeløs betyr at du står fritt til å bruke raskere frontend-leveringsmetoder, noe som forbedrer konverteringsfrekvensen.
• Forbedret SEO: En hodeløs struktur gir deg også mer kontroll over nettadressene dine. Disse nettadressene kan spille en betydelig rolle i søkemotorrangering og synlighet. Samtidig som Shopify er ganske lite fleksibel når det kommer til URL-modifisering, betyr en hodeløs arkitektur at du kan kontrollere alle deler av URL-strukturen din.
• Raskere tid til markedsføring: 77% av selskapene ved å bruke hodeløs arkitektur sier det at det gir dem mer smidighet. Med en hodeløs strategi kan du eksperimentere med nettstedets layout og andre faktorer uten å påvirke backend-prosesser. Dette betyr at du kan gjøre endringer mye raskere. Du får også presis kontroll over utseendet og følelsen av nettstedets design.

Cons

• Problemer med apper: Når du slutter å bruke Shopifysine innebygde verktøy, kan noen av appene dine slutte å fungere. Men hvis du velger en omfattende frontend-plattform, bør de gi deg flere integrasjoner du kan velge mellom for å bevare arbeidsflytene dine.
• kompleksitet: Mens hvem som helst kan sette opp en tradisjonell Shopify butikk med minimal innsats, er det mer komplekst å lage en butikk uten hode. Du må jobbe med noen som forstår GraphQL API, og du kan trenge utviklingsressurser.
• Tap av temaer: Med en hodeløs Shopify butikk vil du ikke kunne stole på alle standard forhåndsbygde temaer levert av Shopify. Selvfølgelig kan dette også være en god ting, siden det betyr at du kan lage et tema som er helt unikt for virksomheten din.
• Avhengighet av utviklere: En tradisjonell Shopify store er enkel å opprette, vedlikeholde og oppdatere, selv om du ikke har utviklerkunnskap. Men med en hodeløs butikk trenger du mye mer teknisk hjelp. Du må jobbe med eksperter ganske ofte.
• Kostnad: Hodeløse butikker er generelt dyrere å opprette, administrere og drive enn tradisjonelle butikker. Det er fordi du betaler mer for utviklerekspertise, tredjepartssystemer og hjelp fra vedlikeholdsteam.

Shopify Hodeløse eksempler for inspirasjon

Hvis du lurer på hva du faktisk kan få til med en hodeløs Shopify butikken, er det mange gode eksempler der ute å sjekke ut. Bruk av noen av verdens største merker, inkludert Allbirds og Staples Canada Shopifysin hodeløse arkitektur.

Her er bare noen av våre favoritteksempler på nettsidebruk Shopifysin hodeløse arkitektur:

Fôret

The Feed, et selskap kjent for å selge kosttilskudd og ytelsesfremmende produkter, tok i bruk hodeløs handel for mer enn 3 år siden.

Selv om partnerne på "TheFeed.com" var litt skeptiske til fordelene med hodeløs handel i utgangspunktet, så de raskt resultater da de begynte å kjøre tester.

De team funnet den hodeløse versjonen av butikken deres presterte mye bedre enn "Væske" kjøre versjonen, øker konverteringsfrekvensen med rundt 5.24 %. I tillegg oppnådde de også en økning på 10.28 % i inntekt per kunde.

JB Hi-Fi

En av Australias største forhandlere av hjemmeunderholdning, JB Hi-Fi vet hvor viktig det er å levere eksepsjonelle kundeopplevelser. I 2018 henvendte selskapet seg Shopify ser etter en måte å skalere butikken sin og forbedre ytelsen i løpet av høytiden.

Merket trengte en måte å sikre at det kunne levere konsekvent raske lastetider og håndtere et stadig voksende trafikkvolum.

Den hodeløse løsningen som tilbys av Shopify styrket selskapet til å nå disse målene. I tillegg bruker selskapet sanntids API-tilkoblinger for raskt å sjekke lagertilgjengelighet på tvers av alle nettbutikker og fysiske butikker.

Nomad

Moderne livsstilstilbehør merke, Nomade, bestemte at de trengte en ny måte å skille selskapet fra konkurrentene på e-handelsområdet. Omfavner Shopify hodeløs løsning, laget sammen Shopify's backend-verktøysett med Shoguns frontend-system.

Å koble fra backend- og frontend-teknologiene betydde at Nomad kunne forenkle sin produktsidedesign og administrasjonsprosess, og lansere nye markedsføringskampanjer mye raskere.

Samtalen til et hodeløst nettsted betydde også at Nomad kunne forbedre den generelle nettstedhastigheten og få tilgang til enklere integrasjoner med tredjepartsapper.

Oneblade

Et innovativt barberhøvelmerke, Oneblade skiller seg fra konkurrentene i bransjen ved å gi kundene full kontroll over deres kjøpsopplevelse. Kjøpere har tilgang til en rekke tilpassbare kjøpsalternativer, for å sikre at de alltid får de resultatene de ønsker.

Dessverre ville det vært vanskelig å tilby tilpassede kjøpsalternativer med standarden Shopify økosystem.

Derfor OneBlade bestemte seg for å bruke hodeløs arkitektur i stedet. Implementering av en hodeløs strategi betydde at OneBlade kunne få tilgang til fleksibiliteten de trengte for å tilby kundene en virkelig unik kjøpsopplevelse.

Allbirds

Et av de mest populære e-handelsmerkene for klær å utnytte Shopify plattform, Allbirds har et fantastisk rykte blant shoppere. De har brukt Shopifysin teknologi for å drive virksomheten deres fra dag én. Men da selskapets trafikk begynte å øke, måtte de finne en måte å tilpasse brukeropplevelsene uten å gå på kompromiss med ytelsen.

Teamet bestemte seg for å teste en hodeløs arkitektur for å lage en raskere og mer fleksibel nettside. Teamet brukte det JSreact-baserte Hydrogen Shopify rammeverk for å lage en tilpasset butikkfront, og fortsetter å bruke standarden Shopify backend for sin butikk.

Victoria Beckham Skjønnhet

Et annet eksempel på et ekstremt kjent merke med en hodeløs handelsarkitektur, Victoria Beckham Skjønnhet utnytter Shopify's backend-funksjoner sammen med Contentful hodeløse innholdsstyringssystem.

Det fleksible CMS gir teamet en svært tilpassbar innholdsmodell å jobbe med, sammen med tilgang til produksjonsinnholds-APIer.

Den hodeløse arkitekturen og tilpassede appene som er tilgjengelige for "VB Beauty"-butikken, gjorde det mulig for teamet å skape en svært unik opplevelse for kundene.

Hvert trinn fra produktvalg til bestilling og betaling kan nå skreddersys til hver enkelt besøkendes behov.

De 3 måtene å bygge en hodeløs Shopify Butikk

1. Bruk DIY-ruten
2. Samarbeid med et byrå
3. Bruk

Hvis du bestemmer deg for at en hodeløs arkitektur er det riktige valget for deg Shopify butikken, er det noen forskjellige måter du kan bringe strategien din ut i livet. Det riktige alternativet for deg vil avhenge av en rekke faktorer, for eksempel budsjettet ditt og utviklerkunnskapen din.

1. Gjør-det-selv-ruten

En av de vanligste måtene å implementere hodeløst på Shopify arkitektur er å bygge alt fra bunnen av.

Shopify har sin egen hodeløs løsning, kalt "hydrogen", bygget på React.js-rammeverket. Den har en modulær struktur og utmerket utviklerhastighet, pluss at den kommer med en praktisk startmal, som er flott for nybegynnere.

Det største problemet med denne metoden er at du må jobbe med utviklere hele tiden for å lage, optimalisere og administrere frontenden av butikken din.

Det er ingen dra-og-slipp-bygger her. Alt er opprettet med kodeog det er ingen forhåndsvisningsalternativer for butikk i sanntid. Du må også sørge for at du velger riktig CMS for å integrere med butikken din.

2. Samarbeid med et byrå

Hvis du ikke har ferdighetene og utviklerressursene du trenger internt for å utnytte en hodeløs arkitektur, kan samarbeid med et byrå være det nest beste alternativet.

Et erfarent byrå kan hjelpe deg å dra nytte av friheten du får med en hodeløs modell, samtidig som du leverer den avgjørende tekniske ekspertisen du trenger. De kan til og med hjelpe med butikkdesign og tilpasninger.

Det er imidlertid verdt å huske at du fortsatt må finne det rette byrået for å hjelpe deg. Det er viktig å se etter et team som har erfaring med å jobbe med rammer som

• React.JS
• Ember
• Next.Js
• Gatsby

I tillegg kan det hende du må betale ekstra for støtte hvis du trenger kontinuerlig hjelp med å administrere butikken din etter at front- og backend-løsningene dine er opprettet.

I dette tilfellet er vi her for å hjelpe, vennligst fyll ut dette skjemaet for å komme i kontakt.

3. Bruk en grensesnitttjenesteleverandør

Et annet alternativ er å jobbe med en «Frontend-as-a-Service»- eller «FEaaS»-leverandør. Dette er et godt valg for merker som ønsker å gå uten hode med minimal innsats.

Den rette leverandøren vil gi deg en pakke med programvareløsninger, slik at du ikke trenger å designe, undersøke og bygge plattformer og APIer selv. Du kan potensielt øke tiden din til å markedsføre på denne måten.

I tillegg kommer en FEaaS-løsning med tilgang til partnere og eksperter som kan hjelpe deg med å overvinne eventuelle tekniske problemer du måtte støte på.

Å jobbe med en av disse løsningene betyr imidlertid at du går på akkord med en viss mengde kontroll. Du vil ikke alltid kunne velge alle de spesifikke CMS-, CDN- og mellomvareverktøyene du vil bruke.

Hvordan bygge en hodeløs Shopify Butikk: trinn for trinn

• Trinn 1: Gjør det første forberedelsesarbeidet
• Trinn 2: Velg din frontend-teknologi
• Trinn 3: Invester i utdanningen din
• Trinn 4: Generer et tilgangstoken
• Trinn 5: Bygg din egendefinerte butikkfront

Når du har bestemt deg for hvilken strategi du skal bruke for ditt hodeløse nettsted, er det noen ekstra trinn du må ta for å bygge og implementere din hodeløse butikk. Her er vår trinnvise guide for å få deg på rett spor.

Trinn 1: Gjør det første forberedelsesarbeidet

Hvis du starter fra bunnen av, trenger du ikke bekymre deg for mye om dette trinnet, siden du ikke overfører data eller informasjon. Hvis du går fra en tradisjonell butikk til en hodeløs arkitektur, må du:

• Gjør en rask analyserevisjon: Identifiser beregningene fra den eksisterende butikken du ønsker å forbedre, slik at du kan overvåke virkningen din nye hodeløse arkitektur har.
• Utfør en apprevisjon: Finn ut hvilke apper du for øyeblikket bruker i butikken din, og om du trenger å utnytte en re-integreringsprosess.
• Gjennomfør en innholdsrevisjon: Sørg for at du har en omfattende liste over alt innholdet du vil migrere til den nye butikken din.
• Sikkerhetskopier dataene dine: Sikkerhetskopier alle data og informasjon du har på det gamle systemet ditt, for å sikre at du ikke mister noe.

Trinn 2: Velg din frontend-teknologi

Hvis du bruker Shopify for din hodeløse handelsbutikk, så vet du allerede hvor backend-teknologien din kommer fra.

Du har uendelige muligheter når det gjelder frontend. Det er ingen strategi som passer for alle her. Det er imidlertid viktig å tenke nøye over lagets ferdigheter.

Hvis du velger å bruke egendefinert kode for å endre grensesnittet ditt, trenger du enten utviklere i huset, eller det riktige byrået du kan jobbe med.

I tillegg trenger du ekspertisen for å vedlikeholde og endre butikken din fremover.

Trinn 3: Invester i utdanningen din

Hvis du skal jobbe med et byrå eller team av utviklere på din nye hodeløse arkitektur, trenger du ikke nødvendigvis å bli en programmeringsekspert. Imidlertid er det fornuftig å lære så mye du kan om Shopifysin hodeløse struktur.

De Shopify Storefront API bruker GraphQL spørringsspråk, og Shopify tilbyr ulike ressurser på nettstedet sitt for å hjelpe deg å lære hvordan du kan utnytte dette verktøyet. Jo mer du vet om det, jo mer selvsikker vil du føle deg.

Trinn 4: Generer et tilgangstoken

For å få tilgang til nettstedets data ved å bruke Shopify's Storefront API, må du opprette en privat app i din Shopify butikk og generere en "API-tilgang token".

For å gjøre dette, gå til din Shopify admin-siden, og klikk på "Apper" etterfulgt av "Administrer private apper".

Velg deretter "Opprett ny privat app", og skriv inn e-post og appnavn. I Storefront API-delen velger du alternativet for å "la denne appen tilgang til butikkfrontdata".

Du kan også velge hvilke datatyper du vil at appen din skal få tilgang til.

Trinn 5: Bygg din egendefinerte butikkfront

Deretter er det på tide å bygge din egendefinerte butikkfront. Du må kanskje snu utviklingsteamet ditt for dette, eller du kan potensielt få tilgang til ekstra støtte fra Shopify, hvis du abonnerer på Shopify Plus.

Det er noen tilpassede butikkeksempler tilgjengelig på GitHub, men hva du kan oppnå vil avhenge av det hodeløse CMS-et du velger, og utviklerkunnskapen din.

Husk at nøkkelen til suksess er å skape en utrolig brukeropplevelse. Ikke bare gjør butikken din mer attraktiv ved å gå utover det grunnleggende i gjennomsnittet Shopify temaer.

Eksperimenter med alt fra menyer, til navigasjonsalternativer og tilpassede kasser.

Bør du investere i Shopify Hodeløs?

Hvis du er en skaleringsbedrift, bruker du Shopify for e-handelsplattformen din, og du føler at du trenger mer fleksibilitet, går hodeløs med Shopify kan være den ideelle løsningen.

Utnytte alle de nye app-programmeringsgrensesnittene fra Shopify vil tillate deg å utvide utover det grunnleggende, for hva du kan gjøre med Shopify frontend, velge ditt eget frontmiljø.

Med en hodeløs arkitektur vil du ha ubegrenset frihet til å skape unike opplevelser for hver kunde, uansett om du selger abonnementer, tjenester eller fysiske produkter. Og du kan lage unike front-end-miljøer for hver kanal.

FAQ