使用自定义 CSS 和 AI 代码助手自定义您的店铺

自定义 CSS 可让具备编程能力的商家在内置主题设置之外，进一步调整店铺外观，涵盖全局主题和单个组件两个层级。您可以自行编写 CSS，也可以使用 AI 代码助手，根据您用对话方式描述的需求为您生成 CSS。

本文将说明自定义 CSS 的相关限制、如何手动添加 CSS、如何使用 AI 代码助手生成 CSS，以及如何移除已添加的 CSS。

注意：自定义 CSS 不支持结账页面。

了解自定义 CSS 的限制

在添加自定义 CSS 之前，请注意以下限制，无论您是自行编写 CSS，还是使用 AI 代码助手生成 CSS，这些限制均适用：

@ 规则：
- 组件级别的 CSS 完全不支持 @ 规则。
- 全局主题 CSS 仅允许以下 @ 规则：@color-profile、@font-face、@counter-style、@font-feature-values、@font-palette-values、@keyframes、@page、@property。

URL 限制：仅允许使用来自 https://*.myshopline.com 域名的 URL。
字符数限制：
- 全局主题 CSS 最多 1,500 个字符。
- 组件级别 CSS 最多 500 个字符。

手动添加自定义 CSS

如需在全局主题或组件级别添加自定义 CSS：

前往【在线商店】>【店铺设计】，在当前主题模块中点击【设计】。
选择要添加 CSS 的层级：
- 全局主题：点击【主题设置】图标，然后选择【自定义 CSS】。
- 组件级别：选择要设置样式的组件，然后找到该组件的【自定义 CSS】模块。
输入您的 CSS 代码，然后点击【保存】以应用更改。

使用 AI 代码助手生成自定义 CSS

AI 代码助手仅适用于 OS 3.0 主题。如果您的店铺使用的是 OS 2.1 主题，主题编辑器中将不会出现此图标，您仍然可以按照上文所述手动添加自定义 CSS。

除了自行编写 CSS，您也可以用对话方式描述想要的样式变更，让 AI 代码助手为您生成对应代码。

如何找到 AI 代码助手？

进入主题编辑器后（依序点击【在线商店】>【店铺设计】，在【我的主题】标签页中点击对应主题旁的【设计】），AI 代码助手图标会出现在以下三个位置：

页面标题旁：位于您当前查看页面名称（例如首页）旁边，显示在左侧边栏顶部。
组件标题旁：位于特定区块或组件标题旁边（例如【轮播图】或【图片横幅】）。
自定义 CSS 设置旁：显示在页面或组件设置面板中【自定义 CSS】标题旁边。

如何使用 AI 代码助手生成 CSS？

如需使用 AI 代码助手生成 CSS，请按以下步骤操作：

在主题编辑器侧边栏中，选择要调整的页面或组件。
点击所选页面或组件标题旁的【AI 代码助手】图标。
用对话的方式描述您想要的店铺前台样式变更（例如：「将产品标题文字改为蓝色」）。
AI 代码助手会输出对应的 CSS 代码。
点击【应用】，代码会自动填入【自定义 CSS】字段并显示预览。
在主题编辑器中点击【保存】，将更改发布到您的主题。

使用场景

以下示例说明如何使用 AI 代码助手调整店铺前台组件的样式。在此情境中，我们会将商品详情页上【商店推荐】组件的标题（例如「您可能还喜欢」）调整为字号更大、左对齐、粉色：

从您的 SHOPLINE 管理后台，前往【在线商店】>【店铺设计】，在【我的主题】标签页中点击【设计】进入主题编辑器。
前往【商品详情】页面，选【商店推荐】组件。
点击图标打开 AI 代码助手，输入：「增大组件标题字号，将其左对齐，并将颜色改为粉色」，然后点击【生成】。
AI 代码助手会自动生成 CSS 代码。查看代码后，点击【应用】将其套用到【自定义 CSS】字段。
預覽效果後，如果一切正常，點擊【保存】發布更新。

移除自定义 CSS

如需移除您已添加的自定义 CSS，无论是手动编写还是通过 AI 代码助手生成：

前往【在线商店】>【店铺设计】，在【我的主题】标签页中点击对应主题旁的【设计】。
打开已应用代码的【自定义 CSS】部分。
删除您要移除的代码块。
点击【保存】。