CTRL: Shopify Plus üzerinde abonelik, bundle ve yeniden tasarlanan drawer cart

Mağaza hakkında

CTRL, protein bazlı yiyecek ve içecekler üreten bir ABD markası; shaker gibi aksesuarları ve düzenli iş birlikleri var: markanın birlikte çalıştığı sanatçı ve içerik üreticilerinin adını taşıyan ürünler. Mağaza Shopify Plus üzerinde çalışıyor ve ben katıldığımda zaten yayındaydı. Tasarımcı yeni düzenleri Figma’da teslim etti; mağaza ekibi bunların düzenlemeye devam edebilecekleri section’lar olarak uygulanmasını ve aboneliklerle bundle’ların müşterinin karşılaştığı her yerde aynı şekilde çalışmasını istiyordu.

Rol ve iş birliği

Projede markanın tasarımcısı ve mağaza yönetim ekibiyle çalışan full-stack Shopify geliştiricisiydim. Tasarım kararları onlarındı; uygulama, sepet mantığı ve uygulama entegrasyonları benimdi.

Temas noktasına göre yapılan iş

Ana sayfa ve section’lar

Figma’daki her yeni düzen, editör ayarlarıyla bir Liquid section olarak geliştirildi; böylece içerik ve sıralama ekip tarafından değiştirilebiliyor. Ana sayfa mevcut ve yeni section’larla yeniden kuruldu; markanın iş birliği yaptığı isimleri ve ürünlerini temanın kendi tarzında sunan slider section’ları da buna dahil. Ardından ana sayfa mobil için yeniden ele alındı.

Drawer cart

Drawer cart yeni tasarıma göre yeniden tasarlandı ve mantığı yeniden yazıldı: eklenen ürünlerin adet gösterimi, satır güncellemeleri ve abonelik ile upsell kontrollerinin göründüğü yerler. Bu önemliydi; çünkü ekip upsell ve abonelik kontrollerinin drawer’da görünmesini istiyordu.

Abonelikler

Abonelik uygulamasının satın alma ve güncelleme seçenekleri ürün detay sayfasına, drawer cart’a ve sepet sayfasına eklendi. Bunun için özel geçici çözümler yerine uygulamanın belgelenmiş JavaScript fonksiyonları kullanıldı; böylece uygulama güncellemeleri entegrasyonu bozmuyor. Abonelik satışlarının ekip tarafından daha kolay yönetilmesi için ek entegrasyonlar yapıldı.

Bundle’lar

Bir bundle uygulaması entegre edildi; bunun için yeni sayfalar ve yapılar kuruldu ve mağazanın geri kalanına bağlandı.

Ürün detay sayfası

Müşterilerin aynı koleksiyondaki ürünler arasında doğrudan ürün sayfasından geçebildiği bir gezinme yapısı. Ürün sayfasına, sepete, checkout’a ve teşekkür sayfasına upsell ve cross-sell alanları eklendi.

Kargo, e-posta ve SEO

Kargo ve ücret yönetimini sadeleştirmek için bir kargo uygulaması entegre edildi ve ürün–bölge eşlemeleriyle yapılandırıldı. Bildirim e-postası şablonları Figma tasarımlarına göre yeniden tasarlandı. Site içi SEO çalışması ve mevcut section’lardaki hataların ayıklanması, storefront’taki performansa yönelik değişikliklerle birlikte iş birliğinin parçasıydı.

Teknik notlar

• Section’lar kendi şema ayarlarını taşıyor; yeni düzenlerde sabit kodlanmış içerik yok.
• Abonelik kontrolleri yalnızca abonelik uygulamasının açık arayüzüne bağlı; bu, bakımı kolay tutuyor.
• Drawer cart davranışı Shopify’ın sepet uç noktalarına göre yazıldı ve belirli bir uygulamadan bağımsız; bir upsell uygulaması eklemek ya da kaldırmak drawer’ı yeniden kurmayı gerektirmiyor.

Sonuç

Tasarımcının niyetiyle örtüşen ve mağaza ekibi tarafından düzenlenebilir kalan bir ana sayfa ve ürün deneyimi; ürün sayfasında, drawer’da ve sepette tutarlı biçimde sunulan abonelik ve bundle’lar; günlük değişiklikler için geliştiriciye ihtiyaç duymadan çalışan kargo, e-posta ve upsell akışları.