Hogyan kezdj neki a Shopify fejlesztésnek?

Shopify fejlesztést a hivatalos Shopify Dev Docs oldalán érdemes elkezdened, de előbb nevezd meg a feladatot. Egy téma testreszabásához Liquid, HTML, CSS és JavaScript kell. Egy publikus apphoz API-k, autentikáció és backend. A headless storefront pedig már egy önálló frontendprojekt. A Shopify CLI mindhárom irányban segít elindítani a projektet, a Dev Dashboardban pedig az appokat és a tesztboltjaidat kezelheted.

A „Shopify fejlesztés” túl tág kifejezés ahhoz, hogy egyetlen tananyaggal elintézd. Lehet, hogy csak egy termékoldalt alakítanál át, lehet, hogy egyedi szállítási szabályt írj, vagy saját SaaS appot adnál ki az App Store-ba. Ezek ugyanazon a platformon történnek, de teljesen más belépési pontjuk van.

Elsőként válaszd ki, mit akarsz építeni

Ha egy meglévő webshop kinézetéhez vagy működéséhez nyúlsz, akkor a theme fejlesztés a te pályád. A Shopify témák Liquid sablonnyelvet használnak HTML-lel, CSS-sel és JavaScripttel együtt. Ez a legközvetlenebb út, ha termékoldalt, kosárt, kollekciós oldalt, sectiont vagy egyedi blokkot akarsz csinálni.

Ha az elképzelésed több webshopban is használható, saját adminfelületet, külső szolgáltatást vagy új üzleti logikát kér, akkor appban gondolkodj. Az app a saját szervereden futó alkalmazás, amely API-kon keresztül kapcsolódik a Shopify-hoz. Itt jön képbe az autentikáció, a GraphQL Admin API, a webhookok, az App Bridge és gyakran a Polaris felület is.

Headlessre akkor érdemes váltani, ha a teljes storefrontot saját frontenddel építenéd fel. Ez nagyobb szabadságot ad, de jóval több felelősséget is: a teljesítmény, a komponensek, a keresés és a frontend logika már a te projekted része. A Shopify hivatalos headless keretrendszere a Hydrogen, de a Storefront API-t más stackből is elérheted.

Ha ezt csinálnád	Innen indulj	Mit tanulj először?
Webshop kinézetét vagy theme-jét alakítanád	Storefronts / Themes	Liquid, HTML, CSS, JavaScript
Shopify App Store-ba kerülő vagy egyedi appot építenél	Apps	Shopify CLI, GraphQL, auth, webhookok
Saját, teljesen egyedi storefrontot akarsz	Storefronts / Headless	React-alapok, Storefront API, Hydrogen

Ez a döntés a tanulási sorrendedet is megadja. Aki egy theme-ben akar egy blokkot átszabni, annak nem kell előbb OAuth-flow-t tanulnia. Aki appot ír, annak pedig kevés lesz a Liquid, mert a lényegi kód a Shopify-n kívül fog futni.

A Shopify Dev Docs legyen az alap, ne az utolsó megálló

A Shopify Dev Docs azért jó kiindulópont, mert nem csak API-referencia. Külön útvonalat ad appokhoz, storefrontokhoz és a fejlesztői eszközökhöz is. Ha egyáltalán nincs még projekted, itt tudod gyorsan átlátni, milyen felületeket lehet bővíteni: Shopify admin, online store, checkout, customer account, Flow vagy POS.

Appfejlesztésnél a dokumentáció a Shopify CLI-t teszi az első gyakorlati lépéssé. A CLI-vel indítod a projektet, futtatod a fejlesztői környezetet, előnézetet kapsz a változásokról, és innen kerülnek helyre az extensionök is. Először telepítsd a CLI-t, utána már a választott irányhoz tartozó kezdőprojektet hozod létre:

npm i -g @shopify/cli@latest

# Apphoz
shopify app init

# Theme-hez
shopify theme init

# Headless storefronthoz, Hydrogennel
shopify hydrogen init

Az app, a theme és a Hydrogen ugyanazt a CLI-t használja, de nem ugyanazt a projektet generálja. Appnál a Shopify adminhoz kapcsolódó alkalmazási vázat kapsz, theme-nél egy starter theme-et, Hydrogennél pedig egy headless storefront alapját. Ettől még egyik sem kész termék, de a hivatalos struktúrából indulsz. Ez sokkal jobb, mint egy régi GitHub-sablonnal vagy hároméves videóval kezdeni, ahol már a könyvtárak és a konfiguráció nevei sem ugyanazok.

Mire való a Dev Dashboard?

A CLI a gépeden futó munkához kell, a Shopify Dev Dashboard pedig a Shopify-oldali fejlesztői központod. Itt hozhatsz létre és kezelhetsz appokat, állíthatsz be jogosultságokat és credentialöket, valamint elérheted az app logjait és health metricseit. Ha webhookot, Shopify Functiont vagy saját app eventet hibakeresel, ez nem mellékes kényelmi funkció, hanem az egyik első hely, ahol megnézed, mi történt.

Itt kezelheted a development store-okat is. Ezek elkülönített tesztboltok: kipróbálhatod bennük az appot vagy a theme-et úgy, hogy közben nem egy ügyfél élő boltját piszkálod. A Shopify CLI-t közvetlenül összekötheted egy dev store-ral, és a shopify app dev paranccsal telepítés nélkül is előnézheted a változásaidat. Első projektnél ez sokkal nyugodtabb terep, mint egy éles adminban próbálgatni a webhookokat.

Ne az API-val kezdd, hanem a merchant problémájával

Kezdőként könnyű túl korán technológiát választani. „Építek egy Shopify appot Node-ban” jól hangzik, de ettől még nem tudod, hol fog megjelenni, milyen adattal dolgozik, és miért fizetne érte bárki. Előbb fogalmazd meg egy mondatban, mi történik a merchant boltjában a megoldásod hatására.

Például: „A merchant automatikusan címkézni tudja a kockázatos rendeléseket.” Ebből már látszik, hogy rendelésadat kell, valószínűleg webhook is kell, és az adminban érdemes valamilyen beállítási felületet adni. Csak ezután keresd ki a megfelelő API-kat és extension pointokat.

A Shopify app dokumentációja eleve így tagol: külön kezeli az admin, checkout, online store és automatizálási felületeket, a GraphQL-t, a Functions-t, az eseményeket és a webhookokat. Nem kell mindet megtanulnod. Egy első projekthez válassz egyetlen problémát és egyetlen felületet, különben a platform teljes térképe rád borul.

Egy használható első tanulási sorrend

Ha teljesen nulláról indulsz, az alap webes ismereteket nem érdemes átugrani. HTML, CSS, JavaScript, Git és a parancssor minimális használata később minden Shopify-rétegben visszajön. Theme irányban ezután jöhet a Liquid és a Shopify CLI. App irányban a JavaScript vagy TypeScript, a HTTP és a GraphQL után már sokkal érthetőbb lesz az autentikáció és a webhook.

Az első projekted legyen inkább kicsi és végigvihető. Egy saját theme section, egy egyszerű adminos app, egy rendelésre reagáló webhook vagy egy minimális checkout extension többet tanít, mint egy félbehagyott „mindent tudó” app. A docsban keresd meg hozzá a konkrét use case-et, indítsd el a scaffolddal, aztán csak azokat a részeket olvasd el, amelyek a következő lépéshez kellenek.

Ez a platform elég nagy ahhoz, hogy évekig legyen benne új terület. Az első hónapban viszont bőven elég, ha megtanulod felismerni, hogy a feladatod theme, app vagy headless probléma-e. Innentől a Shopify Dev Docs már nem dokumentációs útvesztő, hanem egészen jól használható térkép. Ha pedig most vágsz bele, a következő lépéshez nézd meg a Shopify fejlesztői roadmapet, amely a tanulási sorrendet bontja majd le gyakorlati szintekre.