Temanıza özel CSS ekleme
Basamaklı stil sayfası (CSS), öğelerin temanızda nasıl görüntüleneceğini değiştirir ve aynı anda birkaç sayfanın görünümünü kontrol edebilir. Özel CSS özelliğini kullanarak temanızı, yerleşik ayarlarının ötesinde kişiselleştirebilirsiniz. Örneğin, temanızın renk ayarlarında gradyan ayarlamak için CSS kullanabilirsiniz. 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'nizi kişiselleştirmek, CSS ve HTML hakkında biraz bilgi sahibi olmanızı gerektirir. Temanızı kişiselleştirmeden önce ne düzeyde destek sunulduğunu anladığınızdan emin olun.
Özel CSS kullanırken dikkat edilmesi gerekenler
Temanıza özel CSS eklemeden önce aşağıdaki hususları gözden geçirin:
- Aşağıdaki CSS seçicileri ve özellikleri özel CSS'te desteklenmez:
@import,@charsetve@namespace@ kuralları kullanılamaz- Bölüm düzeyindeki CSS için yalnızca
@media,@container,@layerve@supports@ kurallarına izin verilir - Bölüm düzeyindeki CSS'te, temanın
shopify-sectionsınıfıyla oluşturduğu sarmalayıcı Shopify Bölümü öğesinin kimliğini veya sınıflarını hedefleyemezsiniz. contentözelliği özel CSS'te kullanılamaz.
- Bir özel CSS kuralı, üst bölüm öğesini sarmalayan etiketle bildirilirse bu, bir alt etiket olarak kabul edilir ve stil kuralı o bölüme uygulanır. Varsayılan olarak üst bölümün bir
<div>etiketiyle sarmalandığını, ancak bunun tema geliştiricileri tarafından bölüm şemasındaki izin verilen değerlerden herhangi birine ayarlanabileceğini unutmayın. - Şu anda özel CSS'te URL'ler kullanılırken yalnızca https://cdn.shopify.com alan adına izin verilmektedir.
- Özel yazı tipleri kısıtlanmamıştır. Ancak özel yazı tipleri, metin oluşturulmadan önce tarayıcılar tarafından indirilen ayrı bir kaynaktır ve bu da mağazanın genel performansını etkileyebilir. Dijital vitrininizin özel yazı tiplerinden olumsuz etkilenmemesini sağlamak sizin sorumluluğunuzdadır. Temanızda özel yazı tiplerini kullanma hakkında bilgi edinin.
- Temanın tamamı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çicilerine veya sınıflarına bağlı olarak, temanızı güncellemek özel CSS'inizin çalışmayı durdurmasına neden olabilir.
Shopify, gelişmiş tema kişiselleştirmelerini desteklemez. Özel CSS'inizde bu sınırlamalarla ilgili bir hatayla karşılaşırsanız ve hatanın nedenini belirleyemiyorsanız kullanılabilecek diğer destek kaynakları listesine başvurun.
Özel CSS ekleme
Özel CSS, Ödeme sayfası hariç online mağazanızdaki tüm sayfaları etkileyecek şekilde temanızın tamamına eklenebilir. Örneğin, mağazanızın tamamında düğmelerin görüntülenme şeklini değiştirebilirsiniz.
Adımlar:
Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.
Temayı düzenle'ye tıklayın.
Tema ayarları'na tıklayın.
Özel CSS'e tıklayın.
Kodunuzu ekleyin.
Kaydet'e tıklayın.
Özel CSS, temanızın belirli bir bölümüne de eklenebilir. Temanızın bir bölümüne özel CSS eklerseniz CSS'in kapsamı o bölümle sınırlı olur. Örneğin, tek bir bölüme özel bir yazı tipi boyutu veya arka plan rengi uygulayabilirsiniz.
Adımlar:
Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.
Temayı düzenle'ye tıklayın.
CSS eklemek istediğiniz bölüme tıklayın.
Bölüm özellikleri panelinin alt kısmında Özel CSS'e tıklayın.
Kodunuzu ekleyin.
Kaydet'e tıklayın.
CSS için ek kaynaklar
CSS'nizi kişiselleştirmek, CSS ve HTML hakkında biraz bilgi sahibi olmanızı gerektirir. Temanızı kişiselleştirmeden önce ne düzeyde destek sunulduğunu anladığınızdan emin olun.
CSS hakkında daha fazla bilgi edinmekle ilgileniyorsanız aşağıdaki kaynaklardan bazılarını inceleyebilirsiniz: