Bagaimana untuk memuatkan CSS dalam bahagian tertentu tema Shopify?

Question

Saya cuba mencipta bahagian lain dan menggunakan CSS daripada folder aset. Tetapi apabila saya meletakkan {{ 'style-section-block.css' | url_stylesheet_tag }} walaupun saya hanya Letakkan bahagian yang saya ingin ubah.

Saya mahu dapat mengedit sebahagian daripada halaman

Answer 1

Jika anda ingin menggunakan CSS pada bahagian tertentu, tambahkan kelas atau ID unik pada bahagian yang ingin anda gayakan dahulu. Selepas menggunakan kelas atau ID unik ini dalam fail CSS anda, anda boleh menggayakan bahagian tersebut. Contohnya ialah

<div class="my-section">
  <!-- section content -->
</div>

"bahagian saya" ialah nama kelas unik bahagian tersebut. Anda boleh menggunakan nama kelas untuk menambah gaya pada bahagian.

.my-section {
      font-size: 24px;      
    }

Berdasarkan tema Shopify. Anda boleh menggunakan fail CSS secara bersyarat berdasarkan pemegang halaman semasa atau templat halaman. Daripada apa yang saya fikirkan, anda boleh melakukan pembolehubah "template" atau "page.handle" ini dalam fail "reka letak" tema anda. Saya maksudkan fail "theme.liquid". Anda boleh menambah kod berikut pada bahagian "kepala" fail "susun atur" anda.

{% if template contains 'your-specific-template' or page.handle == 'your-specific-page-handle' %}
  {{ 'style-section-block.css' | asset_url | stylesheet_tag }}
{% endif %}

Ganti "templat khusus anda" dengan nama templat anda atau "pengendali halaman khusus anda" dengan nama pemegang halaman anda. Dan alih keluar pautan CSS daripada bahagian lain.