在主题编辑器中使用组件设计店铺页面（OS 3.0 主题） – SHOPLINE 常见问题

主题编辑器（OS 3.0 主题）中的组件是您用来设计店铺每个页面的基本构件，从首页到商品页和分类页皆适用。每个页面都由组件组合而成，许多组件还可以通过嵌套的模块进一步自定义，让您能够以一致且模块化的方式构建和调整店铺的版面。

本指南将介绍店铺页面的结构、组件之间的差异（通用组件与页面专属组件）、如何找到各组件的完整设置，以及如何使用「跨页面复制组件」等编辑器操作。

开始之前：确认您使用的工具

本文介绍的是桌面版主题编辑器中的组件（路径：【在线商店】>【设计】）。如需了解 Shopper App 中对应的设计设置，请参阅「App 设计」分类下的相关帮助文章。

了解主题编辑器中的组件与模块

每个店铺页面都由组件构成，组件是您透过左侧边栏的【添加组件】按钮新增的模块，例如横幅、商品轮播或面包屑。大多数组件可以包含一个或多个模块，这些模块是嵌套在组件内的较小元素，透过【添加内容】按钮新增（例如标题、富文本栏位或购买按钮）。模块可以多层嵌套，让您能在单个组件内实现更细致的版面配置。

注意：

主题编辑器侧边栏由上到下分为三个固定区域：header、模板和 footer。您可以在这三个区域中新增组件（透过【添加组件】按钮）与模块（透过【添加内容】按钮）。
模板通常提供最丰富的组件与模块选项，因为它代表页面的主体内容，也就是页面中页头与页脚以外的所有内容。
组件与模块的设置面板位置会因屏幕比例而有所不同；本文说明的是您将看到的内容，而非其在屏幕上的具体位置。

通用组件与页面专属组件

组件分为以下两类：

通用组件：可以添加到任何页面类型（例如面包屑）。其一般设置已记录在本文中；如果某个页面对通用组件有特殊行为，该页面的专属文章会以交叉引用的方式回链至此处。
页面专属组件：仅适用于特定页面类型（例如商品详情页上的购买按钮）。本文将介绍它们是什么、位于何处；完整的设置步骤与主题适用范围则记录在对应的页面文章中。

配置通用组件

SHOPLINE OS 3.0 主题目前支持以下通用组件，均可添加到任意页面：

组件	说明
面包屑	显示顾客浏览的页面层级路径，除当前页面外的所有节点皆可点击。
对照	并排显示两张图片以便对比。
博客	显示博客文章列表。
商标列表	显示一排品牌或合作伙伴的 Logo。
拼贴	以拼贴网格版面排列多张图片。
商品分类	显示多个商品分类。
联系表单	让顾客直接在页面上提交咨询表单。
倒计时器	显示距特定日期或促销结束时间的倒计时。
自定义页面	为自定义页面内容显示页面标题与图片。
自定义 Section	让您使用代码搭建完全自定义的版面，详见下方注意事项。
自定义 SLINE	让您插入自定义 SLINE 代码，以实现进阶版面自定义。
常见问题	以可折叠形式显示常见问题列表。
精选商品	突出显示特定商品分类。
特色商品分类	突出显示一组精选的商品分类，形成特色分类。
单个商品	突出显示特定商品。
商品推荐	显示精选或基于算法推荐的商品列表。
特色轮播图	采用分屏版面的轮播图。
图片横幅	全宽版面的图片横幅。
图片悬浮切换	鼠标悬浮时切换图片，常用于展示商品的其他视角。
折扣推广	突出显示折扣或促销活动。
图文模块	将全宽图片与文字（及可选按钮）搭配呈现。
成分展示	显示商品成分列表，每项成分皆附有图片与说明，常用于美妆、护肤或食品类商品。
地图	显示地图，例如店铺所在位置。
媒体推广商品	透过图片或影片形式的媒体方块展示商品，并搭配商品信息与行动按钮。
多级筛选	提供多层级的筛选选项。
最近浏览商品	显示顾客最近浏览过的商品。
富文本	具有丰富格式的自由文字内容。
购物图片	图片中带有可点击的商品热点。
购物视频	带有可购买商品元素的影片内容。
邮件订阅	电子报订阅表单。
轮播图	一组轮流播放的图片或幻灯片。
图文列表	以栏位形式显示图片与文字组合的列表。
拼接图文模块	将两组图文方块并排组合，各自位于独立的内容容器中，适合同时展示两项商品或促销内容，并搭配标题与按钮。
视频	显示影片。

注意：

部分组件（例如【应用】）是透过组件选择器中独立的【应用】分页新增，而非【主题】分页，可让您插入已安装应用的内容。详情请参阅《将应用集成到 OS 3.0 主题》。
如需了解如何透过组件搭建自定义版面的详细步骤，请参阅《使用自定义分区与内容容器个性化设置页面布局（仅限 OS 3.0 主题）》。
如需了解这些组件适用的建议图片尺寸，请参阅《店铺图片尺寸指南（OS 3.0 主题）》。

以下章节将逐步说明两个最常用通用组件【面包屑】与【内容容器】的设置方式。

使用面包屑进行页面导航

面包屑会显示顾客所浏览的页面层级路径（例如：首页 / 分类 / 商品），除当前页面外的所有节点皆可点击。

如需在页面中添加面包屑，请按以下步骤操作：

在主题编辑器中，导航至您想要的页面。
点击【添加组件】，切换到【主题】分页，然后选择【面包屑】。
根据需要设置偏好的配色方案，选择是否在桌面端和/或移动端启用，并配置其版面。
点击【保存】以应用您的更改。

注意：

除新推出的通用面包屑模块外，仍存在两种传统面包屑元素：
- 多级分类面包屑（仅限商品详情页，需要商家申请白名单并具备多级分类数据）。
- 商品分类列表页上硬编码的【首页】节点，该节点可以隐藏但无法移除，路径为【分类头部】>【分类图片】>【隐藏面包屑】。
主题适用范围：此功能适用于所有 OS 3.0 主题。

使用内容容器实现自定义版面

内容容器是一个中间层版面元素，可让您将模块（例如标题、价格或数量选择器）分组并进行水平排列，而不是单一的垂直堆叠。

如需添加内容容器，请按以下步骤操作：

在组件内，点击【添加内容】。
在【主题】分页下选择【内容容器】。
添加您想要排列的模块，然后使用容器的版面控制项设置其方向与对齐方式。
点击【保存】以应用您的更改。

注意：

如需移动内容容器，请选择其父模块并在该处应用对齐设置；直接对齐容器本身不会改变其位置。
此控制项仅影响放置在内容容器内的模块，不会覆盖页面模板整体的垂直排列方式。
主题适用范围：此功能适用于除 Bottle 主题外的所有 SHOPLINE 官方 OS 3.0 免费主题。

跨页面重复使用组件

您可以复制一个组件（包含其所有自定义内容与设置），并将其粘贴到不同的页面模板中。这样一来，您就不需要在首页、分类页或博客文章页之间手动重复构建相同的横幅、图片区块或促销区域。

如需在其他页面重复使用组件，请按以下步骤操作：

在主题编辑器的左侧边栏中，找到您想要重复使用的组件。
点击【三点图标（更多操作）】，然后选择【复制到剪贴板】。
导航至目标页面，点击任一现有组件上的【三点图标（更多操作）】，然后选择【粘贴到下方】。
点击【保存】。

注意：

特定页面模板的核心组件（例如商品详情页上的【商品】或【商品推荐】）无法被复制。
每个页面最多支持 25 个组件。
复制的内容仅储存在编辑器的暂存记忆中，关闭主题编辑器后即会清除。
主题适用范围：此功能适用于除 Bottle 主题外的所有 SHOPLINE 官方 OS 3.0 免费主题；第三方付费主题不支持此功能。