Shopify ekosisteminde son 3 yılın en çok tartışılan teknik sorularından biri şu: "Headless commerce'e geçmeli miyim?". Instagram ads'ler, LinkedIn post'lar, agency pitch deck'ler bu konuyu o kadar çok işledi ki merchant'lar artık headless'in ne olduğunu değil, kendileri için gerçekten gerekli olup olmadığını sormaya başladılar.
Çünkü gerçek şu: headless her marka için doğru seçim değil. Aksine, çoğu Shopify mağazası için Classic Shopify (Liquid + Dawn-based themes) hala en doğru çözüm. Headless commerce güçlü bir araç, ama yanlış bağlamda kullanıldığında sadece proje süresini, maliyeti ve bakım yükünü 3 katına çıkarır.
Bu rehberde Shopify Hydrogen, Oxygen, headless commerce'in ne olduğunu, teknik mimarisini, hangi senaryolarda değer ürettiğini ve ne zaman uzak durmak gerektiğini dürüstçe ele alıyoruz. Enterprise merchants, teknik direktörler ve agency'ler için tamamen pragmatik bir değerlendirme.
Temeller: Headless Commerce, Hydrogen ve Oxygen Nedir?
Headless Commerce Nedir?
Klasik e-ticarette storefront (ön yüz) ve backend (ürün, sipariş, müşteri yönetimi) aynı sistemin parçasıdır — örneğin Shopify Liquid theme'leri backend ile sıkı sıkıya entegredir. Headless yaklaşımında ise bu iki katman ayrılır: backend Shopify'da kalır, ama storefront tamamen bağımsız bir framework (React, Vue, Next.js, Svelte) ile geliştirilir ve Shopify'ın Storefront API'ı üzerinden veri çeker.
Avantaj: storefront geliştirmede tam özgürlük, modern frontend ekosisteminin tüm gücü, multi-channel yayınlama kolaylığı. Dezavantaj: bakım yükü, maliyet, Shopify ekosistem entegrasyonlarının kopması.
Shopify Hydrogen Nedir?
Hydrogen, Shopify'ın kendi resmi React-based headless framework'üdür. Remix üzerine kurulmuş, React Server Components'i destekleyen, Storefront API ile derin entegre çalışan bir geliştirme kütüphanesidir. Yani Hydrogen kullanarak yazdığınız bir Shopify storefront'u aslında bir React uygulamasıdır — ama Shopify'ın sağladığı özel component'ler, hook'lar ve utility'ler ile.
Hydrogen'in sunduğu temel araçlar:
- React Server Components: Hem server hem client'ta çalışabilen component'ler, SSR performansı
- Storefront API client: Ürün, koleksiyon, müşteri, sepet sorgularına otomatik type'lı erişim
- Cart API: Shopify'ın native sepet yönetimi React hook'ları
- SEO helpers: Automatic meta tags, hreflang, structured data
- Analytics integration: Shopify Analytics, Customer Events API bağlantısı
- Image optimization: Shopify CDN ile otomatik görsel optimizasyonu
Shopify Oxygen Nedir?
Oxygen, Hydrogen storefront'larını barındırmak için tasarlanmış Shopify'ın edge hosting platformudur. Global CDN üzerinde çalışır, 100+ node'da eş zamanlı deployment yapar, Shopify hesabınıza dahildir (Shopify Plus merchants için ücretsiz). Oxygen kullanırsanız Vercel, Netlify, AWS, Cloudflare gibi üçüncü parti hosting'e ihtiyaç kalmaz.
Oxygen'in avantajları:
- Sub-50ms cold start, edge-optimized response time
- Shopify hesabı ile entegre deployment (GitHub webhook, CLI)
- Preview environments her pull request için
- Sıfır DevOps yükü — Shopify yönetir
- Shopify Plus ile gelen, ek hosting faturası yok
Classic Shopify vs Hydrogen: Derin Karşılaştırma
Karar vermeden önce iki yaklaşımı 10 kritik boyutta karşılaştıralım:
| Boyut | Classic Shopify (Liquid) | Hydrogen (Headless) |
|---|---|---|
| Geliştirme süresi | 2-6 hafta | 3-6 ay |
| Başlangıç maliyeti | $5K-$30K | $80K-$250K |
| Aylık bakım | $500-$3K | $3K-$15K |
| Developer pool | Geniş (Shopify dev'ler) | Dar (React/Hydrogen spesifik) |
| Performans (ideal) | PageSpeed 85-95 | PageSpeed 95-100 |
| Theme Store | ✅ Evet (100+ tema) | ❌ Hayır (sıfırdan yazılır) |
| App Store ekosistemi | ✅ Tam erişim | ⚠️ Sınırlı (bazı app'ler compat değil) |
| Özelleştirme seviyesi | Orta (Liquid'in sınırları) | Sınırsız (React full stack) |
| Multi-channel yayın | Ayrı mağaza başına | Tek codebase, çoklu storefront |
| Marketing ekibi bağımsızlığı | Yüksek (visual editor) | Düşük (developer gerekir) |
Dikkat çeken şey: Hydrogen her kategoride üstün değil. Performans ve özelleştirme bakımından güçlü, ama maliyet, developer pool, theme/app ekosistemi bakımından daha kısıtlı.
Headless'e Geçmek Mantıklı mı? 4 Kritik Soru
Shopify Plus merchant'ı iseniz ve headless'e geçmeyi düşünüyorsanız, kararınızı vermeden önce 4 kritik soruyu dürüstçe cevaplayın.
Soru 1: Aylık Ciro $1M+ Mı?
Headless kurulumu ortalama $80K-$250K'ya mal olur ve aylık bakım maliyeti Classic Shopify'ın 3-5 katıdır. Bu yatırımı amorti edebilmek için yeterli ciro olmalıdır. Aylık cirosu $100K olan bir markanın headless'e geçmesi, yılda $50K-$180K ek yatırım demek. Bu çoğu zaman ROI vermez.
Rule of thumb: Aylık cirosu $1M altında olan markalar için headless nadiren finansal olarak mantıklıdır. Bunun istisnası: marka değerinin ürün satışının önünde olduğu lüks segment markalar.
Soru 2: In-House Developer Ekibiniz Var Mı?
Hydrogen ve headless commerce, Classic Shopify'dan tamamen farklı bir bakım modeli gerektirir. Codebase React/TypeScript'tir, deployment pipeline'ları vardır, dependency güncellemeleri rutinleşir, React ekosistem değişiklikleri takip edilmelidir. Bir agency'ye outsource edebilirsiniz ama iki yıl sonra agency değişimi risklidir.
Minimum ekip: En az 1 kıdemli React developer, 1 orta seviye full-stack dev, 1 DevOps (part-time). Bu ekip aylık $15K-$30K maliyettir. Eğer bu bütçeniz yoksa veya ekibi kurmayı planlamıyorsanız, headless'e girmek sürdürülebilir değildir.
Soru 3: Brand Experience Gerçekten Unique Mi?
Headless'in en güçlü savunması şudur: "Bizim markamız o kadar özel bir dijital deneyim sunmak istiyor ki Liquid bunu kaldıramaz." Bu gerçekten doğruysa, headless değer üretir. Ama çoğu zaman markalar bu iddiayı abartırlar — gerçek iş ihtiyaçlarına baktığınızda, bir premium Shopify teması (Impulse, Prestige, Motion veya custom Dawn fork) aynı görsel hedefi %10'luk maliyetle yakalayabilir.
Kendinize sorun: "Custom animasyonlarım, WebGL component'lerim, interactive 3D ürün viewer'larım, gerçek zamanlı AR deneyimlerim var mı?" Yoksa, Classic Shopify + custom tema yeterlidir.
Soru 4: Multi-Channel Storefront İhtiyacı Var Mı?
Headless'in en somut kazancı şudur: bir codebase'den birden fazla storefront besleyebilirsiniz. Örneğin:
- Ana web storefront (React, SEO odaklı)
- Mobile app (React Native, aynı component'ler)
- PWA
- Kiosk deneyimi (retail mağazalar için)
- Akıllı TV uygulaması
- Voice commerce (Alexa skill)
Bu senaryoların üç veya fazlası sizin için gerçekten bir ihtiyaç ise, headless'in multi-channel gücü sizi Classic Shopify'dan çekecektir. Yoksa single-channel bir mağaza için headless tipik olarak gereksizdir.
Hydrogen İçin İdeal 5 Senaryo
Dürüst değerlendirme sonrası, Hydrogen'in gerçekten değer ürettiği 5 senaryo:
1. Lüks Marka Deneyimi
Fiyat aralığı $500-$10.000 arasındaki lüks segment markalar için dijital deneyim ürün kadar önemlidir. Custom animasyonlar, editorial içerik, interactive lookbook, atölye video'ları, zanaatkâr hikayeleri — hepsi Liquid'de sınırlıdır. Hydrogen ile tam React/Framer Motion/Three.js stack'ine erişirsiniz.
2. Content + Commerce Hibrit
Başarılı bir marka blog'u veya editorial publication'ı olan merchant'lar için (örn. Patagonia, Glossier). Hydrogen, content-heavy sayfaları server-side render ile çok hızlı yükleyebilir, aynı zamanda e-ticaret component'lerini dinamik olarak enjekte edebilir. Classic Shopify'da bu mümkün ama o kadar temiz değil.
3. Global Multi-Region Store
10+ ülkeye farklı dil ve para birimleriyle satış yapan markalar. Shopify Markets classic Shopify'da da çalışır, ama Hydrogen ile her bölge için özel routing, lokalize content delivery ve A/B testing yapmak çok daha esnektir.
4. B2B + B2C + Marketplace Hibrit
Aynı markanın hem retail hem wholesale hem marketplace sattığı senaryolar. Her kanala özel bir storefront ihtiyacı vardır. Hydrogen ile tek codebase'den üç ayrı storefront deploy edebilirsiniz. Detaylar için Shopify Plus B2B rehberimize bakın.
5. Shopify Plus + Custom Checkout + Advanced Functions
Shopify Plus merchant'larının checkout'u Checkout Extensibility ile özelleştirmesi, Shopify Functions ile business logic yazması zaten standarttır. Bu ekosistemin tamamını React-based bir storefront ile birleştirmek, developer experience ve performans açısından anlamlıdır. Checkout Extensibility rehberimiz bu konuyu derinlemesine anlatıyor.
Hydrogen Kurulum Süreci: 3-6 Aylık Roadmap
Bir Hydrogen projesi Classic Shopify projesinden yapısal olarak farklıdır. Tipik bir 4 aylık kurulum roadmap'i:
Ay 1: Discovery ve Mimari Tasarım
- Mevcut Classic Shopify customization'larının envanteri
- Business requirements dokümantasyonu
- Storefront API endpoint analizi — hangi query'ler, hangi fragment'ler
- Routing, SEO, hreflang stratejisi
- State management kararı (React Context, Zustand, Redux)
- Design system ve component library seçimi (Shadcn/UI, Radix, custom)
Ay 2: Core Development
- Hydrogen proje iskeleti (Shopify CLI ile)
- Home, collection, product, cart, checkout sayfaları
- Storefront API entegrasyonu — GraphQL queries
- Cart API ve state management
- Authentication (customer account)
Ay 3: Advanced Features + Integration
- Shopify Functions entegrasyonu (discounts, shipping, payment)
- Checkout Extensibility uzantıları
- Üçüncü parti app'lerle entegrasyon (Klaviyo, Judge.me, Gorgias, Octane AI)
- Analytics (Shopify Analytics, GA4, Klaviyo events)
- Search (Shopify Search & Discovery veya Algolia)
Ay 4: QA, Performance, Launch
- End-to-end test (Playwright veya Cypress)
- Performance optimization (Lighthouse CI, Core Web Vitals)
- SEO migration (301 redirects eski URL'lerden)
- Staging deployment ve A/B test
- Production cutover ve DNS değişikliği
- Post-launch monitoring (first 2 weeks critical)
Headless'in Görünmeyen Maliyetleri
Headless projesi teklif aldığınızda genellikle development cost duyarsınız. Ama 12 ay sonra yüzleşeceğiniz maliyetler başlangıçta görünmez:
1. Dependency Maintenance
React ekosistemi hızlı hareket eder. Next.js 14 → 15 geçişi, React 18 → 19, Remix → React Router v7 konsolidasyonu gibi ana sürüm geçişleri her 12-18 ayda bir olur. Her biri 1-4 haftalık bir refactor işidir.
2. Third-Party App Entegrasyonlarının Kırılması
Shopify App Store'daki app'lerin çoğu Classic Shopify için yazılmıştır. Hydrogen'de bu app'leri kullanmak için genellikle özel entegrasyon kodu yazmanız gerekir. App güncellemeleri custom entegrasyonunuzu kırabilir.
3. Developer Turnover Riski
Hydrogen uzmanı developer sayısı Classic Shopify developer'larından çok daha azdır. Eğer lead developer'ınız ayrılırsa, yerine bulmak 2-6 ay sürebilir.
4. Marketing Team Velocity Düşüşü
Classic Shopify'da marketing ekibi landing page, banner, promotional section ekleyebilir. Hydrogen'de her değişiklik bir Git commit, code review ve deployment süreci gerektirir. Marketing velocity %30-60 düşer.
5. Shopify Platform Güncellemelerini Takip Etmek
Shopify her ay yeni özellikler yayınlar — Shop Pay improvements, new checkout features, API değişiklikleri. Classic tema otomatik faydalanır. Hydrogen'de her özelliği manuel entegre etmeniz gerekir.
Headless'e Alternatif: "Enhanced Classic Shopify"
Eğer headless'in değerlerini istiyor ama maliyetini/risklerini kabullenemiyorsanız, orta yol vardır: Classic Shopify + custom tema + Checkout Extensibility + Shopify Functions.
Bu yaklaşımla:
- Custom Dawn fork tema ile %90 design özgürlüğü
- Shopify Functions ile tam business logic kontrolü
- Checkout Extensibility ile checkout customization
- Theme app extensions ile modüler yapı
- Classic Shopify'ın tüm ekosistem faydaları
- Maliyet: Hydrogen'in %20-30'u
Bu, 2026'da çoğu Shopify Plus merchant'ı için en rasyonel yaklaşımdır. Ciddi bir brand experience ihtiyacı ve yeterli developer kapasitesi olmayan markalar için headless'e gitmenin iş kararı olarak savunulması zordur.
Karar Ağacı: Sizin İçin Doğru Seçim Hangisi?
Özetle karar akışınız:
- Aylık ciro $1M altında mı? → Classic Shopify + custom tema yeterli. Headless overkill.
- In-house React developer ekibiniz yok mu? → Classic Shopify. Agency bağımlılığı headless için risklidir.
- Sadece tek kanalda mı satıyorsunuz? → Classic Shopify. Headless'in multi-channel kazancını kullanmıyorsunuz.
- Marketing ekibi self-service autonomy istiyor mu? → Classic Shopify. Hydrogen'de her değişiklik developer gerektirir.
- Yukarıdaki 4'üne de "hayır" dediniz mi? → Hydrogen sizin için doğru seçim olabilir. Agency ile 4 haftalık bir POC projesi yapıp gerçek karar verin.
34Devs'te Hydrogen Hizmeti
34Devs olarak Hydrogen projelerini seçici kabul ediyoruz. Her Shopify Plus merchant'ına "evet, headless yapalım" demiyoruz — aksine çoğu merchant'ı Classic Shopify + custom tema yönünde yönlendiriyoruz çünkü uzun vadeli sürdürülebilirlik onlar için daha iyi.
Hydrogen projeleri için kabul kriterlerimiz:
- Aylık ciro $1M+ veya kurumsal düzeyde büyüme planı
- In-house dev team varlığı veya kurulum planı
- Gerçek brand experience ihtiyacı (sadece "modern görünmek" değil)
- Multi-channel veya complex B2B+B2C senaryosu
Eğer bu kriterleri karşılıyorsanız, Shopify Plus ajansımızla ücretsiz discovery görüşmesi için bize ulaşabilirsiniz. İlk 60 dakikalık görüşmede mevcut durumunuzu analiz eder, Hydrogen'in sizin için doğru seçim olup olmadığını dürüstçe değerlendiririz.
Daha önceki pillar yazılarımızda Shopify Plus ekosisteminin diğer önemli parçalarını inceledik: Shopify Plus B2B Wholesale Portal ve Shopify Checkout Extensibility.
Sıkça Sorulan Sorular
Hydrogen Shopify Plus gerektirir mi?
Hayır, teknik olarak Hydrogen tüm Shopify planlarında çalışır. Ancak Oxygen hosting (Shopify'ın edge hosting'i) sadece Shopify Plus'a dahildir. Plus dışında merchant'lar Vercel veya Netlify gibi üçüncü parti hosting kullanmak zorundadır.
Hydrogen vs Next.js: Hangisi daha iyi?
İkisi de React tabanlıdır. Hydrogen Shopify ekosistemiyle derin entegredir — Storefront API, Cart API, Shopify Analytics entegrasyonu out-of-the-box gelir. Next.js daha genel amaçlıdır. Sadece Shopify için yazıyorsanız Hydrogen, multi-backend (WordPress, Contentful, Shopify) için Next.js daha mantıklıdır.
Mevcut Shopify temamdan Hydrogen'e geçmek ne kadar sürer?
Ortalama migration 3-6 ay sürer. Mevcut tema karmaşıklığına, kaç sayfa tipinde olduğunuza ve entegrasyonlara bağlıdır. Hafta 1-4: discovery, hafta 5-12: development, hafta 13-16: testing ve launch.
Hydrogen SEO'sı Classic Shopify'dan daha iyi mi?
Teorik olarak evet — React Server Components, edge rendering ve advanced metadata kontrolü sağlar. Pratikte, kötü yazılmış bir Hydrogen projesi iyi optimize edilmiş bir Classic Shopify temasından daha kötü performans verebilir. Fark teknik yetkinliğe bağlıdır.
Hydrogen için hangi React versiyonu gerekli?
Hydrogen 2024+ React 18+ ve Remix (şimdi React Router v7) üzerine kurulmuştur. React Server Components desteği kritiktir. TypeScript kullanımı standart, ama zorunlu değildir.
Hydrogen kurulumu ne kadara mal olur?
Basit bir Hydrogen storefront (standart e-ticaret akışı, Classic Shopify paritesi) $80K-$120K bandındadır. Karmaşık kurulumlar (B2B + B2C hibrit, custom checkout, çoklu bölgesel storefront) $150K-$250K veya üzeri. Bu fiyatlar sadece development içindir, bakım ayrıca.
Hangi büyük markalar Hydrogen kullanıyor?
Allbirds, Rothy's, Allbirds, Everlane, Shopify'ın kendi merch store'u, The Sill, Hydro Flask gibi markalar Hydrogen veya diğer headless Shopify çözümleri kullanıyor. Ortak özellikleri: $1M+ aylık ciro, güçlü marka kimliği, in-house dev ekipleri.
Hydrogen'den Classic Shopify'a geri dönmek mümkün mü?
Evet, teknik olarak mümkün. Shopify backend'iniz değişmediği için ürünler, siparişler, müşteriler hep orada kalır. Ama storefront'u yeniden yazmak bir Classic-to-Hydrogen migration kadar uzun sürer. Pratikte "try Hydrogen, if it doesn't work go back" yaklaşımı çok pahalıdır — kararı baştan verin.
