SHOPIFY HYDROGEN

Shopify, bez uklapanja dizajna u temu.

Zadržavate Shopify-jev commerce engine — proizvode, kupce, porudžbine, plaćanja, checkout. Menja se ono ispred njega: umesto da se vaš biznis uklapa u gotovu temu, prodavnica se dizajnira oko vaših proizvoda, vaših kupaca i načina na koji zaista prodajete.

Shopify Hydrogen developer i eCommerce konsultant. Deset godina vodim eCommerce za brendove, danas gradim headless Shopify prodavnice od početka do kraja.

ISTI ENGINE, DRUGI IZLOG

Shopify i dalje vodi prodaju. Hydrogen vodi iskustvo.

Obična Shopify prodavnica stavlja temu ispred commerce engine-a. Tema odlučuje šta stranica proizvoda sme da sadrži, gde šta sme da stoji i dokle možete da idete pre nego što počnete da se borite s njom.

Headless Shopify razdvaja to dvoje. Shopify nastavlja da radi ono u čemu je dobar: katalog, zalihe, kupci, porudžbine, plaćanja, checkout. Prodavnica postaje zasebna aplikacija, izgrađena na Shopify Hydrogenu, koja sa Shopify-jem razgovara preko njegovih API-ja.

Ništa se ne seli sa Shopify-ja. Prijavljujete se u isti admin. Porudžbine stižu na isti način. Vaš knjigovođa ne vidi razliku.

Oba sistema rade na istom Shopify-ju. Kod standardne Shopify prodavnice lanac je fiksan: Shopify puni temu, a tema je ono što kupac vidi. Sa Shopify Hydrogenom, Shopify dvosmerno razgovara sa svojim API-jima, API-ji dvosmerno sa prodavnicom koju vi posedujete i gradite, i ta prodavnica je ono što kupac vidi.

Standardni Shopify

ShopifyProizvodi · Porudžbine · Checkout
TemaJedan fiksni šablon
Kupac

Tema odlučuje šta je moguće.

Shopify Hydrogen

ShopifyProizvodi · Porudžbine · Checkout
API-ji
Vaša prodavnicaGrađena za vaš katalog
Kupac

Vi odlučujete šta je moguće.

Isti Shopify engine. Mnogo više kontrole nad onim što stoji ispred njega.

ŠTA KONTROLA DONOSI

Custom Shopify prodavnica vredi samo ako menja ono što kupci mogu da urade.

Ovo nisu stavke iz brošure. Svaka je odluka iz prodavnice koju sam gradio — i svaka je bila moguća zato što je front bio naš.

  • Dugme za kupovinu ostaje na ekranu

    Na mobilnom se add-to-cart lepi uz dno stranice proizvoda, pa odluka ne odskroluje dok neko ispod čita detalje.

    Toyland — studija slučaja
  • Personalizacija stoji uz kupovinu

    Veličine, gravura i dugme za kupovinu ostaju zajedno, iznad priče o materijalu. Izbor koji kupac mora da napravi nije odvojen od izbora zbog kog je došao.

    Pansuara — studija slučaja
  • Ulazi koji nisu kolekcije

    Veliki LEGO katalog kupuje se po temi, uzrastu, ceni i broju kockica. To su postale prave putanje: direktorijum tema, kupovina po uzrastu i po ceni, i filteri na svakoj kolekciji.

    Klosslabbet — studija slučaja
  • Druga publika dobija svoju ponudu

    Teak Parcels se prodaje investitorima, ne kupcima. Ima sopstveni landing i sopstveni lead funnel u istoj prodavnici, umesto da bude uguran u stranicu kolekcije.

    Pansuara — studija slučaja
  • Nalog radi više od liste porudžbina

    Korisnički nalog nosi mehaniku preporuka koja isplaćuje pravi store credit umesto kodova za popust, a mejlovi o kreditu i isteku idu kroz Klaviyo flow-ove.

    Pansuara — studija slučaja
  • Jedna taksonomija, svuda iskorišćena

    Odeljenja, teme i likovi, uzrasti i cenovni razredi: jedna struktura iza mega menija, filtera kategorija i prediktivne pretrage — otkrivanje se ponaša isto gde god da krene.

    Toyland — studija slučaja

SHOPIFY API-JI

Troja vrata u Shopify, opisana kao mogućnosti.

Najveći deo headless izrade su integracije Shopify API-ja. Ovim detaljima ne morate da se bavite sami — ali pomaže da znate šta koja vrata omogućavaju.

Jedno Shopify commerce jezgro drži proizvode, kupce, porudžbine i checkout. Iz njega čitaju tri API površine: Storefront API, Customer Account API i Admin API. Sve tri hrane jedno iskustvo prodavnice koje kupac koristi.

Shopify commerce jezgro
  • Proizvodi
  • Kupci
  • Porudžbine
  • Checkout

Storefront API

Sve što kupac pregleda i kupuje.

  • Proizvodi
  • Kolekcije
  • Cene
  • Korpa
  • Checkout

Customer Account API

Sve što se dešava posle porudžbine.

  • Porudžbine
  • Povraćaji
  • Store credit
  • Preporuke

Admin API

Sve na čemu biznis radi iza scene.

  • Katalog
  • Zalihe
  • Automatizacija
  • Metaobjects
Vaše iskustvo prodavniceJedan interfejs · Tri izvora istine
Troja vrata u iste commerce podatke. Svaka otvaraju drugačiju vrstu iskustva.

Storefront API

Sve što je kupcu potrebno da kupi

Proizvodi, kolekcije, cene, dostupnost, korpa, checkout i pretraga. Shopify drži istinu. Vi odlučujete kako je kupci sreću: kako je složena stranica proizvoda, kako se ponaša filtriranje, šta kupac vidi kad veličine nema, kako je predstavljen bundle.

  • Katalog, cene i varijante
  • Korpa do Shopify checkouta
  • Pretraga, filtriranje i sortiranje
  • Dostupnost i stanja zaliha

Customer Account API

Šta se dešava posle kupovine

Nalog nije samo lista porudžbina. Porudžbine, povraćaji, store credit, preporuke, registracije i sačuvani proizvodi mogu da žive na jednom mestu koje kupac zaista želi da otvori. Retencija se ovde dizajnira, a ne dodaje naknadno.

  • Porudžbine, povraćaji i ponovne kupovine
  • Store credit i preporuke
  • Sačuvani proizvodi i liste
  • Registracije i garancije

Admin API

Da se Shopify uklopi u ostatak biznisa

Vrata ka back-officeu. Uvoz kataloga, sinhronizacija zaliha, workflow-ovi koji se okidaju kad se nešto desi, dodatna polja kroz metafields i metaobjects, i veze sa sistemima koje već koristite.

  • Uvoz kataloga i sinhronizacija zaliha
  • Metafields i metaobjects
  • Workflow-ovi vođeni događajima
  • Veze sa ERP, CRM, PIM i 3PL sistemima

IZ DANA U DAN

Custom ne znači teško za održavanje.

“Da li mi treba developer svaki put kad hoću da promenim baner?”

Ne. Šta vaš tim može da menja odlučuje se na početku izrade — i to je jedno od prvih pitanja koje postavljam.

Shopify već čuva strukturiran sadržaj kroz metafields i metaobjects. Moduli početne, vodiči za veličine, česta pitanja, vodiči za kupovinu, promo blokovi i navigacija mogu da se grade iz njih — što znači da se uređuju u Shopify adminu koji vaš tim već koristi.

Ako content tim želi prave draftove, zakazivanje i pregled pre objave, uz Shopify staje headless CMS. To je stvar izbora, ne obaveza — i vredi svog troška samo kad će ga neko zaista koristiti.

  • Moduli početne

    Baneri, redovi, izdvojene kolekcije, sezonski blokovi.

  • Vodiči i podrška

    Vodiči za veličine i kupovinu, česta pitanja, isporuka i povraćaji.

  • Merchandising

    Navigacija, promo blokovi, kampanjske stranice, bedževi.

  • Detalji proizvoda

    Materijali, održavanje, specifikacije i sve ostalo iz metafielda.

OSTATAK BIZNISA

Hydrogen je sloj iskustva nad sistemima koje već koristite.

Prelazak na headless ne znači zamenu vašeg stacka. ERP, PIM, 3PL, CRM, email platforma, recenzije i analitika ostaju gde jesu. Menja se to što prodavnica odlučuje kako se njihovi podaci koriste, umesto da prihvata gde god ih app widget spusti.

Sistemi na kojima biznis već radi — ERP ili PIM, 3PL logistika, CRM, Klaviyo, Judge.me, GA4 i CMS — nastavljaju da razmenjuju podatke sa Shopify-jem tačno kao i danas. Hydrogen stoji ispod Shopify-ja kao sloj iskustva koji se oslanja na sve to, i taj sloj je ono što kupac sreće.

Sistemi na kojima biznis već radi

  • ERP / PIMZalihe i proizvodi
  • 3PLMagacin i isporuka
  • CRMPodaci o kupcima
  • KlaviyoEmail i SMS
  • Judge.meRecenzije
  • GA4Analitika
  • CMSUrednički sadržaj
ShopifyKatalog · Kupci · Porudžbine · Checkout
Hydrogen sloj iskustvaPovezuje svaki sistem iznad · Ne menja nijedan
KupacJedini sloj koji ikada vidi
Hydrogen ne menja commerce ekosistem — postaje sloj iskustva koji ga povezuje.

Recenzije tamo gde se isplate

Podaci o recenzijama iz servisa poput Judge.me vaši su da ih rasporedite: ocena pored cene, recenzije koje pominju veličinu ispod vodiča za veličine, filter samo za one sa fotografijama. A ne jedan blok na dnu stranice zato što se aplikacija tu instalirala.

Događaji u flow koji treba da se pokrene

Kupac uradi nešto što je biznisu važno — konfiguriše proizvod pa ode, iskoristi kredit, prijavi se na listu čekanja. Prodavnica uhvati taj događaj sa kontekstom oko njega, pošalje ga u Klaviyo i pokrene se pravi flow. Mejl može da bude konkretan zato što je prodavnica znala nešto konkretno.

PERFORMANSE

Brzina je arhitektonska odluka, ne plugin.

Neću vam obećati skor. Performanse žive prodavnice zavise od vaših slika, kataloga, third-party skripti i toga koliko marketinga mora da se učita na svakoj stranici. Ono što custom prodavnica daje jeste kontrola nad tri stvari koje o tome odlučuju.

  1. Gde se stranice renderuju

    Renderovanje ide blizu kupca, umesto da čeka krug do jednog origina. Stranice koje mogu da se keširaju — keširaju se; one koje moraju da budu lične — ostaju lične.

  2. Koji kod stiže do kupca

    Tema šalje šta god tema i njene aplikacije šalju. Ovde je svaka skripta na stranici tu zato što je neko odlučio da bude — i može da se ukloni kad prestane da se isplati.

  3. Šta se učitava, i kada

    Cena, prva slika i buy box su ono što je kupcu odmah potrebno. Recenzije, preporuke i praćenje mogu da sačekaju. Taj redosled vi određujete — ne nadate mu se.

Ko god vam garantuje skor pre nego što je video vaš katalog i marketing stack — nagađa.

ISKRENO

Tema je često pravi odgovor.

Tema je verovatno dovoljna kada…

  • Katalog vam je mali i kupuje se listanjem, ne filtriranjem.
  • Standardna stranica proizvoda pokriva sve što prodajete.
  • Na početku ste, i jeftin izlazak na tržište važniji je od svega.
  • Saobraćaj i prihod još ne opravdavaju trošak custom izrade.
  • Tim vam je mali, i poznat admin znači više od kontrole.

Hydrogen se isplati kada…

  • Problem je otkrivanje: velik ili složen katalog sa više pravih ulaza.
  • Stranica proizvoda mora nešto što tema ne ume — konfiguracija, personalizacija, bundlovi, B2B cene.
  • Iz jedne prodavnice služite više publika ili više tržišta.
  • Retencija je bitna: nalozi, store credit, preporuke, pretplate, ponovne porudžbine.
  • Shopify mora da bude u sinhronizaciji sa ERP, PIM, 3PL ili CRM sistemom.
  • Gomila aplikacija već usporava prodavnicu i stalno gradite zaobilaznice.

Neću preporučiti headless samo zato što umem da ga izgradim. Ako tema radi posao, to ću vam i reći. Migracija na Shopify Hydrogen vredi kad za nju postoji komercijalni razlog — i ne pre toga.

KAKO SE GRADI

Prvo komercijalne odluke. Kod na kraju.

  1. 01

    Komercijalne odluke

    Šta prodajete, kome, uz koju maržu, i šta mora da se promeni da bi prodavnica zarađivala više. Pre nego što se bilo šta nacrta.

  2. 02

    UX

    Navigacija, otkrivanje, stranica proizvoda, nalog — specificirani kao stanja, uključujući učitavanje, prazno, bez rezultata i grešku, a ne samo srećan put.

  3. 03

    Arhitektura

    Model podataka, metafields i metaobjects, integracije, i šta se kešira a šta mora da bude lično.

  4. 04

    Izrada

    Hydrogen i TypeScript nad vašim pravim Shopify katalogom, deploy na Oxygen ili Cloudflare.

  5. 05

    QA

    Pravi proizvodi, prave cene, prava stanja zaliha, na pravim uređajima. Checkout testiran od početka do kraja pre nego što ga bilo ko drugi vidi.

  6. 06

    Merenje

    Analitika koja odgovara na komercijalna pitanja, pa sledeći krug izmena na osnovu onoga što kaže.

DOKAZ

Tri Hydrogen izrade, opisane tačno.

PITANJA KOJA DOBIJAM

Pet koja se pojave svaki put.

Da li je Hydrogen skuplji od teme?

Za izradu — da. Tema se kupi i podesi; custom prodavnica se dizajnira i gradi. Održavanje je druga priča: hosting je skroman, a prodavnice često ukinu plaćene aplikacije čiji posao sada radi sama prodavnica. Pitanje je da li dodatni trošak izrade donosi dovoljno prihoda ili ušteđenog vremena da se isplati. Ako ne donosi — recite ne.

Može li moj tim i dalje da menja sadržaj bez developera?

Može. Moduli početne, vodiči za veličine, česta pitanja, vodiči za kupovinu, promo blokovi i navigacija grade se na Shopify metafields i metaobjects poljima, pa se uređuju u Shopify adminu koji vaš tim već zna. Headless CMS se dodaje ako content tim želi draftove, zakazivanje i preglede.

Da li zadržavam Shopify checkout?

Da. Checkout ostaje Shopify-jev, sa vašim platnim provajderima, vašim podešavanjima poreza i isporuke, i Shop Pay-em ako ga koristite. Headless menja prodavnicu ispred checkouta, a ne sam checkout.

Šta biva s mojim aplikacijama?

Zavisi od aplikacije. Sve što radi kroz Shopify API-je — recenzije, email, pretplate, loyalty, pretraga — po pravilu se prenosi, i obično legne bolje jer vi odlučujete gde se njihovi podaci prikazuju. Aplikacije koje rade tako što ubace widget u temu ne prenose se, pa rano prođemo kroz vašu listu i odlučimo šta ostaje, šta se menja, a šta se ionako nije isplaćivalo.

Možete li postojeću prodavnicu da prebacite na Hydrogen?

Mogu — i manje je dramatično nego što zvuči. Proizvodi, kupci, porudžbine i checkout ostaju tačno gde jesu u Shopify-ju; ponovo se gradi prodavnica ispred njih. Migracija na Shopify Hydrogen obično ide u fazama, sa URL strukturom, redirektima i SEO planom pre nego što se bilo šta prebaci.

DA LI JE ZA VAS?

Znaci da bi se custom prodavnica isplatila

  • Imate više proizvoda nego što navigacija pošteno može da podnese.
  • Kupci stalno traže način kupovine koji tema ne može da im pruži.
  • Stranica proizvoda mora da radi nešto za šta nikad nije građena.
  • Plaćate aplikacije koje sve redom dodaju težinu, a nijedna baš ne leži.
  • Katalog ili zalihe žive u drugom sistemu, a sinhronizacija je ručna.
  • Prodajete dvema različitim publikama, a jedna prodavnica ne služi dobro nijednoj.
  • Saobraćaj postoji, konverzija ne.

Ako vam dve-tri od ovih zvuče kao vaša prodavnica, vredi porazgovarati. Ako nijedna — zadržite temu, i to ću vam i reći.

RAZGOVARAJMO O PRODAVNICI