Her widget öğesinin görünümünü özelleştirme

Widget style bölümü, ürün sayfası widget'ını ayrı öğelere ayırarak her birini bağımsız biçimde stillendirmenizi sağlar. Bu bölümü paket editöründe açtığınızda her öğe için bir akordeon paneli bulursunuz. Bu panellerde renkleri, yazı tiplerini, kenarlıkları, boşlukları, rozetleri ve daha fazlasını kontrol edebilirsiniz.

Widget style bölümü nasıl çalışır

Paketin Style sekmesini açın ve Widget style bölümünü bulun. O öğenin kontrollerini göstermek için bir panel başlığına tıklayın. Bir başlığın üzerine geldiğinizde önizlemede karşılık gelen öğe vurgulanır. Bazı paneller yalnızca ilgili özellik pakette kullanılabilir olduğunda görünür.

Çoğu panel aynı temel bileşenleri paylaşır: renk seçici, yazı tipi boyutu ve yazı tipi stili seçici. Teklif kartı veya rozet gibi bir kutuyu biçimlendiren panellerde ayrıca arka plan rengi, kenarlık rengi, kenarlık genişliği ve köşe yarıçapı bulunur. Değişiklikleriniz paketin geri kalanıyla birlikte kaydedilir.

Paneller, öğe öğe

Header

Widget başlığının metin rengini, yazı tipi boyutunu ve yazı tipi stilini kontrol eder. Başlık metnini Style sekmesinde daha yukarıda girerek Header alignment seçeneğini görünür hâle getirin: Left, Center, Center line through veya Right. Hizalama Center line through olarak ayarlandığında bu panelde çizginin rengi ve kalınlığı için ek bir kontrol görünür.

Offer card

Bu, her teklifin, yani miktar kademesinin, etrafındaki kutudur. Üç görsel durumu kapsadığı için en büyük paneldir:

• Teklif seçilmedi: varsayılan durum için arka plan rengi, kenarlık rengi ve kenarlık genişliği.
• Teklif üzerine gelindiğinde: müşteri kartın üzerine geldiğinde uygulanan aynı üç kontrol.
• Teklif seçildiğinde: o anda seçili teklif için aynı üç kontrol.

Panel ayrıca kartlar için ortak özellikleri ayarlar: köşe yarıçapı, kartlar arasındaki boşluk, yatay ve dikey iç boşluk ile radyo düğmesini gösteren veya gizleyen bir Radyo seçeneği. Animasyonlu arka plan efekti, Stil sekmesinin daha üst kısmındaki Dekorasyon anahtarıyla ayrı olarak ayarlanır (Blobs, Rings, Hearts, Starburst, Percent, Stars, Clock veya Money) ve yalnızca seçili teklifte görünür. Teklif kartı renkleri radyo düğmesinin görünümünü de kontrol eder.

Teklif başlığı ve teklif alt başlığı

Her biri teklifin başlık satırı ve alt başlık satırı için renk, yazı tipi boyutu ve yazı tipi stiline sahip iki ayrı panel.

İndirim etiketi

İndirim etiketini metin rengi, arka plan rengi, yazı tipi boyutu ve yazı tipi stiliyle biçimlendirir. Bu ayarların hediye ek rozetlerini de etkilediğini unutmayın.

Teklif görseli

Teklif görselinin boyutunu, köşe yarıçapını, kenarlık rengini, kenarlık genişliğini ve bir Gölge seçeneğini (Yok, Küçük, Orta veya Büyük) kontrol eder. Ayrıca görselin nasıl görüntüleneceğini ayarlar:

• Orijinal: görselin doğal en-boy oranını korur.
• Kare: görseli kare olacak şekilde kırpar.
• Kare (üst): görseli kare olacak şekilde kırpar ve üst kısmını korur.
• Kare (sığdır): görselin tamamını kırpmadan bir karenin içine sığdırır.

Miktar rozeti

Teklif görselinin üzerinde yer alabilen küçük miktar numarasını biçimlendirir. Metin rengini, arka plan rengini, köşe yarıçapını, yazı tipi boyutunu, yazı tipi stilini ve Konum seçeneğini (Sağ üst, Sol üst, Sağ alt veya Sol alt) ayarlayabilirsiniz. "Miktar rozetini göster" etkinleştirildiğinde bu numara teklif görselinde görünür.

Varyant etiketi

Varyant seçeneği başlıklarının (örneğin Beden veya Renk) ve satır numaralarının rengini, yazı tipi boyutunu ve yazı tipi stilini ayarlar.

Açılır menü

Varyant açılır menüleri için metni, arka planı, kenarlığı, köşeleri ve iç boşluğu ayarlamak üzere ayrı Açılır menü panelini kullanın.

Teklif rozeti

Rozet, teklif üzerindeki çağrı metnidir (örneğin "En popüler"). Bu panel, alışılmış metin rengi, arka plan rengi, yazı tipi boyutu ve yazı tipi stilinin yanı sıra birçok hazır seçenek içeren bir Rozet şekli seçici sunar:

• Varsayılan, Katlanmış, Hap şeklinde
• Sağ ok, Sol ok
• Kare
• Afiş, Yuvarlatılmış afiş
• Köşe şeridi, Yan şerit, Alternatif yan şerit, Yuvarlatılmış yan şerit

Fiyat

Fiyat paneli, her biri kendi rengine, yazı tipi boyutuna ve yazı tipi stiline sahip üç metin stilini gruplandırır:

• Ana fiyat: geçerli satış fiyatı.
• Karşılaştırma fiyatı: üstü çizili "önceki" fiyat.
• Birim başına metin: birim fiyat metni.

Paket

Ürün paketlerinde ayrıca ürün başlığı metni, paket öğeleri arasındaki kenarlık ve ürünler arasındaki artı işareti için bir Paket paneli bulunur.

Avantajlar

Avantaj madde listesini biçimlendirir. Burada ortak bir yazı tipi boyutu ve yazı tipi stilinin yanı sıra, simgelerle metnin farklı olabilmesi için ayrı bir Metin rengi ve Simge rengi ayarlarsınız.

Hediye ve ek satış

Ücretsiz hediye bloğunu, her biri arka plan rengi, başlık rengi, yazı tipi boyutu ve yazı tipi stiline sahip iki durumda biçimlendirir:

• Seçili teklif hediyesi: seçili teklifteki hediye bloğu.
• Seçili olmayan teklif hediyesi: diğer teklifler üzerindeki hediye bloğu.

Üçüncü bir grup olan Hediye görseli, hediye görselinin genişliğini ve köşe yarıçapını kontrol eder.

Hediye ve Mix & match açılır penceresi görselleri

Stil > Modal stili > Hediye modalı yolunu açın ve Görsel sığdırma seçeneğini bulun. Bu kontrollere bir hediye veya Mix & match seçicisinin yanındaki Modal stilini özelleştir seçeneğinden de ulaşabilirsiniz. Fotoğrafın tamamının oranlarını korumak için Orijinal, tek tip küçük görseller için Kare seçeneğini belirleyin. Bu ayar, bu indirim içindeki hediye seçimi ve paket havuzu açılır pencerelerinde ortaktır; ana widget'ın görselleri ise ayrı Teklif görseli kontrollerini kullanır.

Alt bilgi

Widget alt bilgisi metninin rengini, yazı tipi boyutunu ve yazı tipi stilini ayarlar.

Kapsayıcı ve maksimum genişlik

Kapsayıcı paneli, Maksimum genişlik ayarıyla widget'ın genel genişliğini kontrol eder:

• Shopify varsayılanı (44rem): kullanılabilir alan içinde widget'ı 44rem ile sınırlar.
• Tam genişlik (%100): widget'ın kapsayıcısına kadar genişlemesini sağlar.
• Özel: piksel değeri girebileceğiniz bir Genişlik alanı gösterir.

Bu panelde ayrıca düşük stok uyarısı metni için kullanılan bir Uyarı rengi bulunur.

Özel CSS eklemeden önce bu indirimin widget'ı çevresindeki boşluğu ayarlamak için burada Üst kenar boşluğu ve Alt kenar boşluğu seçeneklerini kullanın.

Tam genişlik, widget'ın üst kapsayıcısını doldurur. Temanızdaki dar bir ürün bilgileri sütununu genişletemez.

Düzenleme ipuçları

• Çalışırken canlı önizlemeyi izleyin. Bir panel başlığının üzerine geldiğinizde eşleşen öğe vurgulandığından, bir değeri değiştirmeden önce doğru bölümü düzenlediğinizi doğrulayabilirsiniz.
• Teklif kartının üç durumunu, seçili değil, üzerine gelindiğinde ve seçili, birlikte biçimlendirin; böylece seçili durum diğerlerinden net biçimde ayrışır.
• Panellerde bulunmayan bir biçimlendirmeye ihtiyacınız varsa bölümün altındaki Özel CSS paneli, widget stillerini geçersiz kılmak üzere CSS eklemenize olanak tanır.