Özel CSS

Görsel düzenleyicinin ötesindeki stil ihtiyaçları için Sami Product Labels yerleşik bir CSS düzenleyicisi içerir. Ayrıca z-index ile rozet katmanlamasını denetleyebilir, üzerine gelindiğinde görünen araç ipuçları ekleyebilir ve görsel rozetler için alt metin belirleyebilirsiniz.

Özel CSS nasıl eklenir

1. Rozet düzenleyicisini açın

   Sami Product Labels uygulamasında Badges & Labels bölümüne gidin. Create badge seçeneğini veya mevcut bir rozet için Actions sütunundaki Edit badge/label simgesini seçin.

2. Design sekmesine gidin

   Rozet düzenleyicisinde Design seçeneğini belirleyin. Bu sekme, düzenleyici açıldığında varsayılan olarak seçilidir.

3. Advanced Settings bölümüne kaydırın

   Design sekmesinin alt kısmına yakın Advanced settings bölümünü genişletin.

4. “Custom css” seçeneğini etkinleştirin

   Advanced altında Custom css seçeneğini açın.

5. Bir seçici ekleyin ve CSS kodunuzu yazın

   CSS düzenleyicisi, CSS reference altında üç seçenekle görünür:

   • .samita_productLabel-content rozetin tamamını stillendirir.
   • .samita_productLabel-content-text metin rozetlerini stillendirir.
   • .samita_productLabel-content img görsel rozetleri stillendirir.

   İhtiyacınız olan seçeneği seçin. Uygulama, düzenleyiciye geçerli rozet kimliğiyle sınırlandırılmış bir seçici ekler; örneğin .__content--94129. Seçicinin rozete özgü bu kısmını koruyun, ardından süslü parantezlerin içine yalnızca ihtiyacınız olan bildirimleri ekleyin.

   /* Use the badge ID inserted by the app in place of YOUR_BADGE_ID. */
   .samita_productLabel-content.__content--YOUR_BADGE_ID {
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
   }
   
   .samita_productLabel-content.__content--YOUR_BADGE_ID:hover {
     transform: scale(1.1);
     transition: transform 0.2s ease;
   }

   

   Custom CSS düzenleyicisine rozete özgü bir seçici eklemek için CSS reference altında bir sınıf seçin.

6. Önizleyin ve kaydedin

   Düzenleme yaparken canlı önizlemeyi kontrol edin. Sonuç doğru göründüğünde Save seçeneğini belirleyin, ardından rozeti mağaza vitrininizdeki ilgili koleksiyon veya ürün sayfasında doğrulayın.

Dikkat

Özel CSS bu rozetle birlikte kaydedilir, ancak seçicileri hangi mağaza vitrini öğelerini etkileyebileceğini yine de belirler. Uygulamanın oluşturduğu rozete özgü seçiciyi koruyun. Tek başına .samita_productLabel-content gibi geniş bir seçici, diğer rozetlerle de eşleşebilir.

Z-index denetimi

Bir ürün görseli katmanının, yapışkan üst bilginin veya başka bir rozetin arkasında kalan rozeti düzeltin.

1. Advanced settings bölümünde Z-index seçeneğini etkinleştirin.
2. 1 ile 100 arasında bir değer girin. Daha yüksek değerler, rozeti daha düşük z-index değerine sahip öğelerin önüne yerleştirir.

Rozet katmanlamasını denetlemek için bir z-index değeri belirleyin.

Not

Z-index, temanızın oluşturduğu yığınlama bağlamından da etkilenir. Rozet değerini yükseltmek rozeti öne getirmiyorsa temadaki bir üst kapsayıcının kendi CSS ayarına ihtiyacı olabilir.

Üzerine gelince araç ipucu

Müşteriler rozetinizin üzerine geldiğinde görünen bir araç ipucu ekleyin. Ürün görselini kalabalıklaştırmadan “New Arrival” veya “Limited Edition” ifadesinin ne anlama geldiğini açıklamak için kullanışlıdır.

1. Advanced settings bölümünde Show tooltip on hover seçeneğini etkinleştirin.
2. Üzerine gelindiğinde görünmesi gereken araç ipucu metnini girin.

Müşteriler rozetin üzerine geldiğinde görüntülenecek araç ipucu metnini ekleyin.

Temel bilgileri yalnızca araç ipucuna koymayın. Dokunmatik ekran kullanıcıları ve klavyeyle gezinen müşteriler üzerine gelme durumunu tetikleyemeyebilir.

Görsel rozetler için SEO alt metni

Ekran okuyucuların bir görsel rozetin anlamını betimleyebilmesi için alt metin belirleyin. Açıklayıcı alt metin, görsel SEO’sunu da destekleyebilir.

1. Advanced settings bölümünde Seo alt text seçeneğini etkinleştirin.
2. Rozetin ilettiği mesajın kısa bir açıklamasını girin; örneğin “20% off sale badge” veya “Free shipping label”. Anahtar kelime doldurmaktan ve “image of” gibi ifadelerden kaçının.

Erişilebilirlik ve SEO için alt metin belirleyin.

Sonraki adımlar

• Rozet stilini değiştirme: Görsel düzenleyici denetimlerini kullanarak rozetinizi özelleştirin.
• Rozet konumunu değiştirme: Rozetinizi sayfada doğru yere yerleştirin.

İpucu

Desteğe mi ihtiyacınız var?

Bu adımları uygularken zorlanırsanız bizimle [email protected] adresinden iletişime geçin.