cropped rubikvariantimageslogocropped rubikvariantimageslogo
  • Pricing
  • Help Center
    • FAQ
    • Documentation
    • Video Tutorials
    • Contact Us
    • Questions & Answers
  • Partners
  • Affiliate
  • Blog
badge shopify app store light
Rubik Combined Listings, Rubik Variant Images Guides

Koleksiyon sayfalarında renk örnekleri gösterme

April 1, 2026
Koleksiyon sayfası ürün kartları ve renk noktaları

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:

  1. Galeri filtreleme. Müşteri “Mavi” seçtiğinde galeride sadece mavi resimler görünüyor. Diğer renklerin fotoğrafları gizleniyor.
  2. Görsel swatch’lar. Varsayılan dropdown menüyü resim, renk veya metin swatch’larıyla değiştiriyor.
  3. Ç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:

  1. Her rengi ayrı bir Shopify ürünü olarak oluşturun (veya mevcut ürünleriniz zaten böyleyse hazırsınız).
  2. Rubik Combined Listings’te bir grup oluşturun ve ürünleri bu gruba ekleyin.
  3. Swatch tipini seçin (resim, renk veya metin). Swatch tasarımını özelleştirin.
  4. 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:

  1. Rubik Variant Images’ı yükleyin. Ürün sayfasında galeri filtreleme ve swatch’lar için.
  2. Rubik Combined Listings’i yükleyin. Koleksiyon sayfasında renk swatch’ları için.
  3. Her iki uygulamanın da app embed’ini tema düzenleyicisinde açın.
  4. Rubik Variant Images’ta ürün resimlerini varyantlara atayın.
  5. Rubik Combined Listings’te ürünleri gruplara atayın ve swatch tasarımını seçin.
  6. 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:

Rubik Combined Listings’i ücretsiz deneyin
Rubik Variant Images’ı ücretsiz deneyin

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)
Umid Aydemir

Co-Founder of Rubik Variant Images & Swatch

Post navigation

Previous
Next

Search

Categories

  • Affiliate Program (1)
  • App Comparison (8)
  • Integrations & Partnerships (15)
  • Rubik Combined Listings (13)
  • Rubik Variant Images Guides (144)
  • Rubik Variant Images Theme Compatibility (78)
  • Shopify Dropshipping (1)
  • Shopify News (3)
  • Shopify Tips & Tutorials (161)
badge shopify app store dark

Trending Posts

  • Shopify variant images FAQ with 30 questions
    Shopify variant images FAQ: 30 questions merchants actually ask
    March 29, 2026
  • How to add color swatches to Shopify
    How to add color swatches to Shopify (no code)
    April 3, 2026
  • List of All Shopify Theme Store IDs (Updated 2025)
    List of All Shopify Theme Store IDs (Updated 2025)
    September 16, 2025
  • variant images not showing fix
    Shopify variant images not showing? 10 causes and how to fix each one
    March 27, 2026
  • show only selected variant images v2
    How to show only the selected variant’s images on Shopify (and hide the rest)
    March 27, 2026
  • Top 10 Shopify Product Variant Swatch Apps and Alternatives in 2025 rubik
    Top 10 Shopify Product Variant Swatch Apps and Alternatives in 2025
    May 20, 2025
  • variant images multiple options
    How to set up variant images for Shopify products with 2 or 3 options (Color + Size + Material)
    March 29, 2026
  • How to Display Featured Image on Collection Pages but Hide Them on Product Pages
    How to Show a Featured Image on Collection Pages and Hide It on Product Pages
    September 12, 2025
  • How to Show Variants as Separate Products on Shopify Collection Pages stamp
    How to Show Variants as Separate Products on Shopify Collection Pages
    September 15, 2025
  • How to Show Swatches as Variant Images on Shopify Horizon and New Free Themes 2025 2
    How to Show Swatches as Variant Images on Shopify Horizon and New Free Themes (2025)
    May 26, 2025

Related Posts

Why are my variant swatch images blank on the Showcase theme?
Rubik Variant Images Guides, Shopify Tips & Tutorials

Why are my variant swatch images blank on the Showcase theme?

August 4, 2026

Showcase builds a filename out of your option value and loads that file. A capital letter, an accent or a slash breaks the match, and a missing file is not an error, so nothing tells you. Here is how to find it.

How do I hide variant thumbnails on the Motion theme?
Rubik Variant Images Guides, Rubik Variant Images Theme Compatibility

How do I hide variant thumbnails on the Motion theme?

August 4, 2026

Hiding the thumbnail strip on Motion is usually the wrong lever. Archetype ships a free alt tag feature that filters instead, with three limits worth reading before you commit to it.

Fabrica theme: how do I show different colors on the product page?
Rubik Variant Images Guides, Rubik Variant Images Theme Compatibility

Fabrica theme: how do I show different colors on the product page?

August 4, 2026

Fabrica is not a Theme Store theme, so the usual advice does not apply. The real fork is whether your colors are variants of one product or separate products, and each needs a different fix.

Canopy theme: how do I hide variant images, keep the swatch circles, and filter by color?
Rubik Variant Images Guides, Shopify Tips & Tutorials

Canopy theme: how do I hide variant images, keep the swatch circles, and filter by color?

August 4, 2026

Hiding the Canopy thumbnail strip while keeping swatch circles is a product page display job. Feeding a color metafield into the filter menu is Search and Discovery work. Two jobs, two systems, and one of them no swatch app can do.

  • Documentation
  • Partners
  • Privacy Policy
  • Affiliate
cratshift logo beyaz

We are a Shopify Partner offering high-quality app solutions crafted for Shopify.

Our Apps
  • Smart Bulk Image Upload
  • Export Product Images
  • Bulk Delete Products
  • Rubik Variant Images
Quick Links
  • Pricing
  • Contact Us
  • FAQ
  • Blog
Blog Categories
  • Shopify Tips & Tutorials
  • Rubik Variant Images Guides
  • Integrations & Partnerships
  • Shopify News
cropped rubikvariantimageslogo

© 2025 Rubik Variant Images by Craftshift®

All rights reserved.