Shopify Checkout Genişletilebilirliği: 2026 İçin Tam Kılavuz

Shopify, ödeme yoluyla yıllık GMV'de 235 milyar doların üzerinde işlem yapıyor. checkout.liquid'in kullanımdan kaldırılması ve Checkout Genişletilebilirliğinin tam olarak kullanıma sunulmasıyla birlikte, her Shopify satıcısının yeni sistemin nasıl çalıştığını, neleri mümkün kıldığını ve dönüşümleri kaybetmeden nasıl geçiş yapılacağını anlaması gerekiyor.

Bu kılavuz, Shopify Checkout Genişletilebilirliğinin tüm önemli bileşenlerini kapsar: Kullanıcı arayüzü uzantıları, Shopify İşlevleri, Markalama API'si, ödeme blokları, ödeme ve kargo özelleştirmesi ve ödemeyi rekabet avantajına dönüştüren stratejiler.

Temel Çıkarımlar

• Checkout Genişletilebilirliği, checkout.liquid'i, kullanıcı arayüzü uzantıları ve Shopify İşlevleri üzerine kurulu, güvenli, yükseltme açısından güvenli bir mimariyle değiştirir
• Ödeme kullanıcı arayüzü uzantıları, ödeme hedefleri aracılığıyla oluşturulan React tabanlı bileşenleri kullanan korumalı bir ortamda çalışır
• Shopify İşlevleri, harici API çağrıları olmadan indirim mantığını, ödeme yöntemi filtrelemeyi ve kargo ücreti manipülasyonunu sunucu tarafında özelleştirmenize olanak tanır
• Checkout Branding API'si, uzantı koduna dokunmadan renkler, tipografi, aralık ve düzen üzerinde ayrıntılı kontrol sağlar
• Shopify Plus satıcıları için checkout.liquid'den geçiş zorunludur ve dönüşüm düşüşlerini önlemek için sistematik olarak planlanmalıdır.
• Özel ödeme akışları, uygun UX testiyle uygulandığında dönüşüm oranlarını %8-15 artırabilir

Ödeme Genişletilebilirliği Nedir?

Ödeme Genişletilebilirliği, ödeme deneyimini özelleştirmeye yönelik Shopify çerçevesidir. Eski checkout.liquid yaklaşımını üç sütun etrafında tasarlanmış bir sistemle değiştiriyor:

1. Ödeme Kullanıcı Arayüzü Uzantıları --- Ödeme akışındaki belirli konumlarda oluşturulan React tabanlı bileşenler
2. Shopify İşlevleri --- İş kurallarını özelleştirmek için Shopify altyapısında çalışan sunucu tarafı mantığı
3. Ödeme Markalama API'si --- Ödeme işleminin görsel görünümünü kontrol etmeye yönelik bir GraphQL API'si

Satıcılara tam HTML/CSS/JS kontrolü sağlayan ancak yükseltme ve güvenlik riskleri yaratan checkout.liquid'den farklı olarak Checkout Genişletilebilirliği, Shopify'ın optimize etmeye devam edebileceği kontrollü bir ortamda özelleştirme sağlar.

Ödeme Kullanıcı Arayüzü Uzantıları

Nasıl Çalışırlar?

Ödeme kullanıcı arayüzü uzantıları, Shopify Kullanıcı Arayüzü uzantı çerçevesi kullanılarak oluşturulmuştur. Ödeme akışında önceden tanımlanmış uzantı hedeflerinin (uzantı noktaları olarak da adlandırılır) içinde oluşturulurlar. Her hedef belirli bir konuma karşılık gelir: Gönderim yöntemi seçiciden önce, sipariş özetinden sonra, ödeme bölümünün içinde vb.

Uzantılar, Shopify tarafından sağlanan sınırlı sayıda kullanıcı arayüzü bileşenini kullanır:

| Bileşen | Amaç | Yaygın Kullanım Durumları | |-----------|------------|------| | Afiş | Uyarıları veya promosyonları görüntüleyin | Ücretsiz gönderim eşikleri, sınırlı süreli teklifler | | BlockStack / InlineStack | Düzen kapları | Özel alanları ve içeriği düzenleme | | Metin Alanı | Metin girişi koleksiyonu | Hediye mesajları, özel talimatlar | | Onay Kutusu | Boole seçimleri | Bülten kaydı, şartların kabulü | | Seç | Açılır seçimler | Teslim tarihi tercihleri ​​| | Başlık / Metin | Tipografi | Bölüm başlıkları, yardımcı metin | | Resim | Görsel içerik | Güven rozetleri, marka unsurları | | Bölücü | Görsel ayırma | Bölüm sonları |

Ödeme Akışındaki Uzantı Hedefleri

Ödeme akışı, bölümlere göre gruplandırılmış düzinelerce uzantı hedefi sunar:

Ödeme işleminin tamamından önce ve sonra --- satın alma.checkout.header.render-after ve satın alma.checkout.footer.render-after, ödeme işleminin tamamına içerik eklemenizi sağlar.

Shipping address section --- Render content before or after the shipping address form with purchase.checkout.shipping-address.render-before and render-after targets.

Gönderim yöntemi bölümü --- Gönderim seçeneği listesinden önce veya sonra başlıklar, bilgiler veya özel kullanıcı arayüzü ekleyin.

Ödeme yöntemi bölümü --- Ödeme yöntemi seçicinin etrafına güven rozetleri, ödeme bilgileri veya özel alanlar ekleyin.

Sipariş özeti --- Sepet satır öğelerinin ve sipariş toplamının yanına ek satışlar, çapraz satışlar veya bilgilendirici içerik ekleyin.

Ödeme Kullanıcı Arayüzü Uzantısı Oluşturma

Tipik bir ödeme kullanıcı arayüzü uzantısı projesi, checkout_ui uzantı türüyle Shopify CLI kullanılarak iskele oluşturulur. Uzantı giriş noktası, bir bileşeni ödeme akışındaki belirli bir hedef konuma kaydetmek için reactExtension işlevini kullanır.

Örneğin, ücretsiz gönderim banner uzantısı, sepet alt toplamını hesaplamak, bunu ücretsiz gönderim eşiğinizle karşılaştırmak ve bir başarı mesajını veya müşterinin ne kadar daha eklemesi gerektiğini gösteren bir Banner bileşeni oluşturmak için useCartLines kancasını kullanır. Bu tek uzantı genellikle ortalama sipariş değerini %5-12 artırır.

Uzantı API Kancaları

Shopify, ödeme durumuna erişim için zengin bir kanca seti sağlar:

• useCartLines() --- Sepetteki tüm öğelere fiyatlar, miktarlar ve ürün meta verileriyle erişin
• useBuyerJourney() --- Ödeme ilerlemesini durdurun ve doğrulayın, geçersiz gönderimleri engelleyin
• useShippingAddress() --- Koşullu mantık için teslimat adresini okuyun
• useApplyDiscountCodeChange() --- Koşullara göre indirim kodlarını programlı olarak uygulayın
• useApplyMetafieldChange() --- Siparişin yerine getirilmesi iş akışları için özel verileri siparişte saklayın
• useExtensionApi() --- Yerelleştirme ve oturum belirteçleri dahil olmak üzere tam uzantılı API'ye erişin

Pratik Uzantı Örnekleri

Hediye mesajı koleksiyonu: Shipping-address.render-after hedefine bir TextField bileşeni yerleştirin. İletiyi bir sipariş meta alanı olarak depolamak için useApplyMetafieldChange öğesini kullanın. Sipariş karşılama ekibi paketleme sırasında meta alanı okur.

Teslimat tarihi seçici: Gönderim taşıyıcınızın HDS verileri kullanılarak hesaplanan mevcut tarihleri ​​içeren bir Select bileşeni kullanın. Seçilen tarihi bir meta alan olarak saklayın ve yerine getirme planlaması için kullanın.

Bağlılık puanları ekranı: Geri gelen müşterilere mevcut bağlılık puanlarını gösterin ve useApplyDiscountCodeChange'i kullanarak puanları indirim olarak uygulamalarına olanak tanıyın.

Shopify İşlevleri

Hangi Shopify İşlevlerinin Yerini Alır?

Before Shopify Functions, custom business logic required external API calls that added latency and failure points to checkout. İşlevler doğrudan Shopify altyapısında çalışır ve ağ ek yükü olmadan 5 milisaniyeden kısa sürede yürütülür.

İşlev Türleri

| İşlev Türü | Neleri Özelleştirir | Örnek | |---------------|-----------|-----------| | Ürün İndirimi | Ürünlerde otomatik indirimler | Karmaşık katman mantığıyla 2 alana 1 bedava | | İndirim Siparişi | Siparişin tamamında indirimler | Eşiğin üzerinde harcama yapın, hariç tutmalarla %15 tasarruf edin | | Nakliye İndirimi | Gönderim ücretlerinde indirimler | Sadakat üyeleri için ücretsiz gönderim | | Ödeme Özelleştirme | Ödeme yöntemi görünürlüğü ve siparişi | Yüksek değerli siparişler için COD'yi gizle | | Teslimat Özelleştirme | Gönderim yöntemi adları ve sıralama | Taşıyıcıları yeniden adlandırın, önceliğe göre yeniden sıralayın | | Sepet Dönüşümü | Sepet içeriğini değiştirin | Ürünleri otomatik olarak paketleyin, kitleri genişletin | | Yerine Getirme Kısıtlamaları | Yerine getirme seçeneklerini kısıtla | Yüksek değerli öğeler için imza gerektir |

İşlevler Nasıl Çalışır?

İşlevler Rust (WebAssembly'ye derlenmiş) veya JavaScript ile yazılmıştır. Her işlev, ilgili ödeme verilerini içeren bir giriş nesnesi alır ve uygulanacak değişiklikleri açıklayan bir işlem dizisini döndürür.

Ödeme özelleştirmesi için işlev, mevcut tüm ödeme yöntemlerini ve sepet verilerini alır, ardından iş kurallarınıza göre belirli yöntemler için gizleme veya yeniden sıralama işlemlerini döndürür. Teslimatın özelleştirilmesi için işlevler, gönderim seçeneklerini yeniden adlandırabilir, bunları önceliğe göre yeniden sıralayabilir veya sepet içeriğine veya teslimat adresine göre gizleyebilir.

İşlev Sınırlamaları

• Yürütme süresi: maksimum 5ms
• Bellek: maksimum 10MB
• Giriş boyutu: İşlev giriş sorgusu ile sınırlıdır
• Ağ çağrısı yok: İşlevler HTTP isteğinde bulunamaz
• Kalıcı durum yok: Her çağrı durum bilgisizdir

Bu sınırlamalar kasıtlıdır. Onlarca aktif fonksiyonla bile ödeme performansının tutarlı kalmasını sağlarlar.

Ödeme Markalama API'sı

Checkout Branding API, uzantı oluşturmadan görsel özelleştirme sağlar. Şunları kontrol eder:

Renkler --- Birincil ve ikincil marka renkleri, arka plan renkleri, metin ve bağlantı renkleri ile hatalar, başarı ve uyarılara ilişkin durum renkleri.

Tipografi --- Shopify yazı tipi kitaplığından yazı tipi ailesi veya özel yazı tipleri, başlıklar, gövde ve etiketler için yazı tipi boyutları, ayrıca yazı tipi ağırlıkları ve satır yükseklikleri.

Düzen ve aralık --- Düğmeler, girişler ve kapsayıcılar için köşe yarıçapı, bölümler arasındaki boşluklar ve kenarlık stilleri.

Logo ve site simgesi --- Konum ve boyutlandırma kontrollerine sahip ödeme başlığı logosu.

Branding API'sine checkoutBrandingUpsert GraphQL mutasyonu aracılığıyla erişilir. Tasarım sisteminizi belirten bir profil ve markalama giriş nesnesini iletirsiniz: renk şemaları, tipografi ayarları ve köşe yarıçapı değerleri. Bu, görsel markalamayı işlevsel özelleştirmeden ayırır; böylece, uzantı kodunu değiştirmeden ödeme görünümünüzü güncelleyebilirsiniz.

checkout.liquid'den geçiş

Geçiş Neden Zorunludur

Shopify, checkout.liquid için kesin kullanımdan kaldırma zaman çizelgeleri belirlemiştir. Tüm Shopify Plus satıcılarının Checkout Genişletilebilirliği'ne geçmesi gerekir.

1. Güvenlik: checkout.liquid, ödeme sırasında rastgele JavaScript yürütülmesine izin vererek XSS ve veri sızma riskleri oluşturur
2. Performans: Optimize edilmemiş checkout.liquid özelleştirmeleri sayfa yüklemelerini yavaşlatır
3. Yükseltme yolu: Satıcılar ödeme şablonunun tamamını geçersiz kıldığında Shopify ödeme iyileştirmelerini sunamaz

Geçiş Kontrol Listesi

| checkout.liquid Özelliği | Ödeme Genişletilebilirliği Eşdeğeri | |--------------------------|-------------------------------------| | Özel CSS stili | Ödeme Markalama API'sı | | Güven rozeti resimleri | Görüntü bileşenli Ödeme Kullanıcı Arayüzü uzantısı | | Hediye mesajı alanı | TextField ile ödeme arayüzü uzantısı | | Özel indirim mantığı | Shopify İşlevi (indirim türü) | | Ödeme yöntemini gizleme | Shopify İşlevi (ödeme özelleştirme) | | Gönderim yönteminin yeniden adlandırılması | Shopify İşlevi (teslimat özelleştirme) | | Sipariş notu alanı | TextField + metafield içeren Ödeme Kullanıcı Arayüzü uzantısı | | Analitik komut dosyaları | Web Pikselleri (Müşteri Etkinlikleri) | | Özel doğrulama | doğrulama mantığıyla BuyerJourney kancasını kullanın |

Adım Adım Geçiş Süreci

1. Mevcut checkout.liquid'inizi denetleyin --- Her özelleştirmeyi, komut dosyasını ve görsel değişikliği belgeleyin
2. Her özelleştirmeyi kategorilere ayırın --- Kullanıcı arayüzü uzantılarına, İşlevlere, Markalama API'sine veya Web Piksellerine eşleyin
3. Geliştirme aşamasında derleyin ve test edin --- Uzantıları bir geliştirme mağazasına karşı yerel olarak test etmek için Shopify CLI'yi kullanın
4. Adımlı olarak dağıtın --- Önce bir test mağazasında Ödeme Genişletilebilirliğini etkinleştirin, ardından üretime sunun
5. Dönüşüm oranlarını izleyin --- En az iki hafta boyunca geçişten önce ve sonra ödeme tamamlama oranlarını karşılaştırın
6. Yineleyin --- Uzantı yerleştirmeyi ve mesajlaşmayı optimize etmek için A/B testini kullanın

Ödeme ve Kargo Özelleştirmesi

Ödeme Özelleştirme Stratejileri

• Bölge bazlı ödeme yöntemleri: Gönderim adresine göre yerel ödeme yöntemlerini (Hollanda'da iDEAL, Brezilya'da PIX) gösterir
• Sipariş değeri eşikleri: Düşük değerli veya çok yüksek değerli siparişler için şimdi al-sonra öde'yi gizle
• Müşteri etiketi filtreleme: Yalnızca etiketli B2B müşterileri için toptan ödeme koşullarını göster
• Ürün bazlı kısıtlamalar: Dijital ürünler veya abonelikler için belirli ödeme yöntemlerini devre dışı bırakın

Gönderi Özelleştirme Stratejileri

• Operatör yeniden adlandırma: Teknik operatör adlarını "Hızlı Teslimat (3-5 iş günü)" gibi markalı adlarla değiştirin
• Ücret sıralama: Tercih edilen gönderim yöntemlerini listenin en üstüne itin
• Koşullu kullanılabilirlik: Büyük boyutlu ürünler veya kırsal adresler için ekspres gönderimi gizleyin
• Teslim tarihi tahmini: Her gönderim seçeneğinin yanında tahmini teslimat tarihlerini görüntülemek için teslimat özelleştirme işlevlerini kullanın

Dönüşüm Optimizasyonu İpuçları

Ödeme Sürtüşmesini Azaltın

• Otomatik adres tamamlama özelliğini kullanın (Shopify ödeme sayfasında yerleşiktir) ve tüm hedef pazarlarda çalıştığından emin olun
• Geri dönen müşteriler için Shop Pay'i etkinleştirin; ödeme süresini 4 kata kadar azaltır
• Özel alanların sayısını en aza indirin; her ek alan tamamlanma oranlarını %3-5 azaltır

Ödeme Sırasında Güven Oluşturun

• Ödeme altbilgi alanına güvenlik rozetleri ve güven sinyalleri yerleştirin
• Ödeme bölümünün yanında net iade politikası özetleri gösterin
• Müşteri inceleme sayılarını veya memnuniyet derecelendirmelerini görüntüleyin

Satın Alma Sonrası Uzatmalardan Yararlanın

• Yukarı satış teklifleri için teşekkür sayfası oluşturma hedefini kullanın
• Sipariş onayı sayfasında abonelik kayıt istemlerini göster
• Satın alma işleminden hemen sonra NPS geri bildirimlerini toplayın

Sıkça Sorulan Sorular

Ödeme Genişletilebilirliği tüm Shopify planlarında mevcut mu?

Ödeme kullanıcı arayüzü uzantıları ve Shopify İşlevleri tüm Shopify planlarında mevcuttur. Ancak tam ödeme markalama özelleştirmesi gibi bazı gelişmiş özellikler Shopify Plus ile sınırlıdır. Temel markalama (renkler ve yazı tipleri), tema düzenleyici aracılığıyla tüm planlarda mevcuttur.

checkout.liquid özelleştirmelerim çalışmayı durduracak mı?

Evet. Shopify, checkout.liquid için kullanımdan kaldırma zaman çizelgeleri belirlemiştir. Geçiş yapmamış olan Shopify Plus satıcıları otomatik olarak varsayılan ödeme deneyimine geçirilecektir. Ödeme işleminizin kontrolünü elinizde tutmak için geçişinizi şimdi planlayın.

Ödeme Genişletilebilirliği'nde üçüncü taraf JavaScript'i kullanabilir miyim?

Hayır. Ödeme kullanıcı arayüzü uzantıları korumalı alan ortamında çalışır ve harici komut dosyalarını yükleyemez. Bu bir güvenlik önlemidir. Harici hizmet entegrasyonuna ihtiyacınız varsa sunucu tarafı mantığı için Shopify İşlevlerini veya analiz takibi için Web Piksellerini kullanın.

Shopify İşlevleri ödeme hızını nasıl etkiler?

Shopify İşlevleri, Shopify altyapısında 5 milisaniyeden kısa sürede yürütülür. Değiştirdikleri harici API çağrılarından önemli ölçüde daha hızlıdırlar. Çoğu satıcı, komut dosyalarından İşlevler'e geçiş yaptıktan sonra ödeme performansında iyileşmeler görüyor.

Geçiş yaptıktan sonra checkout.liquid'e geri dönebilir miyim?

Geçiş döneminde mağaza ayarlarınızda checkout.liquid ve Checkout Extensibility arasında geçiş yapabilirsiniz. Ancak Shopify, checkout.liquid'i mağazanız için tamamen kullanımdan kaldırdığında geri alma işlemi artık mümkün olmayacaktır.

Shopify Checkout'unuzu Dönüştürün

Ödeme Genişletilebilirliği, Shopify ticaretinin geleceğini temsil eder. Checkout.liquid'den geçiş yapmanız, özel ödeme akışları oluşturmanız veya dönüşüm oranlarınızı optimize etmeniz gerekiyorsa, yeni çerçeve, markanıza ve iş gereksinimlerinize uygun bir ödeme deneyimi oluşturmanızı sağlayacak araçları sağlar.

ECOSIRE, Shopify mağaza kurulumu, özel tema geliştirme ve dönüşüm optimizasyonu konularında uzmanlaşmıştır. Shopify Plus'ta gelişmiş ödeme özelleştirmesi için Shopify Plus hizmetlerimizi keşfedin.

Ödeme deneyiminizi yükseltmeye hazır mısınız? Ödeme genişletme projenizi görüşmek için Shopify uzmanlarımızla iletişime geçin.