Ce primesti
Setup proiect Hydrogen cu ultima versiune stabila pe React Router v7 (fost Remix), TypeScript strict, Tailwind sau vanilla-extract pentru styling, ESLint configurat dupa standardul nostru. Componente CartProvider, ProductProvider, Image, Money preconfigurate cu Shopify CDN automat.
Integrare completa cu Storefront API GraphQL pentru produse, colectii, blog-uri Shopify, carusele recomandari, search predictiv. Customer Account API pentru login fara parola via email/OAuth, istoric comenzi, addresses management, wishlist persistent in cont client.
RSC streaming cu loader-uri React Router, Image component cu srcset si lazy loading automat, font preload optimizat, critical CSS inline, deferred Stripe/Klaviyo scripts. Target garantat: LCP sub 1.5s, INP sub 100ms, CLS sub 0.1 pe homepage si PDP.
Meta tags dinamice per pagina via React Router meta function, canonical corect pentru variants (?variant=123), Open Graph + Twitter Cards, structured data Product/Offer/BreadcrumbList/AggregateRating, sitemap XML generat din Storefront API, robots.txt per environment, hreflang pentru multi-language.
Deploy automat din git push catre Shopify Oxygen (gratuit inclus in planul Shopify) cu Edge runtime in 100+ locatii globale si cache Storefront API automat. Sau pe Vercel Edge Functions cu propria configurare. Preview deployments per pull request inclusiv.
Mapam ecosistemul tau Shopify (Klaviyo email, Yotpo reviews, Recharge subscriptions, Searchanise search, Loox UGC) pe Hydrogen via API-urile lor. App-urile Liquid-only sunt inlocuite cu alternative headless-ready inainte de start (lista predefinita).
Suport RO/EN/DE prin Shopify Markets pentru pricing per piata, taxe, traduceri Storefront API si rutare /ro/ /en/. Detectie automata IP cu override manual user. Hreflang corect generate pentru SEO international.
Conexiune Hydrogen cu backend propriu Node/Python pentru logica custom: recomandari AI personalizate, pricing B2B dinamic, configuratoare produs, sync ERP NextUp/Saga RO. Backend separat ruleaza pe Vercel/Hetzner cu deploy independent.
Cum functioneaza
Saptamana 1
Inventariem catalog (produse, variants, metafields, colectii), apps active si dependinta lor de Liquid, plan Shopify curent (Basic/Plus), traficul lunar si conversie baseline. Decidem stack: Hydrogen pe Oxygen sau Hydrogen pe Vercel. Estimam volum migrare.
Saptamanile 2-3
Construim design system in Figma pentru: homepage, PLP, PDP, cart drawer, checkout fallback, customer account, blog. Translatam in componente React tipate cu Storybook. Setup Hydrogen project, Storefront API token, env vars per environment.
Saptamanile 3-6
Implementare pagini cu loader-uri React Router catre Storefront API. Integrare Klaviyo pentru email captures + abandoned cart. Yotpo Reviews via API. Search Searchanise sau custom Algolia. Tracking Meta Pixel + GA4 + GTM server-side via Stape sau Edge GTM.
Saptamana 7
Verificare meta tags, canonical, structured data Product cu Schema.org validator. Lighthouse audit pe homepage, PLP, PDP — target 95+ pe toate. Optimizare imagini cu Shopify CDN transforms, font subsetting, critical CSS inline. Sitemap XML cu toate produsele active.
Saptamanile 8-10
Testare flow complet: browse → cart → checkout → confirmare email → cont client → istoric comenzi. Cross-browser (Chrome/Safari/Firefox/Edge) si cross-device (iOS/Android). UAT cu echipa ta pe environment de preview Oxygen. 5-10 comenzi reale de test cu valoare mica.
Saptamanile 11-12
DNS switch in fereastra de trafic minim (frecvent 3-5 AM duminica), monitoring Sentry pentru erori React, Healthchecks.io pentru Storefront API uptime, dashboard intern KPI conversie. Primele 7 zile checking zilnic, apoi monitoring automat. 90 zile suport bug-uri inclus.
Preturi
8.000-12.000€
livrare 6-8 saptamani
12.000-20.000€
livrare 8-12 saptamani
20.000-30.000€+
livrare 12-20 saptamani
Nota Shopify Plus: pentru Hydrogen serios recomandam plan Plus (2.000$/luna) pentru Customer Account API complet, rate limits Storefront API generoase si suport prioritar. Shopify Basic functioneaza dar pierzi flexibilitate. Hosting Oxygen e gratuit inclus in orice plan, fara costuri server suplimentare.
Intrebari frecvente
Hydrogen este framework-ul oficial React de la Shopify pentru a construi storefront-uri headless — practic un site Remix (acum React Router v7) care comunica cu Shopify prin Storefront API in loc sa randeze tema Liquid traditionala. Merita cand: 1) Vrei performanta premium (Hydrogen scoate constant 90-100 PageSpeed vs 50-70 la teme clasice). 2) Ai design unic care nu intra in constrangerile temelor Shopify. 3) Construiesti experiente complexe (configuratoare produs, quiz-uri, AR, livestream). 4) Vrei sa unifici Shopify cu alt CMS (Sanity, Contentful) pentru content marketing. NU merita pentru magazine sub 50k EUR/an cifra de afaceri — tema Dawn customizata e mult mai ieftina de intretinut.
Hydrogen e construit pe React Router v7 (fost Remix) si are integrare nativa cu Oxygen — hosting gratuit Shopify cu Edge runtime in 100+ locatii. Avantaje Hydrogen: componente preconfigurate (CartProvider, ProductProvider, Image cu Shopify CDN automatic), analytics built-in, deploy din Shopify CLI direct la Oxygen, Customer Account API integrat. Avantaje Next.js + Storefront API: ecosistem React mai matur, App Router cu RSC, deploy pe Vercel/Cloudflare/AWS dupa preferinta, mai usor de gasit dezvoltatori. Recomandare: Hydrogen pentru magazine 100% Shopify cu vendor lock-in acceptat; Next.js daca vrei flexibilitate viitoare sa migrezi catre alt commerce engine (Medusa, BigCommerce).
Diferenta e masurabila si reala. Tema Dawn customizata pe magazin mediu: LCP 2.5-4s, PageSpeed 50-75, INP 200-400ms (Liquid randat server + JavaScript apps Shopify care se incarca client-side). Hydrogen pe Oxygen: LCP 0.8-1.5s, PageSpeed 90-100, INP sub 100ms (RSC streaming, Edge runtime, Image component cu srcset automat). Pe produs cu mult continut bogat (recenzii Yotpo, video, configurator) diferenta e si mai mare — Hydrogen incarca incremental in RSC, Dawn blocheaza pe app loaders. Impact business real: conversie tipic +15-30% la magazinele care migreaza de la Dawn slab la Hydrogen rapid, in special pe mobil.
Range realist 2026 in Romania: 1) Hydrogen MVP (50-100 produse, design simplu, doar Cart si Checkout): 8.000-12.000€, livrare 6-8 saptamani. 2) Hydrogen mid-range (catalog mare, 2-3 app-uri integrate via Storefront API, blog Sanity headless, multilanguage RO/EN): 12.000-20.000€, livrare 8-12 saptamani. 3) Hydrogen enterprise (B2B portal, configuratoare custom, sync ERP, multi-store cu Markets, integrari ERP/PIM Akeneo): 20.000-30.000€+, 12-20 saptamani. Hosting Oxygen e gratuit inclus pentru orice plan Shopify. Subscriptie Shopify Plus (2.000$/luna+) recomandata pentru Hydrogen serios — Shopify Basic merge dar pierzi Customer Account API si rate limits agresive.
Da, partial — depinde de app. App-uri care expun Storefront API custom (Klaviyo, Yotpo Reviews, Recharge Subscriptions, Searchanise) functioneaza perfect cu Hydrogen — apelezi endpoint-urile lor direct din React Router loaders. App-uri care depind de Liquid theme injection (script injectat in <head>, link injectat in navbar) NU functioneaza out-of-the-box — trebuie reintegrate manual via API-ul lor sau inlocuite. Inainte de a alege Hydrogen verificam fiecare app: 30% sunt nativ headless-ready, 50% au API si reimplementam, 20% trebuie inlocuite. Lista neagra tipica: app-uri popup vechi, bundle builders Liquid-only, app-uri shipping calculator care randeaza in Liquid.
Mai greu daca esti nepriceput, mai bun daca stii ce faci. Hydrogen ruleaza pe React Router cu SSR/RSC complet — Google primeste HTML server-randat ca pe orice site normal, nu CSR. Meta tags, canonical, Open Graph, structured data Product/Offer/BreadcrumbList le controlam noi 100% in cod (vs tema Liquid unde esti limitat de variabile Shopify). Sitemap XML il generam pe ruta /sitemap.xml din Storefront API. Robots.txt configurabil per environment (preview vs prod). Avantaj real Hydrogen pentru SEO: paginile incarca in sub 1s, Core Web Vitals 100% green, Google iubeste asta. Single condition: trebuie sa setezi corect canonical-ul cand ai variants ?variant=12345 pentru a nu duplica continut.
Oxygen este hosting-ul Edge al Shopify pentru proiecte Hydrogen — ruleaza pe V8 isolates Workers (similar Cloudflare Workers) in 100+ locatii globale, cu cache automat pentru Storefront API. Cost: gratuit inclus in orice plan Shopify (Basic 39$/luna pana la Plus 2.000$/luna). Limita realista: 1M de invocatii pe luna in planurile mici, nelimitat la Plus. NU e obligatoriu — Hydrogen poate fi deployed pe Vercel, Cloudflare Pages, Netlify, AWS Lambda@Edge sau orice runtime Node/Workers. Cand recomandam Oxygen: deploy direct din Shopify CLI cu zero config, integrare CDN imagini Shopify automat, Customer Account API serverless ready. Cand recomandam Vercel: ai monorepo cu alte aplicatii (admin Next.js, app mobil expo) si vrei un singur cont CI/CD.
Absolut, e chiar pattern-ul recomandat pentru magazine complexe — composable commerce real. Hydrogen ramane storefront-ul (UI + checkout + cart Shopify), iar logica proprie (recomandari AI, configuratoare produs custom, loyalty program propriu, integrare ERP NextUp/Saga RO, pricing B2B dinamic) ruleaza pe backend separat Node/Python/Go expus via API REST sau GraphQL. Hydrogen apeleaza acest backend din React Router loaders alaturi de Storefront API Shopify. Exemple reale: 1) Recomandari produse personalizate via Pinecone vector search apelata din loader. 2) Pricing B2B per client logged-in din ERP propriu. 3) Sync stocuri multi-warehouse via Inngest jobs. Vezi pagina noastra /backend-api-custom-headless/ pentru detalii backend.
Servicii complementare
Setup si migrare la Shopify Plus pentru magazine enterprise. Functii Plus: Scripts, Flow, Markets, B2B portal. Recomandat pentru Hydrogen serios.
Dezvoltare app-uri private Shopify cu Admin API pentru fluxuri proprii — sync ERP, automatizari, dashboard custom in admin Shopify.
Backend Node/Python pentru logica composable: recomandari AI, pricing B2B dinamic, integrari ERP, jobs Inngest. Apelat din Hydrogen loaders.
Comparatie completa solutii headless: Shopify Hydrogen, Medusa, BigCommerce, commercetools. Alegem impreuna stack-ul potrivit.
Alternativa Next.js + Storefront API daca nu vrei vendor lock-in Hydrogen. Acelasi nivel performanta, mai multa flexibilitate viitoare.
Magazine reale construite cu Hydrogen si Next.js commerce. Cifre conversie, PageSpeed, lectii invatate.