Temanıza özel CSS ekleme

Basamaklı biçim tablosu (CSS), öğelerin temanızda nasıl görüntülendiğini değiştirir ve aynı anda birkaç sayfanın görünümünü kontrol edebilir. Temanızı, özel CSS özelliğini kullanarak temadaki yerleşik ayarların ötesinde özelleştirebilirsiniz. Temanızın tamamına veya temanızdaki bir şablonun belirli bölümüne özel CSS ekleyebilirsiniz. Özel CSS Ödeme sayfasında desteklenmez.

CSS'yi özelleştirebilmeniz için CSS vs HTML bilginizin olması gerekir. Temanızı özelleştirmeden önce hangi destek düzeyinin kullanılabildiğini anladığınızdan emin olun.

Özel CSS kullanırken dikkat edilmesi gereken hususlar

Not

Özel CSS, temanızın ayarlarını geçersiz kılarak çalışır. Bu nedenle, özel CSS kullanarak yaptığınız değişiklikler temanızın yerleşik ayarlarına göre önceliklidir.

Temanıza özel CSS eklemeden önce aşağıdaki hususları gözden geçirin:

• Aşağıdaki CSS seçiciler, özel CSS'de desteklenmez:

  • At-rule kullanılamaz.
  • Bölüm düzeyinde CSS için shopify-section sınıfıyla tema tarafından işlenen Shopify bölüm öğesinin kimliğini veya sarmalayıcı sınıfını hedefleyemezsiniz.

• Üst bölüm öğesini saran etiketle özel bir CSS kuralı belirtilirse bu alt etiket olarak kabul edilir ve ilgili bölüme stil kuralı uygulanır. Varsayılan olarak üst bölüm <div> etiketine sarmalanır ancak bu, tema geliştiricileri tarafından bölüm şemasında izin verilen değerlerden herhangi biri olacak şekilde ayarlanabilir.

• Şu anda özel CSS'de URL'ler kullanılırken yalnızca https://cdn.shopify.com alan adına izin verilir.

• Özel yazı tipleri kısıtlanmaz. Ancak özel yazı tipleri, metin işlenmeden önce tarayıcılar tarafından indirilen ve mağazanın genel performansını etkileyebilecek ayrı bir kaynaktır. Vitrininizin özel yapı tiplerinden olumsuz yönde etkilenmemesini sağlamak sizin sorumluluğunuzdadır. Temanız için özel yazı tiplerini kullanmayı öğrenin.

• Temanın tümünü etkileyen CSS kuralları 1500 karakterle sınırlıdır.

• Belirli bir bölümü etkileyen CSS kuralları 500 karakterle sınırlıdır.

• Kullandığınız CSS seçicilere veya sınıflarına bağlı olarak temanızı güncellemek özel CSS'nizin çalışmamasına neden olabilir.

Shopify, gelişmiş tema özelleştirmelerini desteklemez. Özel CSS'nizde bu sınırlamalarla ilgili bir hatayla karşılaşırsanız ve hatanın kaynağını belirleyemiyorsanız yararlanabileceğiniz diğer destek kaynaklarının listesine bakın.

Özel CSS ekleme

Online mağazanızdaki tüm sayfaları (Ödeme sayfası hariç) etkileyen temanızın tümüne özel CSS eklenebilir. Örneğin, mağazanızın tümündeki düğmelerin gösterilme şeklini değiştirebilirsiniz.

Adımlar:

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Özelleştir'e tıklayın.
3. Tema ayarları' na tıklayın.
4. Özel CSS'ye tıklayın.
5. Kodunuzu ekleyin.
6. Kayıtyap ' a tıklayın.

Özel CSS, temanızın belirli bir bölümüne de eklenebilir. Örneğin, tek bir bölüme özel yazı tipi boyutu veya arka plan rengi uygulayabilirsiniz.

Adımlar:

1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
2. Özelleştir'e tıklayın.
3. CSS eklemek istediğiniz bölüme tıklayın.
4. Bölüm özellikleri panelinin alt kısmında Özel CSS'ye tıklayın.
5. Kodunuzu ekleyin.
6. Kayıtyap ' a tıklayın.

CSS için ek kaynaklar

CSS'yi özelleştirebilmeniz için CSS vs HTML bilginizin olması gerekir. Temanızı özelleştirmeden önce hangi destek düzeyinin kullanılabildiğini anladığınızdan emin olun.

CSS hakkında daha fazla bilgi edinmek istiyorsanız aşağıdaki kaynakların bazılarını inceleyebilirsiniz:

• CSS ile ilgili temel bilgiler
• CSS kullanarak HTML'yi stillendirme hakkında bilgi
• CSS referansı
• CSS seçicileri