使用 AI 代码助手为店铺前台生成自定义 CSS
作为一站式智慧电商伙伴,SHOPLINE 积极拥抱 AI 发展趋势,致力于让商家共享 AI 发展成果。借助 AI 代码助手,即使没有技术背景,您也可以通过简单描述,快速生成可直接应用的代码,轻松实现店铺前台的个性化视觉调整。
本文将介绍如何在主题编辑器中找到并使用 AI 代码助手,生成并应用自定义 CSS,让您无需修改主题代码,即可快速完成精准的视觉优化。
如何找到 AI 代码助手?
AI 代码助手已集成于主题编辑器中,您可以在 SHOPLINE Admin 后台 >【在线商店】>【店铺设计】>【设计】从以下三个入口找到 AI 代码助手:
- 页面标题旁:位于左侧边栏顶部,紧邻您当前所查看页面的名称(例如首页)。
组件标题旁:位于左侧边栏中特定板块或组件标题旁(例如轮播图或图片横幅组件旁)。
自定义 CSS 配置旁:显示于页面或组件设置面板中,紧邻【自定义 CSS】标题。
如何使用 AI 代码助手?
如需使用 AI 代码助手为店铺前台生成自定义 CSS,请按以下步骤操作:
- 在主题编辑器左侧边栏中,选择您想要调整的组件或页面。
- 点击所选页面或组件标题旁的 AI 代码助手图标。
- 用对话方式描述您想要的前台样式变更(例如:"将产品标题文字颜色改为蓝色")。
- 助手将输出对应的 CSS 代码。
- 点击【应用】,代码将自动填入【自定义 CSS】字段并显示预览效果。
- 在主题编辑器中点击【保存】,将更改发布至您的主题。
注意: 如需移除 AI 代码助手添加的样式:
|
使用场景
以下场景展示了如何使用 AI 代码助手调整前台组件样式。在本场景中,我们将在产品详情页中,将"猜你喜欢"推荐产品组件的标题调整为更大字号、左对齐,并更改为粉色:
在 SHOPLINE Admin 后台,前往【在线商店】>【设计】>【我的主题】,点击【设计】进入主题编辑器。
进入产品详情页面,选择【商店推荐】组件。
点击功能图标,打开 AI 代码助手,输入:"增大组件标题字号,将其左对齐,并将颜色改为粉色",然后点击【生成应用】。
- 生成的 CSS 代码将自动应用至【自定义 CSS】字段。预览效果无误后,点击【保存】发布更新。