如何在 Shopify 主題的特定部分載入 CSS?
P粉752812853
P粉752812853 2023-08-30 09:06:40
0
1
514
<p>我正在嘗試建立另一個部分並套用資產資料夾中的 CSS。但是當我把<code>{{ 'style-section-block.css' |資產網址| stylesheet_tag }}</code> 到我想要應用CSS 的頁面,它也會影響其他部分,即使我只會放入我想要更改的部分。 </p> <p>我希望能夠編輯一個部分頁面</p>
P粉752812853
P粉752812853

全部回覆(1)
P粉083785014

如果您想套用 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 連結。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板