Teknik vitrin projesi, müşteri işi değil
Snow / Motion
Her sayfada neyin görüneceğine kodun değil, ürün verisinin karar verdiği headless bir Shopify vitrini.
Ekibimiz Eylül 2026’da bir kavram kanıtı olarak geliştirdi. Shopify’ın örnek snowboard ürünlerini içeren bir Shopify geliştirme mağazasında çalışıyor; üzerindeki hiçbir şey satılık değil.
Bu tanıtım hakkında
Headless bir Shopify yapısının nasıl kurulduğunu göstermek için geliştirilmiş bir tanıtım vitrini. Shopify’ın örnek snowboard ürünlerini içeren bir Shopify geliştirme mağazasında çalışıyor. Bir müşteri projesi değil ve üzerindeki hiçbir şey satılık değil.
Kullanılanlar
- Shopify Hydrogen 2026.4Shopify’ın headless vitrinler için React framework’ü
- React Router 7 ve React 19akışla gelen veriyle sunucu tarafında render
- Shopify Storefront APIürünler, koleksiyonlar, arama ve öneriler için GraphQL sorguları
- Ürün metafield’larıteknik özellikleri, esneklik grafiğini ve koleksiyonları belirleyen beş
snow.*alanı - GSAP ve ScrollTriggergerektiğinde yüklenen, azaltılmış hareket tercihinde atlanan animasyonlar
- Lenisyumuşak kaydırma, dokunmatik cihazlarda kapalı
- View Transitions APIkarttan ürün sayfasına geçiş animasyonu
- Vite 8 ve TypeScriptderleme araçları
- Cloudflare Workersherkese açık kopyayı barındırıyor; özel kopya GitHub Actions ile Oxygen’a yayınlanıyor
- Playwrightuçtan uca testler
- Sektör
- Örnek veriyle teknik vitrin
- Mimari
- Hydrogen
- Ekibimizin rolü
- Mimari, Tasarım ve geliştirme
- Teknolojiler
- Hydrogen, React Router, Storefront API, GSAP, Lenis, Cloudflare Workers
- Vitrini açın
- headless.gencerkarakaya.com
Yapının kapsamı
- 5
- ürün metafield’ı teknik özellikleri, esneklik grafiğini ve araziyi belirliyor
- 3
- kodla değil, bir metafield’a göre sıralanan otomatik koleksiyon
- Sepet yok
- bir mağaza değil, vitrin projesi: hiçbir şey satılık değil
- 86
- Lighthouse performans puanı, mobilLaboratuvar: Lighthouse 12.8.2, ana sayfa, 3 ölçümün medyanı, 24 Eylül 2026
- 3,5 sn
- Largest Contentful Paint, mobilLaboratuvar: Lighthouse 12.8.2, 3 ölçümün medyanı, 24 Eylül 2026
- 0
- Cumulative Layout ShiftLaboratuvar: Lighthouse 12.8.2, 3 ölçümün tümü, 24 Eylül 2026
- 140 ms
- Total Blocking Time, mobilLaboratuvar: Lighthouse 12.8.2, 3 ölçümün medyanı, 24 Eylül 2026
- 01Soru
Headless bir yapıda Shopify verinin tek kaynağı olarak kalabilir mi?
Headless’a geçmeyi düşünen bir markanın ilk sorusu bu olmalı. Bu vitrinde Shopify yönetim panelinde düzenlenen bir ürün, kod değişikliği ya da yeni bir yayın gerekmeden koleksiyonlar arasında yer değiştiriyor ve teknik özellik tablosu güncelleniyor.
- Her ürün, fiyat ve varyant Shopify’ın örnek kataloğu kullanılarak Storefront API’den geliyor
- Koda gömülü ürün sayfası ya da koleksiyon listesi yok
- Açıkça bir tanıtım: sepet ve ödeme adımı yok
- 02Mimari
Storefront API üzerinde Hydrogen, veri modeli olarak metafield’lar.
Her snowboard, snow namespace’i altında beş metafield taşıyor: arazi, esneklik, profil, çekirdek ve teknoloji. Powder, All Mountain ve Freestyle adlı üç otomatik koleksiyon kural olarak arazi metafield’ını kullanıyor; yönetim panelinde tek bir değeri değiştirmek bir snowboard’u koleksiyonlar arasında taşıyor.
- React Router 7 üzerinde Hydrogen 2026.4, sunucu tarafında render; ikincil veri ilk yanıttan sonra akışla geliyor
- Hero, katalog, arazi koleksiyonları, ürün sayfaları, anlık arama ve öneriler için Storefront API GraphQL sorguları
- GitHub Actions ile Oxygen’a yayınlanıyor. Bir geliştirme mağazasının herkese açık Oxygen ortamı olmadığı için herkese açık kopya Cloudflare Workers’ta çalışıyor
- 03Deneyim
Yalnızca işe yaradığında yüklenen animasyonlar.
GSAP ve ScrollTrigger gerektiğinde yükleniyor ve ziyaretçi azaltılmış hareketi tercih ettiğinde atlanıyor; en ağır efektler küçük ekranlarda kullanılmıyor. Lenis yumuşak kaydırması dokunmatik cihazlarda devre dışı. Bir ürün kartı, tarayıcının yerleşik View Transitions özelliğiyle ürün sayfasına dönüşüyor.
- Her snowboard’u esneklik metafield’ına göre konumlandıran, klavyeyle kullanılabilen bir esneklik grafiği
- Erişilebilir diyalog olarak geliştirilmiş arama ve menü çekmeceleri
- Gezinme akışı, azaltılmış hareket ve herhangi bir ödeme adımının olmaması için uçtan uca testler
- 04Performans
Ölçülen performans
Duyarlı görseller Shopify’ın CDN’inden oluşturuluyor; böylece her cihaz kendine uyan boyutu indiriyor. Animasyon kodu ana paket yerine kendi parçasında geliyor. Laboratuvarda Lighthouse ile mobilde ölçülen ana sayfa, hiç düzen kayması olmadan 86 puan alıyor (ayrıntılar “Yapının kapsamı” bölümünde). Bir tanıtım vitrininin saha verisi için yeterli gerçek trafiği yok.
- 05Ne gösteriyor
Headless bir yapının neleri kapsadığını anlatmak yerine gösteriyor.
Bir Hydrogen vitrini veriyi Shopify’ın yönetiminde tutabilir. Ancak bir temanın Shopify’dan hazır aldığı GraphQL sorgularını, önbelleği ve yayını da üstlenmek anlamına gelir; Lintel’in headless’ı yalnızca kendini amorti ettiğinde önermesinin nedeni bu.
