Widget'a özel CSS ekleme

Bundlex, widget stilini düzenlemek için kapsamlı bir görsel düzenleyici sunar. Ancak bazen düzenleyicinin göstermediği bir ayrıntıya erişmeniz veya temanızın widget'a zorla uyguladığı bir ayarı geçersiz kılmanız gerekebilir. Özel CSS tam olarak bu durumlar için güçlü kullanıcıların başvurduğu çözümdür. Bu makalede CSS ekleyebileceğiniz iki yeri ve widget'ı güvenilir şekilde nasıl hedefleyeceğinizi ele alıyoruz.

Özel CSS ekleyebileceğiniz iki yer

Kapsamları farklı olan iki ayrı Özel CSS alanı vardır.

Paketin Özel CSS alanı

Her paketin Özel CSS bölümü vardır ve bu bölüm Stil sekmesinde bulunur. Buraya yapıştırdığınız CSS yalnızca ilgili paketle birlikte saklanır. Bu nedenle, bir ayarın yalnızca belirli paketin gösterildiği yerde uygulanmasını istiyorsanız doğru seçim budur.

1. Paketi Bundlex kontrol panelinde açın.
2. Stil sekmesini açın ve Özel CSS bölümünü, Widget stili altındaki son öğe olarak genişletin.
3. Kurallarınızı kod düzenleyicisine yapıştırın. Alan, biçim için bir yer tutucuyla ipucu verir: .bx-widget-container {margin-bottom: 10px;}.
4. Paketi kaydedin.

Uygulama gömülü CSS alanı

Shopify tema düzenleyicisinde Uygulama gömmeleri altında etkinleştirdiğiniz tema uygulaması uzantısı olan Bundlex uygulama gömmesinde de bir Özel CSS alanı bulunur. Bu alan, Gelişmiş ayarları göster etkinleştirildiğinde görünür. Buradaki CSS, gömmenin oluşturulduğu her yerde uygulanır. Bu nedenle widget'ın göründüğü tüm ürün sayfalarında geçerli olması gereken tema genelindeki ayarlar için kullanın.

1. Shopify yöneticisinde Online Mağaza bölümünü açın ve Temayı düzenle seçeneğine tıklayın.
2. Uygulama yerleştirmeleri bölümünü açın ve Bundlex Bundles seçeneğini bulun.
3. Gelişmiş ayarları göster seçeneğini etkinleştirin ve kurallarınızı Özel CSS alanına yapıştırın.
4. Temayı kaydedin.

Genel kural olarak, paket başına ayarlar için paket alanını, widget'ın göründüğü her yerde geçerli olmasını istediğiniz değişiklikler için uygulama gömmesi alanını kullanın.

Widget'ı hedefleme

Bundlex işaretlemesi bx- sınıflarını kullanır. Bunlar mevcut widget'ta kullanışlı hedeflerdir:

• .bx-widget-container - widget kapsayıcısı.
• .bx-widget - widget içeriği.
• .bx-offer-wrap - teklif sarmalayıcısı.
• .bx-offer - bu sarmalayıcının içindeki teklif kartı.
• .bx-active .bx-offer - seçili teklif kartı; active sınıfı sarmalayıcısındadır.
• .bx-offer-title ve .bx-offer-subtitle - teklif metni.
• .bx-original-price ve .bx-discounted-price - orijinal ve indirimli fiyat metni.

Kuralları widget kapsayıcısıyla sınırlandırın. Örneğin:

.bx-widget-container .bx-offer-title {
  font-weight: 700;
}

Stil uygulamadan önce ürün sayfanızdaki öğeyi inceleyin. İşaretleme, etkin özelliklere bağlıdır ve widget'ın eski bir sürümünden kopyalanan seçici artık eşleşmeyebilir.

Tema stillerini !important ile geçersiz kılma

Önce yerleşik kontrolleri kullanın. Widget genişliği için Stil > Widget stili > Kapsayıcı > Maksimum genişlik > Tam genişlik (100%) yolunu deneyin. Bir tema kuralı sonucu hâlâ geçersiz kılıyorsa etkilenen öğeyi inceleyin ve !important ifadesini yalnızca buna ihtiyaç duyan bildirimlerde kullanın. Örneğin:

.bx-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

Bu örnek, kullanılabilir üst kapsayıcıyı doldurur; dar bir tema sütununu genişletemez. Bir kuralın etkisi yoksa seçicinin oluşturulan bir öğeyle eşleştiğini, stil sayfasının yüklendiğini ve bildirimin geçerli olduğunu kontrol edin. Ardından hangi çakışan kuralın kazandığını inceleyin. !important kullanmadan daha özgül bir seçici yeterli olabilir.

Ne zaman destekten yardım istemeli

Her iki Özel CSS alanında da yardıma ihtiyacınız olursa Bundlex desteğiyle iletişime geçebileceğiniz belirtilir ve bu teklif gerçektir. Doğru seçiciyi bulamıyorsanız veya özel temanız geçersiz kılmalarınıza !important çözmediği bir şekilde karşı koyuyorsa destek ekibine ürün sayfasının bağlantısını ve yapmak istediğiniz değişikliğin açıklamasını gönderin. Size yapıştırabileceğiniz, test edilmiş bir seçici sağlayabilirler.

Aynı durum, gömmenin Gelişmiş ayarları göster seçeneğiyle açılan seçici alanları için de geçerlidir. Bunlar özel yerleşim, sepete ekle düğmesi, ürün formu ve miktar veya varyant blokları içindir. Bunlar da CSS seçicileridir ve destek ekibi otomatik olarak algılanmayan özel temalar için bunları doldurmanıza yardımcı olabilir.

CSS indirim kurallarını değiştirmez, ancak fiyatları, seçenekleri veya düğmeleri gizleyerek müşterilerin widget'ı kullanmasını engelleyebilir. Bir kural uyguladıktan sonra masaüstü ve mobil cihazlarda tüm teklif durumlarını, varyant seçeneklerini ve Sepete ekle işlemini test edin.