Koleksiyon sayfalarında renk örnekleri gösterme
Varyant resmi uygulamasını kurdunuz. Ürün sayfanızda artık güzel renk swatch’ları var, müşteri renk seçiyor ve galeri filtreleniyor. Sonra koleksiyon sayfasına bakıyorsunuz. Hiçbir şey değişmemiş. Ürün kartlarında hala tek bir resim var, renk seçeneği yok.
Bu bir hata değil. Ürün sayfasındaki varyant resim filtreleme ile koleksiyon sayfasındaki renk örnekleri iki farklı iş. Farklı teknik problemleri çözüyorlar ve genellikle farklı uygulamalar tarafından sağlanıyorlar. Bu yazıda neden ayrı olduklarını ve ikisini birlikte nasıl kullanacağınızı anlatıyorum.
Bu yazıda
- Neden iki farklı özellik
- Varyant resmi uygulamaları ne yapar (ürün sayfası)
- Koleksiyon sayfası renk örnekleri ne yapar
- Koleksiyon swatch’ları için iki yaklaşım
- Rubik Combined Listings nasıl çalışıyor
- İki uygulamayı birlikte kullanma
- Kurulum adımları
- Video
- Sık sorulan sorular
- İlgili yazılar
Neden iki farklı özellik
Ürün sayfası ve koleksiyon sayfası Shopify’da temelden farklı iki görünüm.
Ürün sayfasında tek bir ürüne bakıyorsunuz. Varyantları var (Mavi, Kırmızı, Yeşil). Varyant resmi uygulaması galeriyi filtreleyerek sadece seçilen varyantın fotoğraflarını gösteriyor. Her şey tek bir ürün bağlamında gerçekleşiyor.
Koleksiyon sayfasında bir ürün ızgarasına bakıyorsunuz. Her kart ayrı bir ürün. Bu kartların üzerinde renk seçenekleri göstermek istiyorsanız, uygulamanın her üründen varyant verisini çekip her kartın üzerinde swatch render etmesi gerekiyor. Veya tamamen ayrı ürünleri birbirine bağlayıp renk seçeneği olarak sunması gerekiyor.
Bunlar iki farklı teknik zorluk. DOM yapısı farklı, JavaScript kancaları farklı, veri kaynakları farklı. Bu yüzden Rubik Variant Images dahil çoğu varyant resmi uygulaması ürün sayfasına odaklanıyor. Koleksiyon sayfası swatch’ları ayrı bir uygulama tarafından yönetiliyor.
Varyant resmi uygulamaları ne yapar (ürün sayfası)
Rubik Variant Images ürün detay sayfasında çalışıyor. Üç şey yapıyor:
- Galeri filtreleme. Müşteri “Mavi” seçtiğinde galeride sadece mavi resimler görünüyor. Diğer renklerin fotoğrafları gizleniyor.
- Görsel swatch’lar. Varsayılan dropdown menüyü resim, renk veya metin swatch’larıyla değiştiriyor.
- Çoklu medya atama. Her varyanta sınırsız resim, video ve 3D model atama imkanı.
Bunların hepsi ürün sayfasında gerçekleşiyor. Koleksiyon sayfasındaki ürün kartlarında değil.
Koleksiyon sayfası renk örnekleri ne yapar
Koleksiyon sayfası swatch’ları ürün kartlarının üzerinde küçük renk daireleri veya resim küçük resimleri gösteriyor. Müşteri bir renk swatch’ına tıklayınca ürün kartının resmi o renge ait fotoğrafla değişiyor. Böylece müşteri ürün sayfasına gitmeden önce her rengin nasıl göründüğünü görebiliyor.
Bu özellik alışveriş deneyimini çok iyileştiriyor. 6 renkli bir tişörtün 6 ayrı ürün kartı olarak görünmesi yerine tek bir kart üzerinde 6 renk swatch’ı görmek hem düzenli hem hızlı.
Koleksiyon swatch’ları için iki yaklaşım
1. Varyant tabanlı (tek ürünün varyantları)
Bazı temalar ürünün varyantlarını koleksiyon kartında swatch olarak gösterebiliyor. Ama bu sınırlı: Shopify’ın 100 varyant limiti ve 3 seçenek grubu sınırlaması geçerli. Ayrıca her rengin sadece bir resmi gösteriliyor.
2. Combined Listings (ayrı ürünleri birleştirme)
Her rengi ayrı bir ürün olarak oluşturup bunları bir grup altında birleştiriyorsunuz. Koleksiyon sayfasında tek bir kart üzerinde tüm renklerin swatch’ları görünüyor. Müşteri bir swatch’a tıklayınca o rengin ürün sayfasına yönleniyor.
Bu yaklaşımın avantajı: her renk kendi URL’sine, kendi SEO verisine ve kendi resim galerisine sahip. Varyant limiti sorunu yok. Her rengin 250’ye kadar resmi olabilir.
Rubik Combined Listings nasıl çalışıyor
Rubik Combined Listings ayrı ürünleri bir grup altında birleştiriyor ve koleksiyon sayfalarında renk swatch’ları olarak gösteriyor.
Nasıl çalışıyor:
- Her rengi ayrı bir Shopify ürünü olarak oluşturun (veya mevcut ürünleriniz zaten böyleyse hazırsınız).
- Rubik Combined Listings’te bir grup oluşturun ve ürünleri bu gruba ekleyin.
- Swatch tipini seçin (resim, renk veya metin). Swatch tasarımını özelleştirin.
- Uygulama koleksiyon sayfasında ürün kartlarının üzerine swatch’ları otomatik ekliyor.
Müşteri koleksiyon sayfasında bir swatch’a tıklayınca ürün kartının resmi değişiyor. Swatch’a tıklamak aynı zamanda o rengin ürün sayfasına yönlendiriyor.
Rubik Combined Listings ile ilgili detaylı bilgi için kurulum rehberini okuyun.
İki uygulamayı birlikte kullanma
Rubik Variant Images ve Rubik Combined Listings birbirini tamamlıyor. Birlikte kullanıldığında:
- Koleksiyon sayfası: Rubik Combined Listings ürün kartlarında renk swatch’ları gösteriyor. Müşteri tıklayınca o rengin ürün sayfasına gidiyor.
- Ürün sayfası: Rubik Variant Images galeriyi filtreliyor ve swatch’lar gösteriyor. Müşteri beden veya stil seçtiğinde sadece o seçeneğe ait resimler görünüyor.
İki uygulama birbirini otomatik algılıyor. Kurulumda özel bir ayar yapmanız gerekmiyor. Farklı sayfa türlerinde farklı işler yapıyorlar ama birlikte sorunsuz çalışıyorlar.
Pratikte şöyle oluyor: müşteri koleksiyon sayfasında “Mavi” swatch’ına tıklıyor, mavi ürün sayfası açılıyor, orada da “S”, “M”, “L” seçenekleri swatch olarak görünüyor ve her beden seçiminde galeri o bedene ait resimlerle güncelleniyor. Baştan sona görsel, akıcı ve hızlı.
Kurulum adımları
Her iki uygulamayı da kullanmak istiyorsanız:
- Rubik Variant Images’ı yükleyin. Ürün sayfasında galeri filtreleme ve swatch’lar için.
- Rubik Combined Listings’i yükleyin. Koleksiyon sayfasında renk swatch’ları için.
- Her iki uygulamanın da app embed’ini tema düzenleyicisinde açın.
- Rubik Variant Images’ta ürün resimlerini varyantlara atayın.
- Rubik Combined Listings’te ürünleri gruplara atayın ve swatch tasarımını seçin.
- Koleksiyon sayfasını ve ürün sayfasını test edin.
Her iki uygulama da ücretsiz plan sunuyor. Ödeme bilgisi girmeden deneyebilirsiniz.
Video
Rubik Combined Listings’in koleksiyon sayfalarında nasıl çalıştığını gösteren video:
Sık sorulan sorular
Rubik Variant Images koleksiyon sayfasında swatch gösterebiliyor mu?
Hayır. Rubik Variant Images ürün sayfasında çalışıyor: galeri filtreleme, swatch’lar ve çoklu medya atama. Koleksiyon sayfalarında renk örnekleri göstermek için ayrı bir uygulama olan Rubik Combined Listings gerekiyor.
İki uygulamaya ihtiyacım var mı?
İhtiyacınıza bağlı. Sadece ürün sayfasında galeri filtreleme ve swatch istiyorsanız Rubik Variant Images yeterli. Koleksiyon sayfasında da renk örnekleri istiyorsanız Rubik Combined Listings’i de yükleyin. İkisi birlikte sorunsuz çalışıyor.
Combined Listings ne demek?
Ayrı Shopify ürünlerini bir grup altında birleştirmek. Her renk ayrı bir ürün oluyor ama koleksiyon sayfasında tek bir kart üzerinde swatch’lar olarak görünüyor. Her renk kendi URL’sine, kendi SEO verisine ve kendi resim galerisine sahip oluyor.
İki uygulama birbirini etkiler mi?
Hayır. İki uygulama farklı sayfa türlerinde çalışıyor. Rubik Combined Listings koleksiyon sayfasında, Rubik Variant Images ürün sayfasında. Birbirlerini otomatik algılıyorlar ve herhangi bir çakışma yaşanmıyor.
Her iki uygulama da ücretsiz mi?
Her ikisinin de ücretsiz planı var. Ödeme bilgisi girmeden yükleyip deneyebilirsiniz. İhtiyacınıza göre ücretli planlara geçebilirsiniz.
İlgili yazılar
- Shopify’da sadece seçilen varyantın resimlerini gösterme
- Shopify varyant resimleri nasıl ayarlanır: adım adım
- Shopify renk seçicileri özelleştirme: şekil, renk, boyut
- How to show color swatches on collection pages
- Swatch’ların dönüşüm oranlarına etkisi (CraftShift)
- Combined Listings nedir ve nasıl çalışır (Rubikify)
- Varyantları koleksiyonda ayrı ürün olarak gösterme (Rubikify)




