Shopify, Ağustos 2024'te e-ticaret dünyasının en büyük teknik geçişlerinden birini gerçekleştirdi: checkout.liquid dosyası emekli edildi. Yıllarca Shopify Plus mağazalarının checkout'larını özelleştirmek için kullanılan bu dosya artık çalışmıyor. Yerine tamamen yeni bir mimari geldi: Checkout Extensibility.
Bu değişim sıradan bir güncelleme değil — Shopify'ın checkout mimarisini temelden yeniden tasarlamasıydı. Eski sistem liquid tabanlı, full-page reload'lara dayanan, performans açısından sınırlı bir yapıydı. Yeni sistem React-based, server-side rendered, edge-optimized ve artık tüm Shopify ekosistemi ile entegre çalışıyor.
Bu rehberde Checkout Extensibility'nin ne olduğunu, hangi bileşenlerden oluştuğunu, eski checkout.liquid'den nasıl geçiş yapacağınızı ve gerçek dünya senaryolarında nasıl kullanacağınızı detaylı olarak anlatıyoruz. Shopify Plus developer'ları, merchant'lar ve agency'ler için teknik deep-dive.
Checkout Extensibility Nedir?
Checkout Extensibility, Shopify'ın checkout'u özelleştirmek için sunduğu yeni nesil geliştirme mimarisidir. Eski checkout.liquid yaklaşımının aksine, bu yeni sistem modüler, performant ve Shopify'ın güvenlik/güncelleme akışıyla tam entegre çalışır.
Eski vs Yeni: Temel Farklar
Eski checkout.liquid döneminde (2023 öncesi):
- Liquid template engine ile checkout HTML'i yeniden yazılırdı
- JavaScript eklemek için inline script tag'leri kullanılırdı
- Her Shopify checkout güncellemesinde customization'lar kırılma riski taşırdı
- Performance hit ciddiydi — checkout conversion rate'ini düşürebiliyordu
- Security audit zor, PCI compliance riskli
- Sadece Shopify Plus merchant'ları customization yapabiliyordu
Yeni Checkout Extensibility döneminde (2024 sonrası):
- React-based component'ler ile checkout extension point'lerine custom UI eklenir
- Shopify Functions ile business logic (iskonto, kargo, validation) kodla yazılır
- Her şey Shopify'ın Extension framework'ünde paketlenir, App Store'da publish edilebilir
- Shopify platform güncellemeleri customization'ları kırmaz — forward-compatible
- Performance Shopify tarafından garanti edilir, edge-optimized rendering
- PCI DSS Level 1 compliance Shopify'ın sorumluluğunda
Checkout Extensibility'nin 4 Ana Bileşeni
Yeni mimari 4 farklı katmandan oluşur. Her katman farklı bir use case için tasarlanmıştır ve bazıları Shopify Plus gerektirir, bazıları tüm plan seviyelerinde kullanılabilir.
1. Checkout UI Extensions (React + JavaScript)
UI Extensions, checkout'a görsel ve etkileşimli bileşenler eklemek için kullanılır. React ile yazılırlar, Shopify tarafından sağlanan bir UI component library (Polaris tabanlı) kullanırlar ve belirli checkout "extension point"lerine yerleştirilirler.
Popüler kullanım senaryoları:
- Custom input fields: VKN, TCKN, sipariş notu, özel mesaj alanları
- Promosyon banner'ları: "100€ üstü alımlarda kargo ücretsiz" gibi dinamik mesajlar
- Upsell / cross-sell: Sepete ürün önerisi, last-chance ekleme
- Hediye kartı önizleme: Özelleştirilebilir hediye notu, teslimat tarihi seçimi
- Güven rozetleri: Garanti, iade politikası, sertifika logoları
- Custom delivery instructions: Apartman numarası, kat, özel not
Extension point'ler checkout'un belirli noktalarına karşılık gelir: sipariş özeti yakını, ödeme adımı öncesi, teslimat seçenekleri içinde, vb. Her extension point kendi context'ine erişim sağlar.
2. Shopify Functions (Rust veya JavaScript)
Shopify Functions, checkout'ta çalışan server-side business logic'tir. React UI layer'ından ayrı olarak, backend'de milisaniyelerde çalışır ve kritik kararları verir:
- Discount Functions: Karmaşık iskonto kuralları (tiered, conditional, bundle-based)
- Cart/Checkout Validation: Minimum sepet, ürün kombinasyonu kısıtlamaları
- Delivery Customization: Kargo seçeneklerini filtreleme, reorder, rename
- Payment Customization: Ödeme yöntemlerini koşula göre göster/gizle
- Order Routing: Siparişi hangi depodan gönderileceğini belirleme
Rust veya JavaScript ile yazılabilir, WebAssembly'ye derlenir ve Shopify'ın edge node'larında çalışır. Çok hızlıdır — milisaniye altı execution.
3. Checkout App Blocks
App Blocks, merchant'ın Shopify Admin üzerinden sürükle-bırak ile checkout'a ekleyebileceği UI bileşenleridir. Developer bir kez yazar, merchant istediği extension point'e yerleştirebilir.
Bu yaklaşım özellikle üçüncü parti uygulamalar için güçlüdür. Örneğin bir "Trust Badges" uygulaması, merchant'ın checkout'un herhangi bir yerine rozet yerleştirmesine izin verir.
4. Branding API
Branding API, checkout'un görsel kimliğini (renkler, fontlar, spacing, corner radius, button styles) JSON konfigürasyon dosyası üzerinden tanımlamaya imkân verir. Shopify Admin'den değil, kod ile yönetilir, versiyon kontrolü yapılabilir.
Gerçek Dünya Örnekleri: Checkout Extension Point'leri
Shopify 30+ extension point sunar. En çok kullanılanlar:
- purchase.checkout.block.render: Herhangi bir yere custom block
- purchase.checkout.cart-line-item.render-after: Sepet satırı altına custom bilgi
- purchase.checkout.delivery-address.render-before: Teslimat adresi üstü (örn. VKN input)
- purchase.checkout.shipping-option-list.render-after: Kargo seçenekleri altı
- purchase.checkout.payment-method-list.render-before: Ödeme yöntemleri üstü
- purchase.checkout.reductions.render-after: İskonto kodu alanı altı
- purchase.thank-you.block.render: Thank you sayfası
Örnek: VKN Input Alanı Nasıl Eklenir?
Türkiye'deki B2B müşteriler için checkout'a Vergi Kimlik Numarası (VKN) alanı eklemek yaygın bir ihtiyaçtır. Eski checkout.liquid'de bu liquid + jQuery ile yapılırdı. Yeni sistemde React ile bir UI Extension yazarsınız.
Temel iş akışı şöyledir:
- Shopify CLI ile yeni bir extension oluşturun:
shopify app generate extension - Extension type olarak "Checkout UI" seçin
- React component yazın — Shopify'ın
@shopify/ui-extensions-react/checkoutkütüphanesini kullanın - Extension target'ı belirleyin (örn.
purchase.checkout.delivery-address.render-after) - Text input, validation ve error handling ekleyin
- VKN değerini
applyMetafieldChangeile order metafield'ına kaydedin - Local test için Shopify development store kullanın
- Deploy:
shopify app deploy - Shopify Admin → Settings → Checkout → Customize → Add app'ten extension'ı checkout'a yerleştirin
Backend'de sipariş oluştuktan sonra webhook ile VKN'yi yakalayıp e-Fatura entegratörünüze (Logo, Nilvera, Uyumsoft vb.) gönderebilirsiniz. Bu entegrasyonu Shopify e-Fatura rehberimizde detaylı anlatıyoruz.
Eski Checkout.liquid'den Geçiş Planı
Hâlâ checkout.liquid customization'ları olan Shopify Plus mağazaları için migration zorunluluktur. Tipik bir geçiş projesi 4-8 hafta sürer ve şu aşamalardan oluşur:
Aşama 1: Mevcut Customization Envanteri (1 Hafta)
Eski checkout.liquid'inizde ne var? Tüm liquid code, JavaScript, üçüncü parti script'leri ve asset'leri listeleyin. Her customization'ın amacını, etki alanını ve iş değerini dökümante edin.
Aşama 2: Yeni Mimariye Haritalama (1 Hafta)
Her customization'ı yeni mimarideki karşılığına eşleyin:
- UI changes → Checkout UI Extensions
- Discount logic → Shopify Functions (Discount)
- Shipping filters → Shopify Functions (Delivery Customization)
- Payment filters → Shopify Functions (Payment Customization)
- Visual branding → Branding API
- Üçüncü parti script'ler → Pixel API veya App Extensions
Aşama 3: Geliştirme (2-4 Hafta)
Shopify CLI ile yeni extensions yazın. Development store'da test edin. Code review ve QA yapın. Her extension için Shopify'ın ESLint kurallarını takip edin.
Aşama 4: Staging Deployment ve Test (1 Hafta)
Test mağazasına deploy edin, checkout'u end-to-end test edin. Tüm ödeme yöntemleri, kargo senaryoları ve edge case'leri kontrol edin. Shopify'ın Checkout Profile feature'ı ile yeni checkout'u A/B test edebilirsiniz.
Aşama 5: Production Rollout (1 Hafta)
Canlıya aşamalı rollout yapın — önce %10 traffic, sonra %50, sonra %100. Shopify Analytics'te conversion rate'i izleyin, anomali varsa rollback edin.
Checkout Extensibility'nin Sınırları ve Dikkat Edilmesi Gerekenler
Her yeni sistem gibi Checkout Extensibility'nin de bazı sınırları var. Projenize başlamadan bilmeniz gerekenler:
Sınırlar
- Tüm customization'lar yeni mimariye taşınamaz: Bazı exotic liquid customization'ları (full template rewrite gibi) yeniden tasarım gerektirir
- Extension point'ler sınırlı: 30+ extension point var ama checkout'un her yeri açık değil. Shopify zamanla daha fazla ekliyor
- Shopify Plus gerekliliği: Advanced customization'lar (özel ödeme yöntemi, kapsamlı branding) sadece Plus'ta
- Rate limits: Shopify Functions invocation başına 11ms execution limiti var, ağır hesaplamalar edge'de yapılamaz
- Third-party integrations: Bazı eski üçüncü parti uygulamalar hâlâ checkout.liquid'e bağımlı — muhtemelen güncellenmişlerdir ama kontrol edin
Performance Considerations
Yeni mimari performans odaklı olsa da, kötü yazılmış UI Extensions hâlâ checkout'u yavaşlatabilir:
- Her extension bağımsız bir JavaScript bundle'dır — fazla sayıda extension bundle size'ı artırır
- Extension'lar içinde external API çağrıları async olmalı ve hata yönetimi sağlam olmalı
- Shopify Polaris component library kullanın, custom CSS'ten kaçının
- React re-render'ları optimize edin — useMemo, useCallback kullanın
Checkout Extensibility Migration Kontrol Listesi
- ✅ Mevcut checkout.liquid customization'larının envanteri çıkarıldı
- ✅ Her customization yeni mimarideki karşılığına haritalandı
- ✅ Shopify CLI kuruldu ve development store hazırlandı
- ✅ UI Extensions React + TypeScript ile yazıldı
- ✅ Shopify Functions (Discount, Delivery, Payment) geliştirildi
- ✅ Branding API ile görsel kimlik tanımlandı
- ✅ Tüm extension'lar Shopify ESLint kurallarını geçiyor
- ✅ Staging'de end-to-end test yapıldı (tüm ödeme yöntemleri, kargo senaryoları)
- ✅ Üçüncü parti uygulamaların yeni mimariyle uyumluluğu doğrulandı
- ✅ Checkout Profile ile A/B test kuruldu
- ✅ Canlıya aşamalı rollout planlandı (%10 → %50 → %100)
- ✅ Analytics izleme (conversion rate, checkout abandonment) aktif
- ✅ Rollback planı hazır
Shopify Plus Merchantları İçin Kritik Uyarı
Eğer hâlâ checkout.liquid kullanıyorsanız, Shopify bunu artık aktif olarak desteklemiyor. Yeni özellikler gelmeyecek, güvenlik açıkları düzeltilmeyecek ve Shopify'ın yeni checkout özellikleri (Shop Pay, One-Page Checkout, Shopify Magic) eski sistemde çalışmayacak.
2024 sonrası yeni kurulan Shopify Plus mağazalarında zaten checkout.liquid seçeneği bulunmuyor. Mevcut merchant'lar içinse Shopify, migration için resmi bir deadline açıkladı ve dokümantasyonunu yayınladı. Ertelemek, checkout conversion rate'inizi düşürmekten başka bir şey değil.
34Devs Checkout Migration Hizmeti
34Devs olarak 2024'ten bu yana 20+ Shopify Plus mağazasının checkout migration'ını tamamladık. Her projede mevcut customization envanterini çıkardık, yeni mimariye haritaladık, UI Extensions ve Shopify Functions yazdık, staging'de kapsamlı test yaptık ve canlıya sıfır downtime ile geçirdik.
Eğer hâlâ checkout.liquid kullanıyorsanız ve migration planı yapmadıysanız, acele etmenizin zamanı geldi. Shopify Plus ajansımızla ücretsiz danışmanlık görüşmesi için bize ulaşabilirsiniz. İlk 45 dakikalık görüşmede mevcut checkout'unuzu analiz eder, migration fizibilitesini ve tahmini süreyi birlikte değerlendiririz.
Ayrıca Shopify Plus B2B yapılandırması ve özel iş akışları için B2B Wholesale Portal rehberimize göz atabilirsiniz.
Sıkça Sorulan Sorular
Checkout.liquid hâlâ çalışıyor mu?
Shopify, Ağustos 2024'te checkout.liquid'i resmi olarak deprecate etti. Mevcut kurulumlar bir süre daha çalışacak ama yeni customization yapılamaz ve Shopify'ın yeni checkout özellikleri eski sistemde görünmez. Migration ertelenmemelidir.
Checkout UI Extensions yazmak için hangi bilgiler gerekir?
React ve TypeScript temel bilgisi yeterli. Shopify'ın @shopify/ui-extensions-react kütüphanesi kendi component'lerini sağlar (Polaris benzeri). Shopify CLI kullanımı ve development store workflow'u öğrenilmeli.
Shopify Functions ücretli mi?
Hayır. Shopify Functions Shopify'ın sunduğu ücretsiz bir özelliktir, ancak pratikte developer kaynakları gerektirir. Her invocation'da 11ms execution limiti vardır ve daily invocation quota ile gelir.
Eski checkout.liquid customization'larım bozulacak mı?
Shopify bir süre daha eski sistem çalışacağını söylese de, yeni checkout özellikleri eski sistemde görünmez ve bazı güncellemeler eski customization'ları kırabilir. Migration planı şu an yapılmalı.
Migration maliyeti ne kadar?
Basit bir migration (3-5 customization) 8.000-15.000 EUR bandında teslim edilir. Kompleks kurulumlar (B2B, özel ödeme akışları, çok dilli checkout) 20.000-40.000 EUR arasındadır. Gerçek fiyat customization sayısına ve karmaşıklığına bağlıdır.
Checkout Extensibility tüm Shopify planlarında çalışır mı?
Hayır. Checkout customization Shopify Plus özelliğidir. Regular Shopify planları checkout'u değiştirmek için üçüncü parti app'lere güvenir, ancak bu app'ler de artık Checkout Extensibility framework'ünü kullanır.
Shopify App Store'daki eski checkout app'ler uyumlu mu?
2024 öncesi yazılmış app'lerin büyük bölümü güncellendi. Kullandığınız app'i yayıncıya kontrol ettirin — eski checkout.liquid bağımlılığı olanlar kaldırılmış veya migration yapılmış olmalı.
A/B testing için ne kullanmalıyım?
Shopify'ın yerleşik "Checkout Profile" özelliği ile aynı anda farklı checkout varyantlarını farklı müşteri segmentlerine gösterebilirsiniz. Google Optimize gibi üçüncü parti araçlar checkout seviyesinde çalışmaz.
