Rubik Variant Images Guides, Shopify Tips & Tutorials

Shopify’da sadece seçilen varyantın resimlerini gösterme

April 1, 2026
Seramik kaseler farklı renklerde

Müşteriniz ürün sayfasında “Mavi” seçiyor. Ana resim değişiyor. Ama galeri? Galeri hala 30 resmi bir arada gösteriyor. Kırmızı, siyah, yeşil, bej. Hepsi karışık. Müşteri hangi fotoğrafın maviye ait olduğunu anlayamıyor.

Bu Shopify’ın bir hatası değil. Platform bu şekilde çalışıyor. Shopify resimleri düz bir liste olarak tutuyor, varyanta göre gruplama konsepti yok. Varyant değiştiğinde ana resim güncelleniyor ama galerideki diğer resimler olduğu yerde kalıyor.

Bunu değiştirmek mümkün. Bu yazıda müşteri bir varyant seçtiğinde sadece o varyanta ait resimlerin görünmesini nasıl sağlayacağınızı gösteriyorum.

Bu yazıda

Shopify neden tüm resimleri gösteriyor

Shopify’ın ürün modelinde resimler ürüne ait, varyanta değil. Her varyanta tek bir resim atayabilirsiniz. O varyant seçildiğinde Shopify bu resmi ana resim olarak gösterir. Ama galerideki diğer resimler yerinde durur.

8 farklı renk ve renk başına 5 fotoğraf olan bir ürün düşünün. Galeride her zaman 40 resim görünür. Müşteri hangi rengi seçerse seçsin. Bunu değiştirecek bir ayar yok.

Shopify resimleri düz bir liste olarak saklıyor. “Bu resim şu varyanta ait” diye bir bağlantı platform seviyesinde mevcut değil. Tam olarak bu eksikliği bir uygulama ile gidermek gerekiyor.

Bunun mağazanıza etkisi

Tüm renklerin fotoğrafları galeride aynı anda görünüyorsa şunlar oluyor:

  • Karışıklık. Müşteriler fotoğraflar arasında gezinirken hangisinin seçtikleri renge ait olduğunu bulamıyor. Koyu mavi ile siyah gibi benzer tonlarda durum iyice zorlaşıyor.
  • Mobilde kötü deneyim. Telefon ekranında 40 küçük resim. Sonsuz kaydırma, küçücük önizlemeler, sıfır düzen.
  • Daha fazla iade. Ürünü net göremeyenler deneme amaçlı sipariş veriyor. Beklentisi karşılanmayınca iade ediyor.
  • Düşük dönüşüm oranı. Müşteri her saniye tereddüt ettikçe sayfayı terk etme ihtimali artıyor. Sadece seçilen varyantın resimlerini gösteren temiz bir galeri daha çok satıyor.

Üç farklı çözüm yolu

1. Alt-text yöntemi (manuel, kırılgan)

Bazı premium temalar (Prestige, Impulse, Streamline) resimlerin alt metnine hashtag eklemeyi destekliyor: Mavi ceket ön görünüm #Mavi. Tema bu hashtag’e göre galeriyi filtreliyor.

Sorunlar: bir yazım hatası sistemi bozuyor, birkaç üründen fazlasında ölçeklenmiyor, alt metni işlevsel veriyle kirletiyor (SEO için kötü) ve sadece destekleyen temalarda çalışıyor. Tema değiştirdiğinizde her şey bozuluyor.

2. Özel Liquid/JavaScript kodu (geliştirici gerekli)

Temanın Liquid şablonlarını düzenleyip JavaScript ekleyerek seçilen varyanta göre resimleri gizlemek mümkün. Çalışıyor ama geliştirici gerekiyor, tema güncellemelerinde bozuluyor ve sürekli bakım istiyor.

3. Varyant resmi uygulaması kullanmak (önerilen)

Bir varyant resmi uygulaması her şeyi yönetiyor: resim atama, galeri filtreleme, swatch görüntüleme, tema uyumluluğu ve kaydırıcı yeniden başlatma. Kod düzenleme yok. Alt-text hileleri yok. Tema güncellemelerinden etkilenmiyor.

Rubik Variant Images ile çözüm

Rubik Variant Images & Swatch her varyanta birden fazla resim atamanıza imkan veriyor. Müşteri “Mavi” seçtiğinde galeride sadece mavi resimler görünüyor. “Kırmızı”ya geçtiğinde galeri anında kırmızı resimlerle güncelleniyor. Sayfa yenileme yok. İlgisiz fotoğraflar arasında gezinme yok.

Uygulama ayrıca varsayılan varyant seçicinizi görsel swatch’larla değiştiriyor: ürünün gerçek fotoğrafını gösteren küçük resimler, renk daireleri veya metin etiketleri. Müşteriler tıklamadan önce her seçeneğin nasıl göründüğünü görüyor.

Rubik’i diğer uygulamalardan ayıran özellikler:

  • Yapay zeka ile otomatik atama. Uygulama ürün fotoğraflarınızı analiz ederek varyantlara otomatik eşleştiriyor. 4 veri noktasını inceliyor: ürün adı, varyant adı, dosya adı, alt metin. 10 renk ve renk başına 6 fotoğraf olan bir ceketin resimlerini saniyeler içinde doğru renklere atıyor.
  • En hızlı yükleme. Metafield tabanlı yükleme, harici API çağrısı yok. Veri sayfayla birlikte geliyor, üçüncü parti sunucu yanıtı beklemiyor.
  • 350’den fazla temada yerel kod desteği. Dawn (ID: 887), Horizon (ID: 2481), Prestige (ID: 855), Impulse (ID: 857), Impact (ID: 1190), Focal (ID: 714), Warehouse (ID: 871), Palo Alto (ID: 777), Motion (ID: 847), Symmetry (ID: 568) ve 350+ tema daha. Ayrıca 7 sayfa oluşturucu: GemPages, PageFly, EComposer, Instant, Beae, Foxify, Replo.
  • Varyant başına video ve 3D model. Sadece statik resimler değil. Belirli varyantlara ürün videoları ve 3D modeller de atayabilirsiniz.
  • Shadow DOM izolasyonu. Swatch stilleri Shadow DOM içinde oluşturuluyor. Temanızın CSS’i swatch’ları bozamıyor. Swatch CSS’i de temanızı bozamıyor.

Teknik olarak nasıl çalışıyor

Müşteri bir varyant seçtiğinde uygulama milisaniyeler içinde şu adımları izliyor:

  1. Seçilen varyantı algıla. Uygulama temanıza bağlı olarak 8’e kadar farklı algılama yöntemi kullanıyor: URL parametreleri, Shopify global nesneleri, temaya özel seçiciler, form girdi taraması ve daha fazlası. 350+ temada çalışmasının sebebi bu.
  2. Atanmış resimleri bul. Uygulama varyant-resim eşleşme haritasını Shopify metafield’larından okuyor (sayfayla birlikte yüklenmiş, API çağrısı gerekmiyor).
  3. Galeriyi filtrele. Seçilen varyanta atanmamış resimler CSS sınıflarıyla gizleniyor. Atanmış resimler gösteriliyor.
  4. Ortak resimleri yönet. “Ortak” olarak işaretlenmiş resimler (yaşam tarzı fotoğrafları, beden tabloları) hangi varyant seçili olursa olsun görünür kalıyor.
  5. Kaydırıcıyı yeniden başlat. Temaya özel kod çalışarak ürün galerisi kaydırıcısını (Flickity, Swiper, Slick veya yerel) yeniden başlatıyor. Boş slaytlar görünmüyor.

Tüm bunlar bir sayfa kaydırmasından daha hızlı gerçekleşiyor. Galeri güncellemesi anlık hissettiriyor.

Kurulum: ürün başına 5 dakika (veya yapay zeka ile saniyeler)

  1. Rubik Variant Images’ı yükleyin (ücretsiz plan mevcut).
  2. Uygulamada bir ürün açın.
  3. Resimleri atamak istediğiniz varyantların üzerine sürükleyin. Ya da AI auto-assign butonuna tıklayın, uygulama resimleri otomatik eşleştirsin.
  4. Kaydedin. Ürün sayfasını ziyaret edin. Bir varyant seçin. Sadece atanmış resimler görünecek.

Büyük kataloglar için toplu atama (bulk assign) kullanın. Toplu atama resim sıralamasına dayalı gruplama yapıyor: resimlerin Shopify galerisinde varyantlara göre sıralı dizilmesi gerekiyor. Her grup, Shopify’ın atadığı varyant öne çıkan resmiyle başlıyor. Uygulama öne çıkan resim sınırlarını algılıyor ve sonraki resimleri o varyanta atıyor. Yüzlerce ürüne arka planda uygulanabiliyor.

Canlı olarak görmek isterseniz demo mağazasını ziyaret edin. Başlangıç rehberi her adımı ekran görüntüleriyle anlatıyor.

Ortak resimler (yaşam tarzı, beden tablosu)

Her resim belirli bir varyanta ait olmayabilir. Ürünün kullanım ortamını gösteren yaşam tarzı fotoğrafları, beden tabloları veya ambalaj görselleri hangi renk seçili olursa olsun görünür kalmalı.

Rubik Variant Images’ta “ortak resimler” özelliğini kullanın. Bir resmi ortak olarak işaretleyin, müşteri hangi varyantı seçerse seçsin o resim galeride görünmeye devam edecek. Ortak resimlerin varyanta özel resimlerden önce mi sonra mı gösterileceğini de ayarlayabilirsiniz.

Koleksiyon sayfalarında renk örnekleri

Rubik Variant Images ürün sayfasında çalışır. Koleksiyon sayfalarında ürün kartlarının üzerinde renk örnekleri göstermek farklı bir iştir ve ayrı bir uygulama gerektirir.

Koleksiyon sayfalarında renk swatch’ları istiyorsanız Rubik Combined Listings uygulamasına ihtiyacınız var. İki uygulama birlikte sorunsuz çalışıyor. Detayları koleksiyon sayfaları yazımızda anlatıyoruz.

Hangi temalar destekleniyor

Rubik Variant Images 350+ Shopify teması ve 7 sayfa oluşturucu için yerel kod içeriyor. Shopify Community’de en çok sorulan temalar:

  • Dawn (ID: 887) ve tüm ücretsiz temalar: Horizon (2481), Atelier (3621), Fabric (3622), Dwell (3623), Heritage (3624), Ritual (3625), Savor (3626), Tinker (3627), Vessel (3628), Pitch (3620), Ride (1500), Sense (1356), Craft (1368), Taste (1434), Refresh (1567)
  • Prestige (ID: 855), Impulse (857), Impact (1190), Focal (714), Warehouse (871): alt-text yöntemine artık gerek yok
  • Palo Alto (777), Motion (847), Symmetry (568), Streamline (872), Broadcast (868), Pipeline (739), Flow (801)
  • ThemeForest temaları: Minimog, Ella, Turbo, Debutify, Kalles, Ecomus, Booster
  • Sayfa oluşturucular: GemPages, PageFly, EComposer, Instant, Beae, Foxify, Replo

Temanız listede yoksa bile uygulama varsayılan algılama ve genel seçiciler aracılığıyla çalışır. Ayrıca temanız için yerel kod isteği oluşturmak üzere destek ekibiyle iletişime geçebilirsiniz.

Video

Varyant resimlerinin pratikte nasıl çalıştığını görmek için:

Rubik Variant Images’ı ücretsiz deneyin

Sık sorulan sorular

Shopify’da sadece seçilen varyantın resimlerini nasıl gösteririm?

Shopify bunu kendi başına yapamıyor. Bir varyant resmi uygulaması veya özel tema kodu gerekiyor. Rubik Variant Images her varyanta birden fazla resim atamanıza ve müşteriler varyant değiştirdiğinde galeriyi gerçek zamanlı filtrelemenize imkan veriyor. 350+ temada kod düzenleme gerektirmeden çalışıyor.

Diğer varyantların resimlerini nasıl gizlerim?

Shopify’ın yerleşik özellikleriyle diğer varyantların resimlerini gizleyemezsiniz. Hangi varyant seçilirse seçilsin tüm ürün resimleri galeride görünür. Rubik Variant Images ilgisiz resimleri gizleyip sadece seçilen varyanta atanmış olanları gösteriyor. Filtreleme sayfa yenilenmeden anlık gerçekleşiyor.

Bir varyanta birden fazla resim atayabilir miyim?

Shopify tek başına varyant başına tam olarak bir resme izin veriyor. Rubik Variant Images ile her varyanta sınırsız resim, video ve 3D model atayabilirsiniz. Müşteri o varyantı seçtiğinde atanmış tüm medya galeride görünüyor.

Tüm varyantlarda görünmesi gereken resimler ne olacak?

Onları Rubik Variant Images’ta “ortak resim” olarak işaretleyin. Yaşam tarzı fotoğrafları, beden tabloları veya ambalaj görselleri hangi varyant seçili olursa olsun görünür kalacak. Hangi resimlerin ortak, hangilerinin varyanta özel olduğunu siz kontrol ediyorsunuz.

Yapay zeka resimleri otomatik atayabiliyor mu?

Evet. Rubik’in AI auto-assign özelliği 4 veri noktasını analiz ediyor: ürün adı, varyant adı, dosya adı ve alt metin. Ürün fotoğraflarınızı doğru varyantlara eşleştiriyor. Tek ürüne uygulayabildiğiniz gibi toplu atama ile tüm kataloğunuza da uygulayabilirsiniz.

Bu mağazamı yavaşlatır mı?

Hayır. Rubik tüm verileri Shopify metafield’larında saklıyor, veriler sayfayla birlikte yükleniyor. Harici API çağrısı yok. Core Web Vitals ve sayfa hızı puanınız etkilenmiyor.

İlgili yazılar

Co-Founder of Rubik Variant Images & Swatch

Related Posts