Shopify koleksiyon sayfasında renk örnekleri
Bir varyant resim uygulaması kurdunuz ve ürün sayfanız harika görünüyor. Renk swatch’ları çalışıyor, galeri filtreleniyor. Ama koleksiyon sayfasına gittiğinizde ürün kartlarında hiç swatch yok. Hala tek bir resim ve standart ürün bilgisi görünüyor.
Bu bir hata değildir. Ürün sayfası swatch’ları ve koleksiyon sayfası swatch’ları tamamen farklı özelliklerdir. Farklı teknik zorluklar içerir ve genellikle farklı uygulamalar tarafından sağlanır. Bu yazıda ikisi arasındaki farkı, koleksiyon sayfası swatch’larının nasıl çalıştığını ve mağazanız için doğru çözümü anlatıyoruz.
Bu yazıda
- Ürün sayfası ve koleksiyon sayfası neden farklı?
- Ürün sayfasında ne olur?
- Koleksiyon sayfasında ne olur?
- Koleksiyon swatch’ları için iki yaklaşım
- Combined Listings yöntemi
- Ürün sayfası + koleksiyon sayfası birlikte
- Video
- Sık sorulan sorular
Ürün sayfası ve koleksiyon sayfası neden farklı?
Shopify’da ürün sayfası ve koleksiyon sayfası tamamen farklı yapılardır. Ürün sayfasında tek bir ürünün tüm verileri yüklenir: varyantlar, resimler, fiyatlar, stok durumları. Bir uygulama bu verileri okuyarak galeriyi filtreleyebilir ve swatch’ları render edebilir.
Koleksiyon sayfasında ise bir ürün ızgarası (grid) vardır. Her ürün kartı ayrı bir üründür. Kart üzerinde swatch göstermek için her ürünün varyant verilerine erişmek, renk bilgilerini çıkarmak ve her karta ayrı swatch’lar render etmek gerekir. Bu tamamen farklı bir teknik zorluktur.
Bir ürün sayfası uygulaması tek bir ürünün DOM yapısıyla çalışır. Bir koleksiyon sayfası uygulaması ise bir sayfadaki onlarca ürün kartıyla aynı anda çalışmak zorundadır. JavaScript mantığı, veri erişim biçimi ve render yaklaşımı tamamen farklıdır.
Ürün sayfasında ne olur?
Rubik Variant Images gibi varyant resim uygulamaları ürün sayfasında çalışır. Müşteri bir renk swatch’ına tıkladığında galeri o rengin resimlerini gösterir, diğerlerini gizler. Bu filtreleme istemci tarafında gerçekleşir.
Ürün sayfasında ayrıca swatch özelleştirme (şekil, boyut, çerçeve), varyant başına birden fazla resim, ortak resimler ve tükenen varyant gösterimi gibi özellikler de bulunur. Bunların tümü tek bir ürün bağlamında çalışır.
Koleksiyon sayfasında ne olur?
Koleksiyon sayfasındaki swatch’lar farklı bir amaca hizmet eder. Müşteri ürüne tıklamadan önce mevcut renk seçeneklerini görmek ister. Bir renk swatch’ına tıkladığında ürün kartının resmi o renge ait fotoğrafla değişir. Bu sayede müşteri koleksiyon sayfasını terk etmeden renkleri keşfedebilir.
Bazı mağazalar bir adım ileri gider: her renk aslında ayrı bir üründür ve swatch’lar bu ürünleri birbirine bağlar. Müşteri bir renk swatch’ına tıkladığında o rengin ürün sayfasına yönlendirilir. Bu yaklaşım özellikle çok farklı fotoğraf setleri olan ürünlerde tercih edilir.
Koleksiyon swatch’ları için iki yaklaşım
Birinci yaklaşım: varyant tabanlı. Tek bir ürünün varyantları koleksiyon kartında swatch olarak gösterilir. Müşteri swatch’a tıkladığında kart resmi değişir. Bu yöntem Shopify’ın standart varyant yapısını kullanır.
İkinci yaklaşım: ürün tabanlı (Combined Listings). Her renk ayrı bir Shopify ürünüdür. Bu ürünler bir grup olarak birbirine bağlanır ve koleksiyon kartında swatch’lar olarak gösterilir. Bu yöntem Shopify’ın Combined Listings özelliğini kullanır.
İkinci yaklaşımın avantajı: her rengin kendi ürün sayfası, kendi URL’si ve kendi SEO verileri olur. Varyant sınırlamaları (Shopify’ın 100 varyant limiti) sorun olmaz. Dezavantajı: envanter yönetimi biraz daha karmaşıklaşır.
Combined Listings yöntemi
Shopify’ın Combined Listings özelliği ayrı ürünleri tek bir ürün listesi altında birleştirmenizi sağlar. Bu özellik koleksiyon sayfası swatch’ları için ideal bir temel oluşturur.
Rubik Combined Listings bu yapıyı kullanarak koleksiyon sayfalarında renk swatch’ları gösterir. Her ürün kartının altında veya üstünde renk örnekleri yer alır. Müşteri swatch’a tıkladığında kart resmi ilgili rengin fotoğrafıyla değişir veya o ürünün sayfasına yönlendirilir.
Bu uygulama Rubik Variant Images’tan ayrı bir üründür. İkisi farklı sorunları çözer: Rubik Variant Images ürün sayfasında galeri filtreleme ve swatch’lar sağlar. Rubik Combined Listings koleksiyon sayfasında swatch’lar ve ürün bağlama sağlar. İkisi birlikte kullanıldığında mağazanızın her sayfasında tutarlı bir swatch deneyimi sunulur.
Ürün sayfası + koleksiyon sayfası birlikte
En iyi sonuç için iki uygulamayı birlikte kullanabilirsiniz. Koleksiyon sayfasında müşteri renk swatch’larını görür ve ilgilendiği renge tıklar. Ürün sayfasında Rubik Variant Images galeriyi filtreler ve o rengin tüm fotoğraflarını gösterir.
Bu akış müşterinin alışveriş yolculuğunu optimize eder. Koleksiyon sayfasında keşif, ürün sayfasında detaylı inceleme. Her iki adımda da swatch’lar tutarlı bir deneyim sunar. Swatch vs dropdown yazımızda swatch’ların dönüşüm oranına etkisini ele aldık.
Video
Koleksiyon sayfasında renk örneklerinin nasıl göründüğünü videoda izleyin:
Sık sorulan sorular
Rubik Variant Images koleksiyon sayfasında swatch gösterebilir mi?
Hayır. Rubik Variant Images ürün sayfasında çalışır. Koleksiyon sayfası swatch’ları için Rubik Combined Listings gerekir.
Koleksiyon sayfası swatch’ları ve ürün sayfası swatch’ları neden farklı uygulamalar?
Teknik olarak tamamen farklı zorluklar içerir. Ürün sayfası tek bir ürünün galerisini filtreler. Koleksiyon sayfası onlarca ürün kartına aynı anda swatch render eder. DOM yapısı, veri erişimi ve JavaScript mantığı farklıdır.
Combined Listings nedir?
Shopify’ın ayrı ürünleri tek bir ürün listesi altında birleştiren özelliğidir. Her renk ayrı bir ürün olarak oluşturulur ve combined listing ile gruplandırılır. SSS yazımızda bu konuyu daha detaylı anlattık.
İki uygulamayı birlikte kullanabilir miyim?
Evet. Rubik Variant Images (ürün sayfası) ve Rubik Combined Listings (koleksiyon sayfası) birlikte kullanılabilir. İkisi farklı sayfalarda çalışır ve çakışmaz.
Koleksiyon swatch’ları mobilde çalışıyor mu?
Evet. Koleksiyon sayfası swatch’ları responsive tasarıma sahiptir ve mobilde dokunmatik ekranlarla uyumlu çalışır.
Her renk için ayrı ürün mü oluşturmalıyım?
Combined Listings yaklaşımında evet. Her renk ayrı bir Shopify ürünüdür ve bunlar gruplandırılır. Bu yöntem kendi SEO avantajları sağlar ama envanter yönetimi biraz daha karmaşıklaşır.
Tema desteği nasıl?
Rubik Combined Listings de geniş tema desteği sunar. Detaylı bilgi için Combined Listings SSS sayfasını ziyaret edin.
İlgili yazılar
