Shopify renk örneklerini özelleştirme rehberi

Q: Shopify swatch'larına özel CSS ekleyebilir miyim?

Rubik swatch'ları Shadow DOM içinde render eder. Swatch tasarımı uygulama içindeki ayarlardan yapılır, ayrı CSS yazmaya gerek yoktur.

Q: Shopify resim swatch'larında hangi resim gösterilir?

Varyantın Shopify'daki atanmış resmi thumbnail olarak gösterilir. Varyanta resim atanmadıysa ürünün ana resmi kullanılır.

April 5, 2026

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?

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.

Swatch türleri

Rubik Variant Images üç 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.

Ş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 çalışır. Koleksiyon sayfalarında ürün kartlarının üzerinde renk örnekleri göstermek 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:

Rubik Variant Images’i ücretsiz deneyin

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.