Shopify varyant resimleri nasıl ayarlanır: adım adım
Shopify ürün sayfanızda müşteri renk değiştirdiğinde sadece o rengin fotoğraflarını görmesini istiyorsunuz. Mantıklı bir istek. Ama Shopify bunu kendi başına yapamıyor. Varyant başına tek bir resim atanabiliyor ve galeride her zaman tüm resimler görünüyor.
Bu yazıda Rubik Variant Images ile varyant başına birden fazla resim atamayı sıfırdan anlatıyorum. Uygulamayı yükleme, resimleri atama, yapay zeka ile otomatik eşleştirme, toplu atama ve test etme. Her adım açık ve uygulanabilir.
Bu yazıda
- Başlamadan önce bilmeniz gerekenler
- Adım 1: Uygulamayı yükleyin
- Adım 2: App embed’i etkinleştirin
- Adım 3: Resimleri varyantlara atayın
- Adım 4: AI auto-assign ile otomatik atama
- Adım 5: Toplu atama (bulk assign)
- Adım 6: Ortak resimleri ayarlayın
- Adım 7: Test edin
- Bonus: Swatch görünümünü özelleştirme
- Video rehber
- Sık sorulan sorular
- İlgili yazılar
Başlamadan önce bilmeniz gerekenler
Shopify’ın ürün sistemi resimleri ürüne ait tutuyor, varyanta değil. Varyant başına sadece bir tane “öne çıkan resim” atayabilirsiniz. Yani 5 renkli bir tişört ve her renk için 4 fotoğrafınız varsa, Shopify bunu yönetemez. Galeri hep 20 resmi bir arada gösterir.
Rubik Variant Images bu sınırlamayı aşıyor. Her varyanta istediğiniz kadar resim, video ve 3D model atayabiliyorsunuz. Veriler Shopify metafield’larında saklanıyor. Metafield tabanlı yükleme, harici API çağrısı yok. Sayfa hızınız etkilenmiyor.
Adım 1: Uygulamayı yükleyin
Shopify App Store’dan Rubik Variant Images’ı yükleyin. Ücretsiz plan mevcut, ödeme bilgisi girmeden başlayabilirsiniz.
Yükleme tamamlandığında uygulama sizi doğrudan kontrol paneline yönlendiriyor. İlk iş olarak temanızı otomatik algılıyor ve uyumluluğu kontrol ediyor.
Adım 2: App embed’i etkinleştirin
Uygulamanın çalışması için tema düzenleyicisinde “app embed” açık olmalı. Rubik bunu ilk kurulumda sizden istiyor. Tek bir tıkla etkinleşiyor.
Bu adım kritik. App embed kapalıysa resim atamaları kaydedilir ama ürün sayfasında hiçbir değişiklik görünmez. Sorun yaşıyorsanız ilk kontrol edeceğiniz yer burası. Detaylı anlatım sorun giderme yazımızda mevcut.
Adım 3: Resimleri varyantlara atayın
Uygulamada bir ürün açın. Sol tarafta ürünün tüm resimleri, sağ tarafta varyantlar görünüyor. Resmi tutup varyantın üzerine sürükleyin. Bu kadar.
Birden fazla resim atamak istiyorsanız aynı işlemi tekrarlayın. Her varyanta istediğiniz sayıda resim atayabilirsiniz. Sıralama da sürükle-bırak ile değiştirilebilir.
Manuel atama küçük kataloglar için ideal. 5-10 ürününüz varsa birkaç dakikada hallolur. Ama 50, 100 veya 500 ürününüz varsa sonraki iki adım hayatınızı kolaylaştıracak.
Adım 4: AI auto-assign ile otomatik atama
Ürün düzenleme ekranında AI auto-assign butonuna tıklayın. Uygulama yapay zeka kullanarak resimleri doğru varyantlara eşleştiriyor.
AI auto-assign 4 veri noktasını analiz ediyor:
- Ürün adı. “Pamuk Tişört Mavi V Yaka” gibi ürün başlığındaki renk ipuçları.
- Varyant adı. “Mavi / M” veya “Kırmızı / L” gibi varyant değerleri.
- Dosya adı. “mavi-tisort-on.jpg” gibi resim dosya isimlerindeki anahtar kelimeler.
- Alt metin. Resimlere girdiğiniz açıklayıcı metinler.
Bu 4 veri noktasını birlikte değerlendirerek hangi resmin hangi varyanta ait olduğunu belirliyor. Dosya adlarınız ve alt metinleriniz düzenliyse doğruluk oranı çok yüksek oluyor. Sonuçları kaydetmeden önce kontrol edip gerekirse düzeltebilirsiniz.
AI auto-assign ürün bazında çalışıyor: bir ürün açıp butona basıyorsunuz, sonuçları kontrol edip kaydediyorsunuz.
Adım 5: Toplu atama (bulk assign)
Yüzlerce ürününüz varsa tek tek uğraşmak istemezsiniz. Toplu atama (bulk assign) bu iş için var.
Toplu atama resim sıralamasına dayalı gruplama yapıyor. Nasıl çalışıyor:
- Shopify galerisinde resimleri varyantlara göre sıralı dizin. Önce mavi resimler, sonra kırmızı, sonra yeşil.
- Her grubun ilk resmi, Shopify’da o varyanta atadığınız öne çıkan resim olmalı.
- Uygulama öne çıkan resim sınırlarını algılıyor ve aradaki resimleri o varyanta atıyor.
Toplu atama tüm kataloğunuza veya seçtiğiniz ürünlere arka planda uygulanıyor. Güvenli bir işlem, tekrar çalıştırabilirsiniz. Dosya adı eşleştirmesi yapmıyor, tamamen resim sıralamasına dayanıyor.
Adım 6: Ortak resimleri ayarlayın
Beden tablosu, yaşam tarzı fotoğrafı veya ambalaj görseli gibi tüm varyantlarda görünmesi gereken resimler var mı? Bunları “ortak resim” (common image) olarak işaretleyin.
Ortak resimler hangi varyant seçili olursa olsun galeride görünür. Varyanta özel resimlerden önce mi sonra mı görüneceğini de ayarlayabilirsiniz. Bu özellik özellikle beden tablosu olan giyim mağazaları için çok kullanışlı.
Adım 7: Test edin
Ürün sayfasını tarayıcınızda açın. Bir varyant seçin. Galeri sadece o varyanta atanmış resimleri gösteriyorsa her şey doğru çalışıyor.
Kontrol listesi:
- Her varyant seçildiğinde galeri değişiyor mu?
- Ortak resimler her varyantta görünüyor mu?
- Swatch’lar doğru görünüyor mu (resim, renk veya metin)?
- Mobilde galeri ve swatch’lar düzgün çalışıyor mu?
- Kaydırıcı (slider) boş slayt göstermiyor mu?
Bir şey düzgün çalışmıyorsa sorun giderme yazımıza göz atın. En sık karşılaşılan 10 sorunu ve çözümlerini anlatıyoruz.
Canlı örnek görmek için demo mağazasını ziyaret edin.
Bonus: Swatch görünümünü özelleştirme
Rubik varsayılan varyant seçicinizi görsel swatch’larla değiştiriyor. Üç farklı swatch tipi var:
- Resim swatch: Ürünün gerçek fotoğrafını küçük kare olarak gösteriyor. Müşteri tıklamadan önce rengin nasıl göründüğünü görüyor.
- Renk swatch: Düz renk dairesi veya karesi. Temel renkler için ideal.
- Pill (metin etiketi): Beden gibi metin tabanlı seçenekler için. “S”, “M”, “L”, “XL” gibi.
Şekil, boyut, kenarlık, hover efekti, tükenen varyant stili gibi pek çok ayarı 100’den fazla CSS değişkeni veya AI Visual Settings Assistant ile özelleştirebilirsiniz. Detayları renk seçicileri özelleştirme yazımızda anlatıyoruz.
Video rehber
Tüm kurulum sürecini adım adım gösteren video:
Sık sorulan sorular
Bir varyanta kaç resim atayabilirim?
Sınır yok. Shopify varyant başına tek resme izin veriyor ama Rubik Variant Images ile istediğiniz kadar resim, video ve 3D model atayabilirsiniz. Her varyant için 2 resim de olabilir, 20 resim de.
AI auto-assign nasıl çalışıyor?
Yapay zeka 4 veri noktasını analiz ediyor: ürün adı, varyant adı, dosya adı ve alt metin. Bu bilgileri kullanarak hangi resmin hangi varyanta ait olduğunu belirliyor. Sonuçları kaydetmeden önce kontrol edebilirsiniz.
Toplu atama dosya adına göre mi eşleştiriyor?
Hayır. Toplu atama (bulk assign) 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. Dosya adı eşleştirmesi kullanmıyor.
Temam destekleniyor mu?
Rubik Variant Images 350’den fazla Shopify temasında yerel kod desteği sunuyor. Dawn, Horizon, Prestige, Impulse, Impact, Focal, Warehouse, Palo Alto, Motion, Symmetry ve daha yüzlercesi. Ayrıca 7 sayfa oluşturucu ile uyumlu: GemPages, PageFly, EComposer, Instant, Beae, Foxify, Replo. Tam liste dokümantasyonda.
Uygulama sayfamı yavaşlatır mı?
Hayır. Metafield tabanlı yükleme, harici API çağrısı yok. Varyant resim verileri sayfayla birlikte geliyor, üçüncü parti sunucu yanıtı beklemiyor. Core Web Vitals puanınız etkilenmiyor.
Koleksiyon sayfasında da swatch gösteriyor mu?
Rubik Variant Images ürün sayfasında çalışıyor. Koleksiyon sayfalarında ürün kartlarının üzerinde renk örnekleri göstermek için ayrı bir uygulama olan Rubik Combined Listings gerekiyor. İki uygulama birlikte sorunsuz çalışıyor.
İlgili yazılar
- Shopify’da sadece seçilen varyantın resimlerini gösterme
- Shopify renk seçicileri özelleştirme: şekil, renk, boyut
- Shopify varyant resimleri görünmüyor: 10 neden ve çözüm
- Shopify mağaza hızını artırma: uygulama performansı
- Varyant resimlerinin iade oranlarına etkisi (CraftShift)
- Shopify Combined Listings kurulum rehberi (Rubikify)




