Kart Stili

Kart görünümünü ayarlayan seçenekler. Tasarımcıdaki her stil kontrolü, mağazada onu gerçekten çizen bir kurala bağlıdır; panelde bir ayar varsa mağazada karşılığı vardır.

Panelde nerede

Product Cards → kart → Designer (Tasarımcı) → tuvalde bir öğe seçin → sağ panelde Style (Stil) bölümü. Stil özellikleri gruplara ayrılır: Layout (Yerleşim), Text (Yazı), Colour (Renk), Spacing (Boşluk), Border (Kenarlık), Effect (Efekt), Position (Konum), Image (Görsel). Bir özelliğin kutusunu boş bırakırsanız o özellik hiç yazılmaz.

Katman sırası

Bir öğenin son görünümü şu sırayla oluşur; sonraki öncekini ezer:

1. Marka teması   → ayarlanmamış özelliğin varsayılanı (yazı tipi, yazı rengi, köşe, kenarlık rengi, gölge)
2. Öğe stili      → Style bölümünde yazdığınız değerler
3. Hover          → Hover durumunda yazdığınız değerler (yalnızca kart üzerindeyken)
4. Genişlik       → Tablet ve Mobile için yazdığınız değerler
5. Özel CSS       → tasarımcının altındaki Custom CSS kutusu; en son gelir ve eşit özgüllükte kazanır

Çoğu durumda ilk katman yeterlidir. Marka temasını değiştirdiğinizde bu özellikleri ayarlamadığınız her öğe birlikte değişir. Kart kökü kendi yazı rengini de kurar; böylece koyu bir sayfada beyaz zeminli kart beyaz üstüne beyaz yazıya dönmez.

Durumlar ve genişlikler

• Normal ve Hover durumu: Hover'da yalnızca fareyle kartın üzerine gelindiğinde uygulanacak değerleri yazarsınız. Her özellik hover'da değişemez; yalnızca color, background, opacity, borderWidth, borderColor, boxShadow ve transform hover alır. Yerleşim özellikleri bilerek hover'dan hariçtir, çünkü fare geçerken tüm şeridi yeniden dizerlerdi.
• Desktop, Tablet ve Mobile (Masaüstü, Tablet, Mobil): Seçtiğiniz genişlikte yalnızca girdiğiniz değerler değişir; gerisi devralınır. Tablet kesimi 1024 piksel ve altı, mobil 640 piksel ve altıdır. Ayrı bir "mobil stil seti" yoktur; mobilde kaç sütun gösterileceği öneri widget'ının duyarlı ayarlarındadır (Görüntüleme Tipleri).

Tüm stil özellikleri

Toplam 41 özellik vardır. Bir öğe türüne uygulanmayan özellik o öğede sunulmaz.

Grup	Özellikler
Layout	display (flex, block, inline-flex, none), flexDirection (satır, sütun ve ters yönler), justifyContent, alignItems, flexWrap, gap, flexGrow, width, height, minHeight, maxWidth, overflow (visible, hidden)
Text	fontFamily, fontSize, fontWeight (300 ile 900), fontStyle, lineHeight, letterSpacing, textTransform, textAlign, textDecoration (none, underline, line-through), maxLines
Colour	color, background, opacity
Spacing	padding, margin (bir ila dört değerli, birimli)
Border	borderRadius, borderWidth, borderStyle (none, solid, dashed, dotted), borderColor
Effect	boxShadow, transform (kapalı bir listeden: none, translateY(-4px), translateY(-8px), scale(1.02), scale(1.05), scale(0.98))
Position	insetTop, insetRight, insetBottom, insetLeft, zIndex: yalnızca Image area içindeki bindirme öğeleri için
Image	aspectRatio (varsayılan 1 / 1), objectFit (cover, contain, fill, none, scale-down; varsayılan cover), objectPosition: yalnızca Image area ve Image için

Notlar:

• flexDirection, justifyContent ve alignItems yalnızca Group ve Image area öğelerinde sunulur. gap Group, Image area, Colours, Price ve Rating öğelerinde sunulur.
• maxLines metni N satıra sınırlar. Başlığı bir üründe bir, ötekinde dört satıra uzayan bir şeridin düzensiz görünmesini bununla önlersiniz.
• Ürün adları farklı uzunluktaysa kartlar farklı yükseklikte olur. maxLines ya da sabit yükseklik bunu çözer; ikincisi uzun adları kırpar.

Değer yazım kuralları

Girdiğiniz her değer doğrulanır. Geçersiz değer sessizce atılır: özellik yazılmamış gibi davranır. Alanın altındaki ipucu yazımı söyler:

Tür	Kural
Uzunluk	Birim ister: 32px, 2rem, 50%, auto
Sayı	Birimsiz: 1.4, 2
Renk	#111, rgb(…), hsl(…), transparent, renk adı ya da marka değişkeni
Gölge	Kaydırmalar, bulanıklık ve renk: 0 2px 8px rgba(0,0,0,.1)
Yazı tipi	Yazı tipi listesi: Inter, sans-serif
Oran	Genişlik bölü yükseklik: 4 / 5
Kutu	Bir ila dört uzunluk: 8px ya da 8px 12px

Renk, uzunluk, yazı tipi ve gölge alanlarına marka değişkeni yazabilirsiniz: var(--selwise-brand, #c93a63). Parantezin içinde yalnızca tanımlı marka değişken adları kabul edilir ve ikinci değer yedektir. Marka renk seçici zaten bu biçimi yazar. Değişken adları: Marka Teması.

Özel CSS

Tasarımcının altındaki Custom CSS (Özel CSS) kutusu (kendi kodunuzda CSS alt sekmesi; ikisi aynı alandır) kartın içindeki öğelere uygulanır ve tuvalde yazdığınız anda görünür. Kural yalnızca bu karta sınırlandırılır, sayfanın kalanına ulaşamaz. Varyant seçicinin sınıfları selwise-variant-chip, selwise-variant-chip-selected ve selwise-variant-dropdown'dır. Kartın kendi sınıfları: kök sc-root; öğeler türlerine göre sc-text, sc-price, sc-badge, sc-button, sc-media, sc-stack, sc-rating, sc-swatches ve görsel sc-img; düğme ve renk örnekleri için sc-btn ve sc-swatch. Kesin sınıfı tarayıcının inceleme aracıyla doğrulayın. Mobilde farklı görünüm için medya sorgusu kullanabilirsiniz:

@media (max-width: 640px) {
  .sc-text { font-size: 13px; }
}

Özel CSS'i yalnızca kod düzenleme yetkisi olan roller (Admin) yazar; yetkisi olmayan rolde Custom CSS kutusu görünmez. HTML ve JavaScript yazmak için: Özel Kart Oluşturma.

Stil değişikliği mağazaya yansımıyorsa

Belirti	Sebep
Panelde değişiyor, mağazada değişmiyor	My own code modunda ve HTML dolu; markup tasarımı bastırır. Drawn by alanını The designer yapın
Değer hiç uygulanmıyor	Değer geçersiz (birimsiz uzunluk gibi); alanın altındaki ipucuna bakın
Hover etkisi yok	Özellik hover almıyor (örneğin padding) ya da öğe Hover durumunda değil
Mobilde değişmiyor	Değeri Mobile genişliğinde girmediniz; yalnızca o genişlikte yazılan değerler geçerlidir
Özel CSS etkisiz	Seçici kartın içindeki öğeyle eşleşmiyor ya da CSS geçersiz