Shopify Headless Commerce: Ghidul complet pentru 2024

Te gândești să investești în Shopify comerț fără cap?

Poate că ați auzit termenul „comerț fără cap” și v-ați întrebat despre ce era vorba.

Sau poate ați descoperit nevoia de mai multă flexibilitate cu cele existente Shopify stoca.

Îmbrățișând capacitățile fără cap disponibile pe Shopify poate fi o modalitate excelentă de a vă actualiza magazinul online.

dar este comerțul fără cap potrivit pentru tine? și cu ce anume începeți Shopify?

Iată tot ce trebuie să știți despre Shopify propunere fără cap.

Ce vei învăța în acest articol:

• Înțelege ce Shopify Comerțul fără cap este de fapt
• Beneficiile Operației de Shopify Comerț fără cap
• Înțelegeți dacă Shopify Comerț fără cap potrivit pentru afacerea dvs
• Exemple din lumea reală de Shopify Comerț fără cap

Ce este Headless Commerce? Cele elementare

Comerțul fără cap este una dintre tendințele cu cea mai rapidă creștere în peisajul comerțului electronic. Este o abordare a construirea unei experiențe de comerț electronic care separă tehnologia front-end a site-ului dvs (partea orientată către client) din backend (instrumentele pe care le utilizați pentru a vă gestiona magazinul).

Salesforce a descoperit asta în jur 80% dintre companii care nu foloseau arhitectura fără cap aveau de gând să facă acest lucru în următorii doi ani.

De ce?

Pentru că tehnologia headless oferă companiilor libertatea de a construi experiențe unice pentru clienți, care nu sunt posibile pe platformele standard.

Cu comerț fără cap, companiile pot debloca controlul complet al dezvoltării, valorificați stivele de tehnologie componabilă și chiar creați diferite experiențe front-end pentru diferite puncte de contact.

Web-ul, punctul de vânzare, vocea și front-end-urile mobile pot comunica cu un singur backend printr-un nivel API, permițând o experiență omnicanal versatilă.

Ce este Shopify Fără cap?

Shopify Comerț fără cap este soluția de arhitectură fără cap oferită de unul dintre cei mai mari furnizori de platforme de comerț electronic din lume.

Permite utilizatorilor să construiască vitrine pentru web mai rapid cu Hydrogen, Shopifycadrul bazat pe reacții. În plus, include acces la „Oxygen” pentru găzduire globală.

Urmărește videoclipul de prezentare generală a hidrogenului:

Când mergi fără cap cu Shopify, mențineți toate caracteristicile incredibile ale backend-ului Shopify oferte pentru afaceri si managementul magazinelor.

"Dar daca poti si inlocui Shopifyinterfața lui, cu instrumente noi care alimentează partea cu clienții a magazinului dvs.

Iată cum arată un eșantion de cod ca Store

Aceasta înseamnă că puteți alege să utilizați teme și instrumente de editare complet diferite. Puteți să vă asociați Shopify experts pentru a construi vitrine personalizate și pentru a vă integra sistemul cu instrumentele pe care le utilizați deja, cum ar fi instrumentele de contabilitate sau de colaborare.

Care este Shopify Storefront API?

Unul dintre motive Shopify este atât de atrăgătoare pentru companiile care îmbrățișează arhitectura fără cap, este că platforma este deja construită având în vedere separarea.

Poate găzdui cu ușurință un alt front-end, fără a fi nevoie să vă revizuiți întregul ecosistem și să vă creați o stivă tehnologică.

Shopify alimentează vitrinele fără cap prin „Storefront API”, scris cu GraphQL. Este instrumentul fundamental care deblochează tot potențialul Shopify comerț fără cap.

Această soluție a fost dezvoltată cu scopul de a asigura că furnizorii terți ar fi compatibili cu Shopify platformă. Cu API, „apeluri” fiind realizată între instrumentele dvs. de front-end și backend.

Aceasta înseamnă că cele două straturi ale tehnologiei afacerii tale comerciale pot vorbi între ele, pot partaja date și se pot alinia perfect.

De ce să mergi fără cap cu Shopify?

Conceptul de „comerț electronic fără cap” a devenit din ce în ce mai popular în ultimii ani, pe măsură ce companiile caută modalități de a oferi clienților o experiență uimitoare de utilizator pe toate platformele. Cu toate acestea, construirea unui fără cap Shopify stoca poate fi mai complex decât simpla folosire a setului de instrumente tradițional.

Dacă sunteți în căutarea unei experiențe simple de comerț electronic, Shopify acționează deja ca un ghișeu unic fantastic pentru afaceri. Acesta include o gamă de Shopify integrări de aplicații pentru diferite instrumente și o experiență grozavă de plată personalizabilă.

De asemenea, oferă instrumente pentru SEO și procesarea plăților, gestionarea sofisticată a comenzilor și instrumente de gestionare a stocurilor.

Cu toate acestea, ca orice platformă monolitică de comerț electronic, Shopify se poate simți puțin restrictiv pe măsură ce afacerea dvs. începe să crească.

Migrarea către un fără cap Shopify magazin vă permite să păstrați mai mult control asupra modului în care interacționați cu clienții dvs. în diferite peisaje.

Poate contribui la timpi de încărcare a paginilor extrem de rapid, la experiențe intuitive în aplicațiile mobile și vă oferă un sistem de gestionare a conținutului complet flexibil și o structură URL.

Pro și contra de Shopify Comerț fără cap

Pentru întreprinderile mici, păstrarea Shopify conexiunea backend și frontend are, de obicei, cel mai logic. Este mai ieftin și mai ușor decât adoptarea unei abordări fără cap și beneficiezi în continuare de toate funcționalitățile de care ai nevoie pentru a conduce un magazin de succes.

Totuși, dacă cauți scalabilitate și opțiuni de personalizare mai avansate, fără cap Shopify poate fi alegerea potrivită.

Să subliniem principalele argumente pro și contra Shopify comerț fără cap.

Pro

• Mai mult control: O arhitectură fără cap vă oferă mai mult control asupra „stratului de prezentare” al magazinului dvs. online și experiențelor utilizatorilor. In timp ce Shopify are câteva teme grozave și opțiuni de stil din care să alegeți, instrumentele fără cap vă oferă mai multă libertate. Veți avea mai mult potențial de a vă diferenția magazinul de concurență.
• scalabilitate: Comerțul fără cap este în mod inerent scalabil. Dacă construiți o afacere internațională sau doriți să creați diverse linii de produse și mărci, arhitectura fără cap poate fi incredibil de utilă. Puteți reproiecta fluxurile de lucru și gestionați conținutul la scară, creând experiențe unice pentru toate segmentele dvs. de public.
• Viteza și performanța site-ului: Studiile arată în mod constant că site-urile web cu încărcare mai rapidă generează mai multe vânzări, mai ales pe mobil. Cu cât vă personalizați mai mult Shopify stocați cu aplicații și cod, cu atât îl îngreunați mai mult. Deplasarea fără cap înseamnă că sunteți liber să utilizați metode de livrare frontend mai rapide, îmbunătățind rata de conversie.
• SEO îmbunătățit: O structură fără cap vă oferă, de asemenea, mai mult control asupra adreselor URL. Aceste adrese URL pot juca un rol semnificativ în clasamentul și vizibilitatea motoarele de căutare. In timp ce Shopify este destul de inflexibil când vine vorba de modificarea URL, o arhitectură fără cap înseamnă că puteți controla fiecare parte a structurii URL.
• Timp mai rapid de introducere pe piață: 77% dintre companii folosind arhitectura fără cap spun că le oferă mai multă agilitate. Cu o strategie fără cap, puteți experimenta aspectul site-ului dvs. și alți factori fără a influența procesele backend. Aceasta înseamnă că puteți face modificări mult mai rapid. De asemenea, obțineți un control precis asupra aspectului și aspectului designului site-ului dvs.

contra

• Probleme cu aplicațiile: Când încetați să utilizați Shopifyinstrumentelor încorporate, unele dintre aplicațiile dvs. pot înceta să funcționeze. Cu toate acestea, dacă alegeți o platformă frontend cuprinzătoare, acestea ar trebui să vă ofere mai multe integrări din care puteți alege pentru a vă păstra fluxurile de lucru.
• Complexitate: În timp ce oricine poate configura un tradițional Shopify magazin cu efort minim, crearea unui magazin fără cap este mai complexă. Va trebui să lucrați cu cineva care înțelege API-ul GraphQL și este posibil să aveți nevoie de resurse de dezvoltare.
• Pierderea temelor: Cu un fără cap Shopify magazin pe care nu vă veți putea baza pe toate temele standard pre-construite oferite de Shopify. Desigur, acesta poate fi și un lucru bun, deoarece înseamnă că puteți crea o temă complet unică pentru afacerea dvs.
• Dependența de dezvoltatori: Un tradițional Shopify magazinul este ușor de creat, întreținut și actualizat, chiar dacă nu aveți cunoștințe de dezvoltator. Cu toate acestea, cu un magazin fără cap, aveți nevoie de mult mai mult ajutor tehnic. Va trebui să lucrați cu experți destul de des.
• Pretul biletului: Magazinele fără cap sunt în general mai scumpe de creat, gestionat și administrat decât magazinele tradiționale. Acest lucru se datorează faptului că plătiți mai mult pentru expertiza dezvoltatorilor, sistemele terțe și ajutorul echipelor de întreținere.

Shopify Exemple fără cap pentru inspirație

Dacă te întrebi ce poți realiza cu un fără cap Shopify magazin, există o mulțime de exemple grozave de verificat. Unele dintre cele mai mari mărci din lume, inclusiv Allbirds și Staples Canada, folosesc ShopifyArhitectura fără cap a lui.

Iată doar câteva dintre exemplele noastre preferate de utilizare a site-urilor web ShopifyArhitectura fără cap a lui:

Feedul

The Feed, o companie cunoscută pentru vânzarea de suplimente nutriționale și produse de creștere a performanței, a adoptat comerțul fără cap în urmă cu mai bine de 3 ani.

Deși inițial partenerii de la „TheFeed.com” au fost puțin sceptici cu privire la beneficiile comerțului fără cap, au văzut rapid rezultate când au început să ruleze teste.

echipa găsită versiunea fără cap a magazinului lor a avut rezultate foarte bune mai bun decât „Lichidul” versiunea de rulare, crescând ratele de conversie cu aproximativ 5.24%. În plus, au înregistrat și o creștere cu 10.28% a veniturilor per client.

JB Hi-Fi

Unul dintre cei mai mari comercianți de divertisment acasă din Australia, JB Hi-Fi știe cât de important este să oferim clienților experiențe excepționale. În 2018, compania a abordat Shopify caută o modalitate de a-și extinde magazinul și de a îmbunătăți performanța în perioada sărbătorilor.

Brandul avea nevoie de o modalitate de a se asigura că poate oferi timpi de încărcare în mod constant rapid și poate gestiona un volum de trafic în continuă evoluție.

Soluția fără cap oferită de Shopify a împuternicit compania să atingă aceste obiective. În plus, compania folosește conexiunile API în timp real pentru a verifica rapid disponibilitatea stocurilor în toate magazinele online și în persoană.

nomad

Marca modernă de accesorii pentru stilul de viață, nomad, au decis că au nevoie de o nouă modalitate de a-și diferenția compania de concurenții din spațiul comerțului electronic. Îmbrățișând pe Shopify soluție fără cap, echipa combinată Shopifysetul de instrumente backend al lui cu sistemul frontal al lui Shogun.

Decuplarea tehnologiilor backend și frontend a însemnat ca Nomad să simplifice procesul de proiectare și gestionare a paginii de produs și să lanseze noi campanii de marketing mult mai rapid.

Conversația cu un site fără cap a însemnat, de asemenea, că Nomad ar putea îmbunătăți viteza generală a site-ului și ar putea accesa integrări mai simple cu aplicații terțe.

Oneblade

Un brand inovator de aparat de ras, Oneblade se diferențiază de concurenții din industrie, oferind clienților control complet asupra experienței lor de cumpărare. Cumpărătorii au acces la o gamă largă de opțiuni de cumpărare personalizabile, pentru a se asigura că obțin întotdeauna rezultatele dorite.

Din păcate, oferirea de opțiuni de cumpărare personalizabile ar fi fost dificilă cu standardul Shopify ecosistem.

De aceea OneBlade a decis să folosească în schimb arhitectura fără cap. Implementarea unei strategii fără cap a însemnat ca OneBlade să aibă acces la flexibilitatea de care avea nevoie pentru a oferi clienților o experiență de cumpărare cu adevărat unică.

Allbirds

Una dintre cele mai populare mărci de comerț electronic de îmbrăcăminte pentru a profita de Shopify platformă, Allbirds are o reputație fantastică în rândul cumpărătorilor. Au folosit Shopifytehnologia lui pentru a-și alimenta afacerea din prima zi. Cu toate acestea, când traficul companiei a început să crească, au trebuit să găsească o modalitate de a personaliza experiențele utilizatorilor fără a compromite performanța.

Echipa a decis să testeze o arhitectură fără cap pentru a crea un site web mai rapid și mai flexibil. Echipa a folosit hidrogenul bazat pe JSreact Shopify cadru pentru a crea o vitrină personalizată și continuă să folosească versiunea implicită Shopify backend pentru magazinul său.

Victoria Beckham Frumusețe

Un alt exemplu de brand extrem de cunoscut cu o arhitectură comercială fără cap, Victoria Beckham Frumusețe pîrghii Shopifycapabilitățile backend ale lui, alături de sistemul de gestionare a conținutului fără cap Contentful.

CMS-ul flexibil oferă echipei un model de conținut extrem de personalizabil cu care să lucreze, alături de acces la API-urile de conținut de producție.

Arhitectura fără cap și aplicațiile personalizate disponibile magazinului „VB Beauty” au permis echipei să creeze o experiență extrem de unică pentru clienți.

Fiecare pas de la selecția produselor la comanda și plăți poate fi acum adaptat nevoilor fiecărui vizitator.

Cele 3 moduri de a construi un fără cap Shopify Magazin

1. Utilizați traseul DIY
2. Partener cu o agenție
3. Utilizare

Dacă decideți că o arhitectură fără cap este alegerea potrivită pentru dvs Shopify magazin, există câteva moduri diferite în care vă puteți aduce strategia la viață. Opțiunea potrivită pentru dvs. va depinde de o serie de factori, cum ar fi bugetul dvs. și cunoștințele dvs. de dezvoltator.

1. Traseul DIY

Una dintre cele mai comune moduri de a implementa headless Shopify arhitectura este să construiești totul de la zero.

Shopify are propria soluție fără cap, denumită „hidrogen”, construit pe framework-ul React.js. Are o structură modulară și o viteză excelentă a dezvoltatorului, plus că vine cu un șablon de pornire convenabil, care este grozav pentru începători.

Cea mai mare problemă cu această metodă este că va trebui să lucrați cu dezvoltatorii în mod constant pentru a crea, optimiza și gestiona front-end-ul magazinului dvs.

E nici un constructor drag-and-drop aici. Totul este creat cu cod și nu există opțiuni de previzualizare în timp real a magazinului. De asemenea, va trebui să vă asigurați că alegeți CMS-ul potrivit pentru a-l integra cu magazinul dvs.

2. Parteneriat cu o agenție

Dacă nu aveți abilitățile și resursele de dezvoltator de care aveți nevoie în interior pentru a utiliza o arhitectură fără cap, parteneriatul cu o agenție ar putea fi următoarea cea mai bună opțiune.

O agenție cu experiență vă poate ajuta să profitați de libertatea pe care o obțineți cu un model fără cap, oferind în același timp expertiza tehnică crucială de care aveți nevoie. Ei pot ajuta chiar și cu designul și personalizările magazinului.

Cu toate acestea, merită să vă amintiți că va trebui totuși să găsiți agenția potrivită care să vă ajute. Este important să cauți o echipă care are experiență în lucrul cu cadre precum

• React.JS
• tăciuni aprinși
• În continuare.Js
• Gatsby

În plus, este posibil să trebuiască să plătiți suplimentar pentru asistență dacă aveți nevoie de ajutor continuu pentru gestionarea magazinului dvs. după ce soluțiile dvs. de front și backend sunt create.

În acest caz, suntem aici pentru a vă ajuta, vă rugăm să completați acest formular pentru a lua legătura.

3. Utilizați un furnizor de servicii front-end

O altă opțiune este să lucrezi cu un Furnizor „Frontend-as-a-Service” sau „FEaaS”.. Aceasta este o alegere excelentă pentru mărcile care doresc să rămână fără cap cu efort minim.

Furnizorul potrivit vă va oferi un pachet de soluții software, astfel încât să nu aveți nevoie să proiectați, să cercetați și să construiți singur platforme și API-uri. Puteți accelera în acest fel timpul de comercializare.

În plus, o soluție FEaaS oferă și acces la parteneri și experți care vă pot ajuta să depășiți orice probleme tehnice pe care le puteți întâlni.

Cu toate acestea, lucrul cu una dintre aceste soluții înseamnă că faci compromisuri asupra unui anumit control. Nu veți putea întotdeauna să alegeți toate instrumentele specifice CMS, CDN și middleware pe care doriți să le utilizați.

Cum să construiești un fără cap Shopify Magazin: pas cu pas

• Pasul 1: Efectuați munca de pregătire inițială
• Pasul 2: Alege-ți tehnologia Frontend
• Pasul 3: Investește în educația ta
• Pasul 4: Generați un token de acces
• Pasul 5: Construiește-ți vitrina personalizată

Odată ce ați decis ce strategie veți folosi pentru site-ul dvs. fără cap, va trebui să faceți câțiva pași suplimentari pentru a vă construi și implementa magazinul fără cap. Iată ghidul nostru pas cu pas pentru a vă pune pe drumul cel bun.

Pasul 1: Efectuați munca de pregătire inițială

Dacă porniți de la zero, nu trebuie să vă faceți griji prea mult cu privire la acest pas, deoarece nu migrați niciun fel de date sau informații. Dacă treceți de la un magazin tradițional la o arhitectură fără cap, va trebui să:

• Efectuați un audit rapid de analiză: Identificați valorile din magazinul dvs. existent pe care doriți să le îmbunătățiți, astfel încât să puteți monitoriza impactul pe care îl are noua dvs. arhitectură fără cap.
• Efectuați un audit al aplicației: Aflați ce aplicații utilizați în prezent în magazinul dvs. și dacă va trebui să utilizați un proces de reintegrare.
• Efectuați un audit de conținut: asigurați-vă că aveți o listă cuprinzătoare a întregului conținut pe care doriți să îl migrați în noul magazin.
• Copiați-vă datele: Faceți o copie de rezervă a oricăror date și informații pe care le aveți pe vechiul sistem, pentru a vă asigura că nu pierdeți nimic.

Pasul 2: Alege-ți tehnologia Frontend

Dacă utilizați Shopify pentru magazinul dvs. comercial fără cap, atunci știți deja de unde va veni tehnologia dvs. de backend.

Aveți posibilități nesfârșite când vine vorba de front-end. Aici nu există o strategie universală. Cu toate acestea, este important să vă gândiți cu atenție la abilitățile echipei dvs.

Dacă alegeți să utilizați cod personalizat pentru a vă modifica interfața, atunci veți avea nevoie fie de dezvoltatori interni, fie de agenția potrivită cu care puteți lucra.

În plus, veți avea nevoie de expertiza disponibilă pentru a vă întreține și modifica magazinul în viitor.

Pasul 3: Investește în educația ta

Dacă veți lucra cu o agenție sau o echipă de dezvoltatori la noua arhitectură fără cap, nu trebuie neapărat să deveniți un expert în programare. Cu toate acestea, are sens să înveți cât mai multe despre Shopifystructura fără cap a lui.

Shopify Storefront API folosește limbajul de interogare GraphQL și Shopify oferă diverse resurse pe site-ul său web pentru a vă ajuta să învățați cum să utilizați acest instrument. Cu cât știi mai multe despre asta, cu atât te vei simți mai încrezător.

Pasul 4: Generați un token de acces

Pentru a accesa datele site-ului dvs. folosind ShopifyStorefront API, va trebui să creați o aplicație privată în dvs Shopify magazin și generați un „acces API tokenMatei 22:21.

Pentru a face acest lucru, mergeți la dvs Shopify pagina de administrare și faceți clic pe „Aplicații” urmat de „Gestionați aplicațiile private”.

Apoi, alegeți „Creați o nouă aplicație privată” și introduceți e-mailul și numele aplicației. În secțiunea Storefront API, selectați opțiunea „permite acestei aplicații să acceseze datele din magazin”.

De asemenea, puteți alege ce tipuri de date doriți să acceseze aplicația dvs.

Pasul 5: Construiește-ți vitrina personalizată

Apoi, este timpul să vă construiți vitrina personalizată. S-ar putea să fie nevoie să vă întoarceți echipa de dezvoltare pentru acest lucru sau puteți accesa asistență suplimentară de la Shopify, daca esti abonat la Shopify Plus.

Există câteva exemple de vitrine personalizate disponibil pe GitHub, dar ceea ce puteți realiza va depinde de CMS-ul fără cap pe care îl alegeți și de cunoștințele dvs. de dezvoltator.

Amintiți-vă, cheia succesului este crearea unei experiențe de utilizator incredibile. Nu vă faceți doar magazinul mai atractiv, trecând dincolo de elementele de bază ale mediei Shopify teme.

Experimentați cu totul, de la meniuri, la opțiuni de navigare și comenzi personalizate.

Ar trebui să investești în Shopify Fără cap?

Dacă sunteți o afacere de scalare, utilizați Shopify pentru platforma dvs. de comerț electronic și simțiți că aveți nevoie de mai multă flexibilitate, mergând fără cap cu Shopify ar putea fi solutia ideala.

Folosind toate noile interfețe de programare a aplicațiilor de la Shopify vă va permite să vă extindeți dincolo de elementele de bază, a ceea ce puteți face cu Shopify în față, alegerea propriului mediu frontal.

Cu o arhitectură fără cap, veți avea libertate nelimitată de a crea experiențe unice pentru fiecare client, indiferent dacă vindeți abonamente, servicii sau produse fizice. Și puteți crea medii front-end unice pentru fiecare canal.

Întrebări Frecvente