Shopify Tips & Tutorials

Shopify renk seçicileri özelleştirme: şekil, renk, boyut

April 5, 2026
Variant images topic 5 illustration

Shopify’ın varsayılan varyant seçicisi bir dropdown menü. Müşteri “Mavi” yazısını tıklıyor ama mavinin nasıl göründüğünü tıklamadan önce göremiyor. Bu özellikle renk ve desen seçeneklerinde sorun. Müşteriler her seçeneğe tıklayıp geri dönmek zorunda kalıyor.

Renk seçicileri (swatch) bu sorunu çözüyor. Ama sadece swatch eklemek yetmiyor. Swatch’ların temanıza uyması, markanızı yansıtması ve müşterinin kolayca anlayabilmesi gerekiyor. Bu yazıda Rubik Variant Images ile renk seçicilerini istediğiniz gibi özelleştirmeyi anlatıyorum.

Bu yazıda

Üç swatch tipi

Rubik Variant Images üç farklı swatch tipi sunuyor. Her ürünün her seçenek grubu için farklı tip seçebilirsiniz.

Resim swatch

Ürünün gerçek fotoğrafını küçük kare olarak gösteriyor. Müşteri “Mavi”ya tıklamadan önce mavinin o üründe nasıl göründüğünü görüyor. Giyim, mobilya ve aksesuar mağazaları için en etkili seçenek. Resimler Shopify’daki ürün fotoğraflarından otomatik çekiliyor, ayrıca yükleme gerekmiyor.

Renk swatch

Düz renk dairesi veya karesi. “Kırmızı” için kırmızı, “Lacivert” için lacivert. Rubik varyant adından rengi otomatik algılıyor. Özel renkler için hex kodu veya özel resim de atayabilirsiniz. Basit renk seçenekleri olan ürünler için ideal.

Pill (metin etiketi)

Metin tabanlı etiket. Beden (S, M, L, XL), malzeme (Pamuk, Polyester) veya stil gibi görsel olarak gösterilmesi zor seçenekler için. Dropdown’dan çok daha iyi çünkü müşteri tüm seçenekleri tek bakışta görüyor.

Şekil seçenekleri: yuvarlak, kare ve arada

Swatch’ların şeklini border-radius değeriyle kontrol ediyorsunuz. Tam yuvarlak mı istiyorsunuz? %50 yapın. Keskin köşeli kare mi? %0. Hafif yuvarlatılmış köşeler mi? %10-20 arası deneyin.

Temanızın genel tasarım dili ne ise swatch’ları ona uydurun. Yuvarlak butonlar kullanan bir temada yuvarlak swatch’lar doğal görünüyor. Keskin çizgilere sahip minimal bir temada kare swatch’lar daha tutarlı duruyor.

Boyut ayarları

Swatch boyutunu piksel cinsinden ayarlayabilirsiniz. Varsayılan genellikle 32-40px arası. Ama ürüne göre değiştirebilirsiniz.

Renk farkını net görmek gereken ürünlerde (kumaş, boya renkleri) daha büyük swatch’lar işe yarıyor. 48-56px iyi bir aralık. Az seçenekli basit ürünlerde 28-32px yeterli, sayfada gereksiz yer kaplamaz.

Mobilde swatch boyutu daha da önemli. Çok küçük swatch’lar parmakla seçilemiyor. Çok büyükleri ekranı kaplıyor. 36-44px mobilde rahat tıklanabilir bir alan sağlıyor.

Kenarlık ve hover efektleri

Kenarlık (border) swatch’ların etrafındaki çizgi. Rengi, kalınlığı ve stilini ayarlayabilirsiniz. Beyaz veya açık renk swatch’larda kenarlık olmazsa swatch arka planla kaynaşıyor. Bu durumda ince gri kenarlık eklemek şart.

Hover efekti müşterinin fareyi swatch üzerine getirdiğinde ne olacağını belirliyor. Kenarlık rengi değişimi, hafif büyüme veya gölge efekti gibi seçenekler var. Hover efekti müşteriye “bu tıklanabilir bir öğe” mesajı veriyor.

Seçili durum gösterimi

Müşteri bir swatch’a tıkladığında hangisinin seçili olduğu açıkça belli olmalı. Rubik’te seçili durumu özelleştirebilirsiniz: kalın kenarlık, farklı renk kenarlık, onay işareti simgesi veya bunların kombinasyonu.

Koyu swatch’larda (siyah, lacivert) beyaz onay işareti iyi çalışıyor. Açık swatch’larda koyu kenarlık daha belirgin. İki durumu da ayrı ayrı ayarlayabilirsiniz.

Tükenen varyant stili

Stokta olmayan varyantlar için özel stil belirleyebilirsiniz. Üstü çizili, soluk, çarpı işareti veya tamamen gizleme. Doğru yaklaşım mağazanızın stratejisine bağlı.

Müşterinin tükenen renkleri görmesini istiyorsanız soluk gösterim veya üstü çizili stili kullanın. Kafa karışıklığı yaratmasını istemiyorsanız tükenen swatch’ları tamamen gizleyebilirsiniz. Detaylı seçenekleri tükenen swatch’lar yazımızda bulabilirsiniz.

Aynı üründe farklı swatch tipleri

Bir ürünün birden fazla seçenek grubu olabilir. Renk ve beden mesela. Renk için resim swatch, beden için pill kullanmak isteyebilirsiniz. Rubik bunu destekliyor.

Her seçenek grubuna farklı swatch tipi atayabilirsiniz. “Color” seçeneği resim swatch, “Size” seçeneği pill, “Material” seçeneği renk swatch. Hepsi aynı ürün sayfasında bir arada çalışıyor. Detayları karışık swatch tipleri yazımızda anlattık.

AI Visual Settings Assistant

CSS ile uğraşmak istemiyorsanız AI Visual Settings Assistant var. Ne istediğinizi düz Türkçe yazın: “Swatch’ları yuvarlak yap, boyutu 44px olsun, kenarlık koyu gri, hover’da hafif büyüsün.” Yapay zeka CSS’i sizin yerinize üretiyor.

Bir temanın renklerini yapıştırıp “bu temaya uygun swatch tasarla” da diyebilirsiniz. Asistan temanızın tasarım diline uygun ayarlar öneriyor. Beğenmediyseniz değiştirme isteği yazın, yeniden üretsin.

100+ CSS değişkeni ile tam kontrol

Rubik’in swatch stil editörü 100’den fazla CSS değişkeni sunuyor. Her detayı kontrol edebilirsiniz:

  • Swatch boyutu, şekli, köşe yarıçapı
  • Kenarlık rengi, kalınlığı, stili (normal, seçili, hover)
  • Swatch arası boşluk
  • Seçili gösterge tipi (kenarlık, onay işareti, gölge)
  • Tükenen varyant stili (soluk, çizgi, gizle)
  • Hover animasyonu ve geçiş süresi
  • Etiket yazı tipi, boyutu, rengi
  • Tooltip ayarları

CSS bilginiz varsa değişkenleri doğrudan düzenleyebilirsiniz. Bilginiz yoksa AI Visual Settings Assistant kullanın. Her iki yol da aynı sonucu veriyor.

Shadow DOM: neden önemli

Rubik swatch’ları Shadow DOM içinde render ediyor. Bu teknik detay neden önemli?

Temanızın CSS’i swatch’larınızı bozamaz. Başka bir uygulamanın CSS’i de bozamaz. Swatch CSS’i de temanızı bozamaz. Her şey izole çalışıyor. Tema güncellemelerinde, yeni uygulama yüklemelerinde veya özel CSS eklemelerinde swatch’larınız olduğu gibi kalıyor.

Bu, özellikle karmaşık temalarda veya çok sayıda uygulama kullanan mağazalarda büyük fark yaratıyor. CSS çakışması sorunlarıyla uğraşmanıza gerek kalmıyor.

Video

Swatch özelleştirme seçeneklerini pratikte görmek için:

Rubik Variant Images’ı ücretsiz deneyin

Sık sorulan sorular

CSS bilmeden swatch özelleştirebilir miyim?

Evet. AI Visual Settings Assistant’a ne istediğinizi düz Türkçe yazın, yapay zeka CSS’i sizin yerinize üretsin. “Swatch’ları yuvarlak yap, boyutu büyüt, kenarlık ekle” gibi komutlar yeterli.

Aynı üründe renk için resim, beden için metin swatch kullanabilir miyim?

Evet. Her seçenek grubuna farklı swatch tipi atayabilirsiniz. Renk seçeneği resim swatch gösterirken beden seçeneği pill gösterebilir. Hepsi aynı sayfada birlikte çalışıyor.

Swatch CSS’i temamı bozabilir mi?

Hayır. Rubik swatch’ları Shadow DOM içinde render ediyor. Swatch CSS’i temanızdan tamamen izole. Temanızın CSS’i swatch’ları etkilemez, swatch CSS’i de temanızı etkilemez.

Tükenen varyantların swatch’larını gizleyebilir miyim?

Evet. Tükenen varyantlar için soluk gösterim, üstü çizili, çarpı işareti veya tamamen gizleme seçenekleri var. Mağazanızın stratejisine göre en uygununu seçin.

Resim swatch’lar için ayrı görsel yüklemem gerekiyor mu?

Hayır. Resim swatch’lar Shopify’daki ürün fotoğraflarından otomatik çekiliyor. Varyanta atanmış ilk resim swatch olarak kullanılıyor. İsterseniz özel bir swatch görseli de atayabilirsiniz.

İlgili yazılar

Co-Founder of Rubik Variant Images & Swatch

Related Posts