将自定义 CSS 添加到模板

已于 May 10, 2024 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/online-store/themes/theme-structure/extend/add-css?utm_campaign=social_care&utm_medium=community&utm_source=social。

层叠样式表 (CSS) 可更改元素在模板中的显示方式，并且可以一次控制多个页面的外观。除了模板中内置的设置外，您还可以使用自定义 CSS 功能来自定义模板。您可以向整个模板或模板中的特定模板分区中添加自定义 CSS。结账页面上不支持自定义 CSS。

自定义 CSS 需要熟悉 CSS 和 HTML。在自定义模板之前，请确保您了解可用的支持级别。

本页相关主题

使用自定义 CSS 的注意事项

在将自定义 CSS 添加到模板之前，请查看以下注意事项：

  • 自定义 CSS 中不支持以下 CSS 选择器：

    • 不能使用 @ 规则 @import、@charset 和 @namespace
    • 对于分区级 CSS，仅允许使用 @ 规则 @media、@container、@layer 和 @supports
    • 对于分区级 CSS，无法使用 shopify-section 类来以模板呈现的包装 Shopify 分区元素的 ID 或类作为目标

  • 如果使用包装父分区元素的标签声明自定义 CSS 规则，则它将被视为派生标签，并且样式规则将应用于该分区。请注意，默认情况下，父分区包装在 <div> 标签中，但模板开发人员可以将此设置为分区架构中任何允许的值。

  • 目前，在自定义 CSS 中使用 URL 时，仅允许使用 https://cdn.shopify.com 域名。

  • 自定义字体不受限制。但是，自定义字体是浏览器在呈现文本之前下载的单独资源，这可能会影响商店的整体性能。您需要负责确保您的店面不会受到自定义字体的负面影响。了解如何在模板中使用自定义字体。

  • 影响整个模板的 CSS 规则限制为 1500 个字符。

  • 影响特定分区的 CSS 规则限制为 500 个字符。

  • 根据您使用的 CSS 选择器或类，更新模板可能会导致您的自定义 CSS 停止工作。

Shopify 不支持高级模板自定义。如果您在自定义 CSS 中遇到与这些限制相关的错误，并且无法确定导致错误的原因，请参阅其他可用支持资源的列表。

添加自定义 CSS

自定义 CSS 可以添加到您的整个模板中，这会影响在线商店中除结账页面以外的所有页面。例如，您可以更改按钮在整个商店中的显示方式。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 点击自定义。
  3. 点击模板设置。
  4. 点击自定义 CSS。
  5. 添加您的代码。
  6. 点击保存。

模板设置中自定义 CSS 框的位置

还可以将自定义 CSS 添加到模板的特定分区。如果将自定义 CSS 添加到模板的分区，则系统会将 CSS 的范围限定为该分区。例如，您可以将自定义字体大小或背景颜色应用于单个分区。

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 点击自定义。
  3. 点击要将 CSS 添加到的分区。
  4. 在分区属性面板的底部，点击自定义 CSS。
  5. 添加您的代码。
  6. 点击保存。

分区设置中自定义 CSS 框的位置

CSS 的其他资源

自定义 CSS 需要熟悉 CSS 和 HTML。在自定义模板之前，请确保您了解可用的支持级别。

如果您想详细了解 CSS，可以浏览以下一些资源：

准备好开始使用 Shopify 进行销售了吗？

免费试用