Wie lade ich CSS in einen bestimmten Teil eines Shopify-Themes?

Question

Ich versuche, einen weiteren Abschnitt zu erstellen und CSS aus dem Assets-Ordner anzuwenden. Aber wenn ich {{ 'style-section-block.css' | obwohl ich nur die Teile einbaue, die ich ändern möchte.

Ich möchte einen Teil einer Seite bearbeiten können

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 链接。