使用 AI 代码助手为店铺前台生成自定义 CSS

作为一站式智慧电商伙伴，SHOPLINE 积极拥抱 AI 发展趋势，致力于让商家共享 AI 发展成果。借助 AI 代码助手，即使没有技术背景，您也可以通过简单描述，快速生成可直接应用的代码，轻松实现店铺前台的个性化视觉调整。

本文将介绍如何在主题编辑器中找到并使用 AI 代码助手，生成并应用自定义 CSS，让您无需修改主题代码，即可快速完成精准的视觉优化。

如何找到 AI 代码助手？

AI 代码助手已集成于主题编辑器中，您可以在 SHOPLINE Admin 后台 >【在线商店】>【店铺设计】>【设计】从以下三个入口找到 AI 代码助手：

• 页面标题旁：位于左侧边栏顶部，紧邻您当前所查看页面的名称（例如首页）。
  

• 组件标题旁：位于左侧边栏中特定板块或组件标题旁（例如轮播图或图片横幅组件旁）。

• 自定义 CSS 配置旁：显示于页面或组件设置面板中，紧邻【自定义 CSS】标题。
  
   

如何使用 AI 代码助手？

如需使用 AI 代码助手为店铺前台生成自定义 CSS，请按以下步骤操作：

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

使用场景

以下场景展示了如何使用 AI 代码助手调整前台组件样式。在本场景中，我们将在产品详情页中，将"猜你喜欢"推荐产品组件的标题调整为更大字号、左对齐，并更改为粉色：

1. 在 SHOPLINE Admin 后台，前往【在线商店】>【设计】>【我的主题】，点击【设计】进入主题编辑器。

2. 进入产品详情页面，选择【商店推荐】组件。

3. 点击功能图标，打开 AI 代码助手，输入："增大组件标题字号，将其左对齐，并将颜色改为粉色"，然后点击【生成应用】。
   

4. 生成的 CSS 代码将自动应用至【自定义 CSS】字段。预览效果无误后，点击【保存】发布更新。