Menambahkan CSS tersuai pada tema anda

Cascading style sheet (CSS) mengubah cara elemen dipaparkan dalam tema anda dan boleh mengawal penampilan beberapa halaman pada satu-satu masa. Anda boleh menyesuaikan tema anda melebihi tetapan yang terbina dalam tema dengan menggunakan ciri CSS tersuai. Contohnya, anda boleh menggunakan CSS untuk menetapkan kecerunan dalam tetapan warna tema anda. Anda boleh menambah CSS tersuai pada seluruh tema anda atau pada bahagian templat khusus dalam tema anda. CSS tersuai tidak disokong pada halaman Pembayaran.

Penyesuaian CSS anda memerlukan sedikit kebiasaan dengan CSS dan HTML. Sebelum anda menyesuaikan tema anda, pastikan anda memahami tahap sokongan yang tersedia.

Pertimbangan untuk menggunakan CSS tersuai

Sebelum anda menambahkan CSS tersuai pada tema anda, semak pertimbangan berikut:

• Pemilih dan sifat CSS yang berikut tidak disokong dalam CSS tersuai:
  • Peraturan at @import, @charset dan @namespace tidak boleh digunakan
  • Untuk CSS tahap bahagian, hanya peraturan at @media, @container, @layer dan @supports dibenarkan
  • Untuk CSS tahap bahagian, anda tidak boleh menyasarkan ID atau kelas elemen Bahagian Shopify pembalut yang dipaparkan oleh tema dengan kelas shopify-section
  • Sifat content tidak tersedia dalam CSS tersuai
• Jika peraturan CSS tersuai diisytiharkan dengan tag yang membalut elemen bahagian induk, maka ini dianggap tag keturunan dan peraturan penggayaan digunakan pada bahagian tersebut. Harap maklum bahawa secara lalai bahagian induk dibalut dalam tag <div>, tetapi ini boleh ditetapkan kepada mana-mana nilai yang dibenarkan dalam skema bahagian oleh pembangun tema.
• Pada masa ini, hanya domain https://cdn.shopify.com dibenarkan apabila menggunakan URL dalam CSS tersuai.
• Fon tersuai tidak disekat. Namun begitu, fon tersuai ialah sumber berasingan yang dimuat turun oleh pelayar sebelum teks dipaparkan, yang dapat memberikan kesan terhadap prestasi keseluruhan kedai. Menjadi tanggungjawab anda untuk memastikan laman kedai anda tidak terjejas secara negatif oleh fon tersuai. Ketahui cara untuk menggunakan fon tersuai dalam tema anda.
• Peraturan CSS yang menjejaskan seluruh tema terhad kepada 1500 aksara.
• Peraturan CSS yang menjejaskan bahagian khusus terhad kepada 500 aksara.
• Bergantung pada pemilih atau kelas CSS yang anda gunakan, mengemaskinikan tema anda mungkin akan menyebabkan CSS tersuai anda berhenti berfungsi.

Shopify tidak menyokong penyesuaian tema lanjutan. Jika anda menghadapi ralat yang berkaitan dengan had ini dalam CSS tersuai anda dan tidak dapat menentukan punca ralat tersebut, maka rujuk senarai sumber sokongan lain yang tersedia.

Tambah CSS tersuai

CSS tersuai boleh ditambah pada seluruh tema anda yang menjejaskan semua halaman dalam kedai dalam talian anda kecuali halaman Pembayaran. Contohnya, anda boleh menukar cara butang dipaparkan pada seluruh kedai anda.

Langkah-langkah:

1. Daripada pentadbir Shopify anda, pergi ke Kedai Dalam Talian > Tema.

2. Klik Edit tema.

3. Klik Tetapan tema.

4. Klik CSS Tersuai.

5. Tambahkan kod anda.

6. Klik Simpan.

CSS tersuai juga boleh ditambah pada bahagian khusus tema anda. Jika anda menambah CSS tersuai pada bahagian tema anda, maka CSS itu disekopkan pada bahagian tersebut. Contohnya, anda boleh menggunakan saiz fon tersuai atau warna latar belakang pada satu bahagian.

Langkah-langkah:

1. Daripada pentadbir Shopify anda, pergi ke Kedai Dalam Talian > Tema.

2. Klik Edit tema.

3. Klik bahagian yang anda mahu tambahkan CSS.

4. Di bahagian bawah panel sifat bahagian, klik CSS Tersuai.

5. Tambahkan kod anda.

6. Klik Simpan.

Sumber tambahan untuk CSS

Penyesuaian CSS anda memerlukan sedikit kebiasaan dengan CSS dan HTML. Sebelum anda menyesuaikan tema anda, pastikan anda memahami tahap sokongan yang tersedia.

Jika anda berminat untuk mengetahui lebih lanjut tentang CSS, maka anda boleh meneroka beberapa sumber yang berikut:

• Asas CSS
• Belajar menggayakan HTML menggunakan CSS
• Rujukan CSS
• Pemilih CSS