Bu sayfada
Mağazanız Shopify Hydrogen üzerinde çalışıyorsa, Shopify App Store'daki beden önerme uygulamaları neredeyse hiçbir zaman kutudan çıktığı gibi çalışmaz. Bu uygulamalar tema app extension olarak dağıtılır, Hydrogen ise Liquid temaları render etmez — Oxygen üzerinde React component'leri render eder. Bu uyumsuzluk, "Shopify ile çalışır" demenin "mağazamla çalışır" anlamına geldiğini varsayan pek çok satıcıyı yanıltıyor ve bu boşluk kapanmadıkça gerçek anlamda iade oranı düşüşü kaçırılıyor.
Tema App Extension'lar Neden Hydrogen'da Çalışmıyor
Tema app extension'lar, Online Store 2.0 tema editörüne blok enjekte eder. Bir ürün sayfasına widget yerleştirmek için Liquid'e, tema bölümlerine ve Shopify tema mimarisine dayanır. Hydrogen mağazaları bu katmanı tamamen atlar — bunlar Remix konvansiyonları üzerine kurulu, Oxygen'e deploy edilen ve sunucu taraflı Liquid şablonları yerine Storefront API üzerinden veri çeken özel React uygulamalarıdır.
Bu, bütün entegrasyon hikayesi "kur ve ürün sayfanda otomatik görünsün" olan herhangi bir uygulamanın Hydrogen yapısında takılacağı hiçbir yer olmadığı anlamına gelir. Onun oturacağı bir tema editörü slotu yoktur. Bu, Shopify'ın kendi headless mimarisinin tema tabanlı mağazalar ile composable/Hydrogen mağazaları arasındaki ayrımının iyi belgelenmiş bir sonucudur — iki yolun nasıl farklı inşa edilmesi gerektiği için Shopify'ın headless commerce üzerine kendi rehberliğine bakabilirsiniz.
Gerçekte İşe Yarayan: Component + API
Hydrogen için işleyen desen, herhangi bir headless mağaza için kullanılanla aynıdır: beden öneriyi, sahip olduğunuz ve çağırdığınız barındırılan bir API'nin desteklediği bir UI component'i olarak ele almak. Uygulama kurmuyorsunuz — bir widget entegre ediyorsunuz.
- Ürün rotanız içinde render edilen hafif bir React component
- Ürün kimliklerini ve (isteğe bağlı) markanın beden tablosu referansını ileten, sizing API'sine yapılan bir fetch çağrısı
- Beden önerisi, güven göstergesi veya fit notu olarak render edilen bir öneri payload'u
- Öneri etkisinin ölçülebilmesi için mevcut izleme katmanınıza gönderilen analitik olayları
Bu, Next.js, Nuxt veya özel bir SPA gibi başka bir stack'te herhangi bir headless mağazaya headless mağazaya API üzerinden fit araçları eklemek ile işlevsel olarak aynıdır. Hydrogen burada özel değil; sadece bir REST veya GraphQL endpoint'i tüketen başka bir headless frontend.
Adım Adım: Component'i Ürün Rotasına Bağlama
1. Ürün Verisinin Zaten Nerede Bulunduğunu Belirleyin
Hydrogen ürün rotaları genellikle Storefront API'yi sorgulayan bir loader fonksiyonu aracılığıyla ürün verisi yükler. Her render'da ikinci bir round trip yapmamak için varyant ID'lerine ve mümkünse bir beden tablosu eşleşmesine aynı loader yanıtında ihtiyacınız var.
2. Öneriyi Client Component Olarak Ekleyin
Beden widget'ını, ürün ve varyant verisini prop olarak alan bir client-side component olarak render edin. Loader mantığınızdan bağımsız tutun — sadece bir kimlik ve beden seçildiğinde çağrılacak bir callback'e ihtiyacı olsun.
3. Sizing API'sini Mount'ta veya Etkileşimde Çağırın
İki yaygın desen var: ürün sayfası yüklendiğinde proaktif olarak bir öneri çekmek, ya da alışverişçi bir "bedenimi bul" modalı açana kadar beklemek. İkinci desen API çağrıları açısından daha hafiftir ve alışverişçi niyetiyle daha kesin eşleşir, çünkü hiç beden özelliğiyle etkileşime girmeyen ziyaretçiler için bir sorgu harcamazsınız.
4. Sonucu Varyant Seçiciye Aktarın
Asıl kazanç anı, önerilen bedeni Hydrogen'ın varyant seçim state'ine bağlamaktır; böylece öneriyi kabul eden bir alışverişçi bedenini manuel olarak yeniden girmek zorunda kalmadan önceden seçilmiş bulur. Bu tek UX adımı, çoğu zaman kullanılan bir öneri ile göz ardı edilen bir öneri arasındaki farkı yaratır.
5. Ölçüm İçin Enstrümantasyon Yapın
Widget-gösterildi, öneri-döndü, beden-kabul-edildi ve beden-geçersiz-kılındı olayları gönderin. Bu olmadan entegrasyonun beden kaynaklı iadeleri azaltıp azaltmadığını ya da kimsenin dokunmadığı bir UI elemanı eklemiş olup olmadığınızı anlayamazsınız.
Headless Sizing Yaklaşımı vs. Geleneksel Uygulama Kurulumu
| Yön | Tema App Extension (headless olmayan) | Component + API (Hydrogen) |
|---|---|---|
| Kurulum yöntemi | App Store kurulumu, temaya otomatik enjekte | Kod tabanında manuel component entegrasyonu |
| Render | Tema editöründe Liquid bölümü | Ürün rotasında React component |
| Veri akışı | Uygulama tema/ürün verisini otomatik okur | Geliştirici ürün/varyant verisini açıkça iletir |
| Deploy | Yeniden deploy gerekmez | Göndermek için mağaza deploy'u gerekir |
| Esneklik | Uygulamanın UI seçenekleriyle sınırlı | Yerleşim, stil ve tetikleyiciler üzerinde tam kontrol |
| Bakım | Vendor tarafından yönetilir | Paylaşımlı — API vendor, UI kendi ekibiniz tarafından yönetilir |
Bu değiş tokuş, uzun vadeli kontrol karşılığında baştan mühendislik zamanıdır. Component bir kez yerleştirildikten sonra metin, stil veya tetikleyici mantığını güncellemek bir app vendor'ına destek talebi açmak yerine normal bir frontend değişikliğidir.
Bunun Daha Geniş Bir Fit Stratejisindeki Yeri
Ürün sayfasındaki bir beden önerici tek giriş noktasıdır, ama tek nokta olmamalı. Pek çok Hydrogen satıcısı ayrıca beden özelliğini checkout'ta son şans onayı olarak sunar; bu, ürün sayfasındaki widget'ı atlayan ya da sepette bedenini değiştiren alışverişçileri yakalar. Hydrogen checkout özelleştirmesinin kendine özgü kısıtları (ham component kontrolü yerine Checkout Extensibility) olduğu için, bu entegrasyon noktası yukarıda anlatılan ürün sayfası widget'ından ayrı ele alınmalı — sonradan akla gelen bir şey değil, ayrı bir uygulama görevi olarak planlayın.
Hydrogen Entegrasyonlarında Yaygın Tuzaklar
- Sizing sağlayıcısının "Shopify uygulaması" listesinin Hydrogen'ı kapsadığını varsaymak — mühendislik zamanına karar vermeden önce daima API-öncelikli desteği doğrulayın
- Önerileri her sayfa yüklemesinde çekmek yerine talep üzerine çekmemek, gereksiz API yükü ekler ve ürün sayfasını yavaşlatır
- Loader ile client component arasında varyant ID'lerini tutarlı biçimde iletmemek, öneri-varyant uyumsuzluklarına yol açar
- Analitik enstrümantasyonunu atlamak, lansmandan sonra paydaşlara ROI kanıtlamayı imkansız hale getirir
Bunu Doğru Yapmanın İş Gerekçesi
Beden kaynaklı belirsizlik, sektör genelinde giyim iadelerinin en büyük sürücülerinden biri olmayı sürdürüyor ve headless satıcılar sadece stack'leri daha modern diye bundan muaf değil — aksine, entegrasyon boşluğu pek çok Hydrogen mağazasının Liquid tema rakiplerinden daha zayıf beden rehberliğiyle çalıştığı anlamına geliyor. Perakendeciler, satın alma öncesi beden güveninin beden kaynaklı iade hacmini ölçülebilir şekilde azalttığını bildiriyor; bu, National Retail Federation'ın iade istatistikleri gibi giyim iadesi araştırmalarında yaygın olarak tartışılan bir örüntü. Modern, hızlı, component tabanlı bir frontend'e yatırım yapan bir Hydrogen mağazası için beden önerisi boşluğunu ele almadan bırakmak tuhaf bir yerden köşe kesmek — bu, bir mimari kararının arkasına gizlenen bir iade maliyeti kalemi.
Sıkça Sorulan Sorular
Shopify'ın kendi Hydrogen framework'ü kutudan çıktığı gibi beden önerisi içeriyor mu?
Hayır. Hydrogen, Storefront API'ye karşı özel mağazalar oluşturmak için bir frontend framework'üdür — beden önerisi gibi merchandising özellikleri içermez. Herhangi bir sizing yeteneği, seçtiğiniz bir sizing API'sine bağlı, kendinizin oluşturduğu veya entegre ettiği bir component olarak eklenmelidir.
Hydrogen'da yine de bir Shopify App Store sizing uygulaması kullanabilir miyim?
Sadece uygulama, tema app extension'ından ayrı bir API-öncelikli veya headless entegrasyon yolu sunuyorsa. Pek çok popüler sizing uygulaması yalnızca Liquid temaları için kurulmuştur, bu yüzden uyumluluğu varsaymadan önce vendor'ın dokümantasyonunda açık Hydrogen veya headless desteğini kontrol edin.
Tipik bir Hydrogen beden önerici entegrasyonu ne kadar sürer?
Hydrogen kod tabanına zaten hakim bir ekip için, temel bir ürün sayfası widget entegrasyonu — component artı API çağrısı artı varyant bağlantısı — genellikle birkaç günlük odaklı geliştirme gerektirir. Checkout aşamasında sizing ve tam analitik enstrümantasyon eklemek bu süreyi uzatır, çünkü Checkout Extensibility mağazadan ayrı kısıtlara sahiptir.
Hydrogen için Liquid temadan farklı bir sizing API'sine mi ihtiyacım var?
Hayır — altta yatan sizing API'si ve öneri mantığı her iki yapıda da aynı olabilir. Değişen entegrasyon katmanıdır: bir Liquid tema onu bir tema app extension aracılığıyla tüketirken, Hydrogen aynı API'yi doğrudan çağıran bir component aracılığıyla tüketir.