Shopify fejlesztői roadmap: mit tanulj meg és milyen sorrendben?

A Shopify fejlesztői roadmap három részből áll: közös platformismeretből, egy választott főirányból és működő referenciaprojektekből. Először értsd meg a Shopify adatmodelljét és fejlesztői eszközeit, utána válassz theme, app vagy headless fókuszt. Tíz hét alatt nem leszel minden réteg szakértője, de eljuthatsz odáig, hogy önállóan építs és tudd, merre érdemes tovább mélyülnöd.

A Shopify könnyen kelti azt az érzést, hogy még egy technológiát gyorsan megtanulsz, aztán kész. Megnézed a Liquid szintaxisát, lefuttatsz egy CLI-parancsot, és már csak az első ügyfél hiányzik. A valóságban a platform több fejlesztői világot rak egymás mellé: a theme a storefront megjelenését kezeli, az app API-kon keresztül bővíti a Shopify-t, a headless pedig saját frontendet tesz a commerce backend elé.

Ha még nem döntötted el, melyik réteg érdekel, előbb olvasd el a hogyan kezdj neki a Shopify fejlesztésnek című bevezetőt. Ez a roadmap már abból indul ki, hogy van használható HTML-, CSS- és JavaScript-alapod, tudsz Gittel dolgozni, és nem a parancssor megnyitása lesz az első technikai feladatod.

Melyik Shopify fejlesztői irányt válaszd?

A főirányt az alapján válaszd, milyen problémákat szeretnél megoldani. A theme fejlesztés közel van a klasszikus frontendhez és az e-kereskedelmi UX-hez. Az appfejlesztés backend-, integrációs és termékfejlesztési feladatokat hoz. A headless irány teljes frontendkontrollt ad, cserébe architektúrát, hostingot, cache-elést és több saját felelősséget is kapsz.

Irány	Tipikus feladat	Fontos technológiák	Jó első projekt
Theme	Termékoldal, section, blokk, theme testreszabás	Liquid, HTML, CSS, JavaScript, JSON schema	Újrafelhasználható termékoldali section
App	Adminfunkció, integráció, automatizálás, checkout-bővítés	TypeScript vagy más backendnyelv, GraphQL, auth, webhookok	Rendeléseket címkéző admin app
Headless	Teljesen egyedi storefront	React, React Router, Storefront API, Hydrogen	Kicsi katalógus kosárral és checkouttal

Nem kell mindháromban ugyanolyan mélyre menned. Egy erős theme fejlesztőnek tudnia kell, mire való egy theme app extension, de nem kell rögtön billinges SaaS appot építenie. Egy appfejlesztőnek értenie kell, hogyan jelenik meg az extension a storefrontban, de nem kell prémium theme-et terveznie. A roadmap célja egy T-alakú tudás: széles platformismeret, mély szakértelem egy választott irányban.

0. hét: rakd rendbe a fejlesztői környezetet

Mielőtt Liquidet vagy GraphQL-t tanulsz, legyen működő Shopify fejlesztői környezeted. Hozz létre Shopify fejlesztői hozzáférést és egy development store-t a Dev Dashboardban, telepítsd a legfrissebb Shopify CLI-t, majd készíts külön Git repositoryt minden gyakorlóprojekthez.

A dev store-ban tölts fel teszttermékeket, hozz létre collectionöket, kedvezményt, szállítási beállítást és tesztrendelést. Kattintsd végig az admint úgy, mintha merchant lennél. Ha nem érted, mit jelent a variant, a market, a fulfillment vagy a metafield az adminban, kódból sem lesz világosabb.

Az első hét előtti ellenőrzőpont egyszerű:

• van működő development store-od tesztadatokkal;
• eléred a Dev Dashboardot;
• fut a Shopify CLI;
• tudsz helyi projektet indítani és Gitbe menteni;
• meg tudod különböztetni a theme, app és headless feladatot.

1–2. hét: értsd meg a Shopify közös alapjait

Az első két hét a platform adatmodelljéről szól. Termék, variant, collection, customer, order, inventory, location, discount, metafield és metaobject: ezekkel minden fejlesztői irányban találkozol. Ne definíciókat magolj, hanem nézd meg, hogyan kapcsolódnak egymáshoz az adminban és az API-kban.

Ezzel párhuzamosan ismerd meg a Shopify verziózási logikáját. Az API-verziók idővel kifutnak, ezért egy működő integráció is igényel karbantartást. Tedd könyvjelzőbe a Developer Changelogot, és szokj hozzá, hogy egy régi tutorial állítását mindig ellenőrzöd a jelenlegi Shopify fejlesztői dokumentációban.

Mini-projektként tervezz meg egy kis niche boltot öt-tíz termékkel. Adj hozzá variánsokat, metafieldeket, collectionöket és egy metaobject-alapú tartalomtípust. Ebben a szakaszban arra figyelj, hogy lásd, milyen adatokból dolgozik majd a theme vagy az app; a látvány ráér később.

3–4. hét: tanuld meg a theme fejlesztés alapjait

A theme fejlesztés jó közös alap akkor is, ha később appot építenél. Itt találkozol először igazán a merchant által szerkeszthető felülettel, a storefront adataival és azokkal a teljesítménykorlátokkal, amelyeket egy rosszul megírt extension is könnyen megérez.

Tanuld meg a Liquid objecteket, tageket és filtereket, majd a theme könyvtárstruktúráját: layout, templates, sections, blocks, snippets, assets, config és locales. Külön figyelj a JSON template-ekre, a section schema felépítésére és arra, hogyan adsz a merchant kezébe szerkeszthető beállításokat. A Shopify theme dokumentációja legyen nyitva munka közben.

Új theme-et 2026-ban a Shopify CLI theme init parancsával érdemes indítani; ez a hivatalos Skeleton startert klónozza. A Dawn továbbra is hasznos referenciakód, de ne egy régi Dawn-fork legyen automatikusan az „ügynökségi startered”. Inkább értsd meg a theme architektúráját, futtasd a helyi előnézetet shopify theme dev paranccsal, és használd a Theme Checket a Liquid- és JSON-hibák kiszűrésére.

A két hét végére építs egy önálló sectiont, például összehasonlító táblát, termékelőny-blokkot vagy kapcsolódó tartalommodult. Legyen reszponzív, billentyűzettel kezelhető, merchant által szerkeszthető és fölösleges JavaScript nélkül is használható. Ez már portfólióképesebb, mint egy teljes theme, amelyben csak színeket és betűtípusokat cseréltél.

5–7. hét: építs valódi Shopify appot

Appfejlesztésnél a mai főirány a Shopify CLI, a React Router app template és a GraphQL Admin API. A vázlatokban és régi videókban gyakran látsz Remixet vagy REST Admin API-t. A Remix öröksége ott van a mai stackben, de új projektet már React Router template-tel érdemes indítani. A REST Admin API legacy státuszú, és új public appoknál a GraphQL Admin API a kötelező irány.

A Shopify a React Router template-et ajánlja a legtöbb új apphoz, de ettől még nem kötelező minden üzleti logikát JavaScriptben írnod. PHP- és Laravel-háttérrel használhatsz Laravel template-et vagy saját stacket is. A fontos részek ugyanazok maradnak: autentikáció, sessionkezelés, access scope-ok, GraphQL, webhookok, idempotens feldolgozás és biztonságos adattárolás. Ha a nyelvi és stackbeli lehetőségeket részletesebben is átnéznéd, olvasd el a Milyen nyelven programozhatsz Shopify-ra? című cikket.

Az első appod legyen szűk. Jó példa egy rendeléseket címkéző eszköz, egy metafield-szerkesztő vagy egy kis riport. Kerüld a „private app” elnevezést: ilyen appot már nem lehet létrehozni, az egyetlen merchant számára készülő megoldás mai megfelelője a custom app vagy a custom distribution. Ha csak backend automatizálást vagy API-kapcsolatot építesz adminfelület nélkül, azt közvetlenül a Dev Dashboardból is létrehozhatod.

Három hét alatt ezt a folyamatot járd végig:

1. Indíts appot Shopify CLI-vel, és telepítsd a dev store-ba.
2. Olvass termék- vagy rendelésadatot GraphQL queryvel.
3. Módosíts adatot mutationnel, és kezeld a user errorokat.
4. Iratkozz fel egy webhookra, majd kezeld újrapróbálható módon.
5. Adj egyszerű adminfelületet a beállításokhoz.
6. Naplózd az eseményeket, és nézd meg őket a Dev Dashboardban.

Ezen a ponton már érdemes foglalkoznod API-verzióval, rate limitekkel, adatvédelmi webhookokkal és azzal is, mi történik uninstall után. A működő happy path kevés. Egy app akkor kezd valósághűvé válni, amikor a hibás inputot, a duplikált webhookot és a lejárt jogosultságot is kulturáltan kezeli.

8. hét: tanuld meg az extensionök és Functions szerepét

Az extension nem egyszerűen egy újabb frontendkomponens. Ez a Shopify által kijelölt mód arra, hogy az appod megjelenjen az adminban, a checkoutban, a customer accountban vagy az online store-ban anélkül, hogy ellenőrizetlenül belenyúlna a platform felületébe.

Theme app extensiont használj, ha az appod storefrontblokkot vagy app embedet ad. Checkout UI extensiont akkor, ha a pénztár támogatott pontjain jelenítenél meg felületet. Shopify Functions kellhet kedvezmény-, szállítási, fizetési vagy cart validation logikához, amikor a kódnak a Shopify infrastruktúráján kell futnia. Első körben válassz egyetlen extensiontípust, és építs hozzá minimális demót.

Itt különösen fontos, hogy ne régi tutorialból tanuld meg, „melyik fájlt kell átírni”. Az extensionfelületek, API-verziók és jogosultságok változnak. A koncepciót tartsd meg, a konkrét implementációt mindig a jelenlegi dokumentációból vedd.

9. hét: próbáld ki a headless és Hydrogen irányt

A headless storefrontot érdemes megismerned, de csak akkor tedd a fő fókuszoddá, ha valóban indokolja az egyedi vásárlói élmény vagy a technikai környezet. Egy hagyományos Shopify theme sok boltnál olcsóbb, egyszerűbb és könnyebben átadható megoldás.

Ha a headless releváns neked, építs egy kis Hydrogen demót. A Hydrogen a Shopify React-alapú headless keretrendszere, a Storefront API-n keresztül éri el a katalógust, és Oxygenre telepíthető. A hivatalos Hydrogen és Oxygen kezdő útmutató végigvisz a projektindításon, a store összekötésén és a preview deployon.

A demóban legyen collectionlista, termékoldal, kosár és checkoutba vezető út. Utána nézd meg a route-okat, a cache-stratégiát, az SSR-t, a hibakezelést és a SEO-alapokat. A headless tudás értékét az mutatja meg, hogy a Reactben újraírt felület gyors, crawlolható és a merchant számára továbbra is működtethető marad.

10. hét: performance, SEO és portfólió

Az utolsó hét nem díszítés. Egy Shopify-fejlesztő munkájának minőségét a sebesség, a hozzáférhetőség, a stabilitás és a karbantarthatóság együtt mutatja. Theme-nél nézd meg a fölösleges JavaScriptet, a képméreteket, a lazy loadingot, a Liquid renderelési költségét és az appok által betöltött erőforrásokat. Appnál mérd az adminfelület betöltését, a webhookok válaszidejét és a hibaarányt. Headlessnél a cache, az SSR és a Core Web Vitals együtt számít.

SEO-háttérrel itt tudsz igazán különbséget tenni. Ne csak schema markupot adj hozzá. Figyeld az indexelhető URL-eket, a canonicalt, a faceted navigationt, a belső linkelést, a collectionstruktúrát és azt, hogy a JavaScript milyen tartalmat rejt el a crawlerek elől. A jó Shopify SEO gyakran architekturális döntés, nem egy később felrakott plugin.

A portfóliódban három tömör esettanulmány többet ér, mint tíz félkész repository. Mutasd meg a problémát, a döntéseidet, a technikai korlátokat, a tesztelést és a mérhető eredményt. Képernyőkép mellett legyen GitHub-link vagy működő demo, és írd le azt is, mit csinálnál másképp production környezetben.

Mit kell tudnod a roadmap végén?

Tíz hét után akkor állsz jól, ha önállóan el tudsz indulni a dokumentációból, felismered a feladathoz illő Shopify-réteget, és van legalább két végigvitt projekted. Nem kell fejből tudnod minden GraphQL mezőt vagy Liquid filtert. Azt kell tudnod, hol keresd, hogyan ellenőrizd, és milyen következménye van a választásodnak a merchantre és a vásárlóra.

A következő szintedet már a választott irány határozza meg. Theme fejlesztőként mélyülj el az Online Store architektúrában, accessibilityben és performance-ban. Appfejlesztőként jöhet a billing, a többtenant-os architektúra, az App Store review és a megbízható háttérfolyamatok. Headless irányban a cache, localization, customer account és deployment lesz egyre fontosabb. A Shopify túl nagy ahhoz, hogy mindent egyszerre megtanulj. Szerencsére nincs is rá szükség.

GYIK