为模板添加自定义 CSS

层叠样式表 (CSS) 可更改元素在模板中的显示方式，并可一次性控制多个页面的外观。您可以使用自定义 CSS 功能，在模板内置的设置之外对模板进行自定义。例如，您可以在模板的颜色设置中使用 CSS 设置渐变。您可以将自定义 CSS 添加到整个模板，也可以添加到模板中某个模板的特定分区。结账页面不支持自定义 CSS。

自定义 CSS 需要对 CSS 和 HTML 有一定的了解。在自定义模板之前，请确保您了解可获得的支持级别。

在此页面上

使用自定义 CSS 的注意事项

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

自定义 CSS 不支持以下 CSS 选择器和属性：
- 不能使用 At 规则 @import、@charset 和 @namespace
- 对于分区级 CSS，仅允许使用 At 规则 @media、@container、@layer 和 @supports
- 对于分区级 CSS，您无法使用 shopify-section 类来定位模板呈现的 Shopify 分区包装元素的 ID 或类
- content 属性在自定义 CSS 中不可用
如果使用包装父分区元素的标签声明自定义 CSS 规则，则该标签会被视为后代标签，并且样式规则将应用于该分区。请注意，默认情况下，父分区包装在 <div> 标签中，但模板开发者可将其设置为分区 schema 中的任何允许值。
目前，在自定义 CSS 中使用 URL 时，仅允许使用 https://cdn.shopify.com 域名。
自定义字体不受限制。但是，自定义字体是浏览器在呈现文本之前下载的单独资源，这可能会影响商店的整体性能。您有责任确保您的在线店面不会受到自定义字体的负面影响。了解如何在模板中使用自定义字体。
影响整个模板的 CSS 规则限制为 1500 个字符。
影响特定分区的 CSS 规则限制为 500 个字符。
根据您使用的 CSS 选择器或类，更新模板可能会导致您的自定义 CSS 停止工作。

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

添加自定义 CSS

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

步骤：

在 Shopify 后台中，转至在线商店 > 模板。
点击编辑模板。
点击模板设置。
点击自定义 CSS。
添加您的代码。
点击保存。

自定义 CSS 也可以添加到模板的特定分区。如果将自定义 CSS 添加到模板的某个分区，则该 CSS 的作用域将限定于该分区。例如，您可以为单个分区应用自定义字号或背景色。

步骤：

在 Shopify 后台中，转至在线商店 > 模板。
点击编辑模板。
点击要为其添加 CSS 的分区。
在分区属性面板的底部，点击 自定义 CSS。
添加您的代码。
点击保存。

有关 CSS 的其他资源

自定义 CSS 需要对 CSS 和 HTML 有一定的了解。在自定义模板之前，请确保您了解可获得的支持级别。

如果您有兴趣深入了解 CSS，可以浏览以下一些资源：