如何在 Shopify 主題的特定部分載入 CSS？

Question

我正在嘗試建立另一個部分並套用資產資料夾中的 CSS。但是當我把{{ 'style-section-block.css' |資產網址| stylesheet_tag }} 到我想要應用CSS 的頁面，它也會影響其他部分，即使我只會放入我想要更改的部分。

我希望能夠編輯一個部分頁面

Answer 1

如果您想套用 CSS 特定部分，請先在您想要設定樣式的部分中新增唯一的類別或 ID。在 CSS 檔案中使用該唯一的類別或 ID 後，您可以設定部分的樣式。範例是

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

“my-section”是該節的唯一類別名稱。您可以使用該類別名稱將樣式新增至部分。

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

根據 Shopify 主題。您可以根據目前頁面句柄或頁面模板有條件地使用 CSS 檔案。根據我的想法，您可以在主題的“佈局”檔案中執行此“模板”或“page.handle”變數。我的意思是“theme.liquid”文件。您可以將以下程式碼新增至「版面配置」檔案的「head」部分。

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

將「您的特定範本」替換為您的範本名稱，或將「您的特定頁面句柄」替換為您的頁面句柄名稱。並從其他部分刪除 CSS 連結。