在主题编辑器中使用组件设计店铺页面（OS 3.0 主题）
主题编辑器（OS 3.0 主题）中的组件是您用来设计店铺每个页面的基本构件，从首页到商品页和分类页皆适用。每个页面都由组件组合而成，许多组件还可以通过嵌套的模块进一步自定义，让您能够以一致且模块化的方式构建和调整店铺的版面。
本指南将介绍店铺页面的结构、组件之间的差异（通用组件与页面专属组件）、如何找到各组件的完整设置，以及如何使用「跨页面复制组件」等编辑器操作。
|
开始之前：确认您使用的工具 本文介绍的是桌面版主题编辑器中的组件（路径：【在线商店】>【设计】）。如需了解 Shopper App 中对应的设计设置，请参阅「App 设计」分类下的相关帮助文章。 |
了解主题编辑器中的组件与模块
每个店铺页面都由组件构成，组件是您透过左侧边栏的【添加组件】按钮新增的模块，例如横幅、商品轮播或面包屑。大多数组件可以包含一个或多个模块，这些模块是嵌套在组件内的较小元素，透过【添加内容】按钮新增（例如标题、富文本栏位或购买按钮）。模块可以多层嵌套，让您能在单个组件内实现更细致的版面配置。
|
注意：
|
通用组件与页面专属组件
组件分为以下两类：
- 通用组件：可以添加到任何页面类型（例如面包屑）。其一般设置已记录在本文中；如果某个页面对通用组件有特殊行为，该页面的专属文章会以交叉引用的方式回链至此处。
- 页面专属组件：仅适用于特定页面类型（例如商品详情页上的购买按钮）。本文将介绍它们是什么、位于何处；完整的设置步骤与主题适用范围则记录在对应的页面文章中。
配置通用组件
SHOPLINE OS 3.0 主题目前支持以下通用组件，均可添加到任意页面：
| 组件 | 说明 |
| 面包屑 | 显示顾客浏览的页面层级路径，除当前页面外的所有节点皆可点击。 |
| 对照 | 并排显示两张图片以便对比。 |
| 博客 | 显示博客文章列表。 |
| 商标列表 | 显示一排品牌或合作伙伴的 Logo。 |
| 拼贴 | 以拼贴网格版面排列多张图片。 |
| 商品分类 | 显示多个商品分类。 |
| 联系表单 | 让顾客直接在页面上提交咨询表单。 |
| 倒计时器 | 显示距特定日期或促销结束时间的倒计时。 |
| 自定义页面 | 为自定义页面内容显示页面标题与图片。 |
| 自定义 Section | 让您使用代码搭建完全自定义的版面，详见下方注意事项。 |
| 自定义 SLINE | 让您插入自定义 SLINE 代码，以实现进阶版面自定义。 |
| 常见问题 | 以可折叠形式显示常见问题列表。 |
| 精选商品 | 突出显示特定商品分类。 |
| 特色商品分类 | 突出显示一组精选的商品分类，形成特色分类。 |
| 单个商品 | 突出显示特定商品。 |
| 商品推荐 | 显示精选或基于算法推荐的商品列表。 |
| 特色轮播图 | 采用分屏版面的轮播图。 |
| 图片横幅 | 全宽版面的图片横幅。 |
| 图片悬浮切换 | 鼠标悬浮时切换图片，常用于展示商品的其他视角。 |
| 折扣推广 | 突出显示折扣或促销活动。 |
| 图文模块 | 将全宽图片与文字（及可选按钮）搭配呈现。 |
| 成分展示 | 显示商品成分列表，每项成分皆附有图片与说明，常用于美妆、护肤或食品类商品。 |
| 地图 | 显示地图，例如店铺所在位置。 |
| 媒体推广商品 | 透过图片或影片形式的媒体方块展示商品，并搭配商品信息与行动按钮。 |
| 多级筛选 | 提供多层级的筛选选项。 |
| 最近浏览商品 | 显示顾客最近浏览过的商品。 |
| 富文本 | 具有丰富格式的自由文字内容。 |
| 购物图片 | 图片中带有可点击的商品热点。 |
| 购物视频 | 带有可购买商品元素的影片内容。 |
| 邮件订阅 | 电子报订阅表单。 |
| 轮播图 | 一组轮流播放的图片或幻灯片。 |
| 图文列表 | 以栏位形式显示图片与文字组合的列表。 |
| 拼接图文模块 | 将两组图文方块并排组合，各自位于独立的内容容器中，适合同时展示两项商品或促销内容，并搭配标题与按钮。 |
| 视频 | 显示影片。 |
|
注意：
|
以下章节将逐步介绍三个常用通用组件的设置方法：【轮播图】、【面包屑】和【内容容器】。
设置轮播图并为图片添加跳转链接
您可以使用【轮播图】组件展示多张横幅图片，并配置轮播效果、图片内容及跳转链接。顾客点击设置了链接的图片后，可跳转至店铺中的其他页面、外部链接或您指定的电话号码。
| 注意：为轮播图图片添加跳转链接的功能适用于除 Bottle 外的所有 SHOPLINE 官方 OS 3.0 免费主题。 |
按照以下步骤设置轮播图：
- 在主题编辑器中，前往包含【轮播图】组件的页面，例如【首页】。然后在左侧边栏中选择【轮播图】组件。
-
在右侧设置面板中配置轮播图的展示效果，包括：
- 【轮播图高度】：分别设置电脑端和移动端的轮播图高度。
- 【全屏展示】：设置轮播图是否以全屏宽度展示。
- 【翻页样式】：选择轮播图的翻页指示样式，如【进度条】、【箭头】或【小圆点】。
- 【启用自动切换】：开启后，图片将自动切换。您可以进一步设置【切换间隔】，控制图片自动切换的时间间隔。
- 【移动端图文布局样式】：设置图片和文字在移动端的展示方式。如【文本在图片内】、【文本在图片下方】或【文本与图片重叠】。
-
在左侧边栏中展开【轮播图】，选择要编辑的【图片】区块。在右侧面板的【设置】中配置图片：
- 【电脑端图片】和【移动端图片】：添加或更换不同设备上展示的图片。
- 【图片跳转链接】：输入要跳转的链接或电话号码，或选择要跳转至的店铺页面（Bottle 主题不支持此设置）。
- 【图片展示区域】：选择图片在轮播图中的展示位置。
- 【图片遮罩】：调整图片遮罩的透明度。
- 【显示文字蒙层】：开启后，可在图片上显示文字内容。
- 【文字蒙层颜色】：选择文字蒙层的颜色。
- 【继承配色方案】：开启后，文字蒙层将使用当前主题的配色方案。
-
在【设置】下，展开【布局】并配置内容布局，包括【排列方向】、【自动换行】、【对齐方式】、【展示位置】、【间距】、【边距】和【尺寸】。
-
如需展示更多图片，将鼠标悬停在【轮播图】组件上，点击【 + 】图标添加新的【图片】区块，然后完成相关设置。
- 点击【保存】以应用更改。
使用面包屑进行页面导航
面包屑会显示顾客所浏览的页面层级路径（例如：首页 / 分类 / 商品），除当前页面外的所有节点皆可点击。
如需在页面中添加面包屑，请按以下步骤操作：
- 在主题编辑器中，导航至您想要的页面。
- 点击【添加组件】，切换到【主题】分页，然后选择【面包屑】。
- 根据需要设置偏好的配色方案，选择是否在桌面端和/或移动端启用，并配置其版面。
- 点击【保存】以应用您的更改。
|
注意：
|
使用内容容器实现自定义版面
内容容器是一个中间层版面元素，可让您将模块（例如标题、价格或数量选择器）分组并进行水平排列，而不是单一的垂直堆叠。
如需添加内容容器，请按以下步骤操作：
- 在组件内，点击【添加内容】。
- 在【主题】分页下选择【内容容器】。
- 添加您想要排列的模块，然后使用容器的版面控制项设置其方向与对齐方式。
- 点击【保存】以应用您的更改。
|
注意：
|
跨页面重复使用组件
您可以复制一个组件（包含其所有自定义内容与设置），并将其粘贴到不同的页面模板中。这样一来，您就不需要在首页、分类页或博客文章页之间手动重复构建相同的横幅、图片区块或促销区域。
如需在其他页面重复使用组件，请按以下步骤操作：
- 在主题编辑器的左侧边栏中，找到您想要重复使用的组件。
- 点击【三点图标（更多操作）】，然后选择【复制到剪贴板】。
- 导航至目标页面，点击任一现有组件上的【三点图标（更多操作）】，然后选择【粘贴到下方】。
- 点击【保存】。
|
注意：
|