Temanıza özel CSS ekleme

Bu sayfanın yazdırılma zamanı: Nov 28, 2023. Geçerli sürüm için https://help.shopify.com/tr/manual/online-store/themes/theme-structure/extend/add-css adresini ziyaret edin.

Basamaklı biçim tablosu (CSS), öğelerin temanızda görüntülenme şeklini değiştirir ve aynı anda birkaç sayfanın görünümünü kontrol edebilir. Özel CSS özelliğini kullanarak temanızda, yerleşik ayarlarla yapılabileceğinizden daha fazla özelleştirme yapabilirsiniz. Temanızın tamamına veya temanızdaki bir şablonun belirli bir 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.

Bu sayfada

Özel CSS kullanımıyla ilgili önemli hususlar

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

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

    • @import, @charset ve @namespace "At" kuralları kullanılamaz
    • Bölüm düzeyinde CSS için yalnızca @media, @container, @layer ve @supports "At" kurallarına izin verilir
    • 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.

Tema ayarlarındaki özel CSS kutusunun konumu

Özel CSS, temanızı belirli bir bölümüne de eklenebilir. Temanızı bir bölümüne özel CSS eklersiniz CSS'nin kapsamı o bölüme uygun şekilde belirlenir. Ö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.

Bölüm ayarlarındaki özel CSS kutusunun konumu

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:

Shopify ile satış yapmaya hazır mısınız?

Ücretsiz olarak dene