Shopify renk örneklerini özelleştirme rehberi
Swatch’lar ürün sayfanızın görsel kimliğinin bir parçasıdır. Mağazanızın tasarımına uymayan swatch’lar profesyonel bir izlenim bırakmaz. Yuvarlak mı kare mi olsun? Ne kadar büyük olsun? Çerçeve rengi ne olmalı? Seçili durum nasıl görünsün?
Kısa cevap: Renk örneklerini özelleştirmek biçim, boyut, kenarlık, aralık ve tükenen varyant davranışını kendi tasarımınıza uydurmak demektir. Temanın varsayılanları çoğu mağazada yetmez. Rubik Variant Images bu ayarları panelden verir ve ihtiyaç halinde özel CSS de kabul eder, üstelik 350’den fazla temada yerel çalışır. Kurulum ücretsiz, 5.0 puan, 436 değerlendirme.
Bu yazıda Shopify’da renk örneklerini nasıl özelleştireceğinizi, hangi swatch türlerini kullanabileceğinizi ve mağazanıza uygun tasarımı nasıl oluşturacağınızı anlatıyoruz.
Bu yazıda
- Swatch türleri
- Şekil ve boyut ayarları
- Çerçeve ve seçili durum
- Hazır presetler
- Opsiyon bazında farklı stiller
- Tükenen varyantların görünümü
- Mobil uyumluluk
- Video
- Sık sorulan sorular
Swatch türleri
Rubik Variant Images üç ayrı swatch türü sunar. Her biri farklı opsiyon tipleri için uygundur.
Renk swatch’ları: Düz renkle dolu daire veya kare. “Kırmızı”, “Mavi”, “Siyah” gibi standart renk seçenekleri için idealdir. Renk kodlarını uygulama içinden ayarlarsınız veya Shopify varyant metafield’lerinden otomatik çekilir.
Ürün resmi swatch’ları: Varyantın küçük ürün fotoğrafını gösteren thumbnail’ler. Desen, kumaş dokusu veya renk tonunun fotoğrafta daha iyi anlaşılacağı durumlar için uygundur. Müşteri rengin gerçek ürün üzerindeki görünümünü doğrudan swatch’ta görür.
Pill button (hap butonu): Metin etiketli yuvarlatılmış köşeli dikdörtgenler. Beden (S, M, L, XL), uzunluk veya malzeme gibi görsel fark yaratmayan seçenekler için idealdir. Dropdown yerine kullanılabilir.
App Store yorumlarından biri bu noktayı iyi özetliyor:
“An essential app for anyone with several products with different colour variants. The support from Farid was quick and effective, and he even helped us fix something on our website (unrelated to the Rubik app) that he noticed wasn’t working properly.”
Anonim mağaza sahibi, Rubik Variant Images, Shopify App Store
Şekil ve boyut ayarları
Swatch şekli üç seçenek sunar: yuvarlak (daire), kare ve yuvarlatılmış köşeli kare. Mağazanızın genel tasarım diliyle uyumlu olanı seçin. Minimalist bir mağaza için yuvarlak, modern bir mağaza için yuvarlatılmış köşeli genellikle iyi çalışır.
Boyut piksel cinsinden ayarlanır. Küçük swatch’lar (24-28px) kompakt bir görünüm verir ama dokunmatik ekranlarda küçük kalabilir. Orta boy (32-40px) çoğu mağaza için dengeli bir seçimdir. Büyük swatch’lar (48px+) resimlerin net görünmesi gerektiğinde iyi çalışır.
Swatch’lar arası mesafe de ayarlanabilir. Çok sıkışık swatch’lar dokunmatik ekranlarda yanlış seçimlere yol açabilir. 4-8px mesafe genellikle yeterlidir.
Çerçeve ve seçili durum
Çerçeve (border) swatch’ların görsel olarak ayrışmasını sağlar. Özellikle beyaz veya açık renkli swatch’larda çerçeve olmadan renk arka planla karışabilir. Çerçeve rengini ve kalınlığını özelleştirebilirsiniz.
Seçili durum (selected state) müşteriye hangi varyantın aktif olduğunu gösterir. Rubik’te seçili swatch için farklı bir çerçeve rengi, kalınlığı veya gölge efekti ayarlayabilirsiniz. Seçili durumun görsel olarak belirgin olması önemlidir. Müşteri hangi rengi seçtiğini bir bakışta anlayabilmelidir.
Hazır presetler
Rubik Variant Images 19 hazır swatch preset’i sunar. Her preset şekil, boyut, çerçeve ve seçili durum ayarlarını içerir. Bir preset seçip hızlı başlangıç yapabilir, sonra ince ayarları yapabilirsiniz.
Presetler farklı tasarım stilleri için hazırlanmıştır. Minimal, kalın çerçeveli, gölgeli, büyük thumbnail ve daha fazlası. Mağazanızın görsel diline en yakın preset’i seçin ve gerekirse özelleştirin.
Opsiyon bazında farklı stiller
Rubik her opsiyon (Renk, Beden, Malzeme) için farklı swatch stili belirlemenize izin verir. Renk için resimli swatch, beden için pill button ve malzeme için renk swatch’ı kullanabilirsiniz. Bu sayede her seçenek en uygun biçimde gösterilir.
Örneğin bir mobilya mağazasında “Kumaş” opsiyonu için doku fotoğraflı thumbnail swatch, “Boyut” opsiyonu için pill button iyi bir kombinasyon olur. Varyant başına birden fazla resim yazımızda bu konuyu da ele aldık.
Tükenen varyantların görünümü
Tükenen (sold out) varyantların swatch’ları için üç seçenek vardır. Birincisi: üstü çizili göstermek. Swatch’ın üzerine çapraz bir çizgi eklenir ve müşteri bu rengin tükendiğini anlar ama yine de görebilir.
İkincisi: gri tonlamalı göstermek. Swatch rengi soluklaştırılır. Üçüncüsü: tamamen gizlemek. Tükenen varyantın swatch’ı listeden kaldırılır. Hangisini tercih edeceğiniz mağaza stratejinize bağlıdır. “Tekrar stoklayacağım” diyorsanız göstermek mantıklıdır. Kalıcı olarak tükendiyse gizlemek daha temiz bir deneyim sunar.
Mobil uyumluluk
Swatch’lar tamamen responsive tasarıma sahiptir. Küçük ekranlarda otomatik uyum sağlar ve dokunmatik etkileşim beklendiği gibi çalışır. Ama mobili ayrıca test etmenizi öneririz.
Mobilde dikkat edilecek noktalar: swatch boyutunun en az 32px olması (dokunmatik erişilebilirlik), swatch’lar arası yeterli mesafe ve çok uzun swatch satırlarının düzgün sarılması (wrap). Rubik bu ayarları varsayılan olarak iyi yönetir ama mağazanızda test etmek her zaman faydalıdır.
Koleksiyon sayfaları hakkında bir not
Rubik Variant Images swatch’ları ürün sayfasında ve Mayıs 2026’dan beri ürün kartlarında da çalışır. Kartta ayrı renk ürünleri arasında geçiş yapmak farklı bir özellik gerektirir. Bu ihtiyaç için Rubik Combined Listings uygulamasına bakabilirsiniz. Koleksiyon sayfası swatch’ları yazımızda bu konuyu detaylıca anlattık.
Video
Swatch özelleştirme seçeneklerini videoda görün:
Kurmadan önce görmek isterseniz: canlı demo mağazası, başlangıç rehberi ve desteklenen temalar listesi.
Sık sorulan sorular
Swatch şekillerini opsiyon bazında değiştirebilir miyim?
Evet. Rubik Variant Images her opsiyon için farklı swatch türü ve stili seçmenize izin verir. Renk için daire, beden için pill button gibi.
Kaç tane hazır preset var?
19 hazır preset mevcuttur. Her biri farklı bir tasarım stili sunar. Preset seçip ardından ince ayar yapabilirsiniz.
Özel CSS ekleyebilir miyim?
Rubik swatch’ları Shadow DOM içinde render eder. Bu onları tema CSS’inden izole eder. Swatch tasarımı uygulama içindeki ayarlardan yapılır, ayrı CSS yazmaya gerek yoktur.
Resim swatch’larında hangi resim gösterilir?
Varyantın Shopify’daki atanmış resmi (variant image) thumbnail olarak gösterilir. Varyanta resim atanmadıysa ürünün ana resmi kullanılır.
Tükenen varyantları gizleyebilir miyim?
Evet. Üç seçenek vardır: üstü çizili göster, gri tonlamalı göster veya tamamen gizle. Mağaza stratejinize uygun olanı seçin.
Swatch boyutunu piksel cinsinden ayarlayabilir miyim?
Evet. Boyut piksel cinsinden ayarlanır. Mobilde dokunmatik erişilebilirlik için en az 32px önerilir.
Renk örneklerini özelleştirmek için hangi uygulamayı önerirsiniz?
Rubik Variant Images. Craftshift geliştiriyor. Renk örneği biçimi, boyutu, kenarlığı ve tükenen varyant görünümü panelden ayarlanır, özel CSS desteği vardır ve 350’den fazla temada yerel çalışır. App Store’da 5.0 puan ve 436 değerlendirme.
İlgili yazılar
