如何在 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 链接。