Section Gallery:为 OS 3.0 主题添加开源组件
通过 Section Gallery,使用 OS 3.0 主题的商家可以轻松添加灵活、可自定义且支持代码编辑的开源组件。此功能可帮助您更高效地进行页面排版,在桌面端与移动端实现更精细的设计控制。
本文将介绍 Section Gallery 的使用时机及场景,涵盖安装步骤、组件设置方式、代码编辑指引、使用限制及常见问题说明。
|
重要说明:
|
适用场景
当您需要更灵活的页面布局能力,或希望使用当前主题不具备的进阶页面组件时,可以考虑使用 Section Gallery。
常见使用情境
- 添加页面展示类组件:Section Gallery 提供丰富的开源组件,包括图文区块、商品陈列、客户评价、视频模组、规格表、文件下载按钮与滚动横幅等。这些组件可覆盖大多数页面展示场景,并支持页面级与区块级灵活配置。
- 自定义组件元素(文字、按钮、背景或间距等):您可通过设置面板精细调整组件的样式与功能,例如图片圆角、按钮阴影、区块间距、字体样式等,所有配置皆可在无代码环境下完成。
| 备注:所有 Section Gallery 组件均兼容 OS 3.0 主题,支持多层级结构,您可将组件添加至页面中的不同层级(如 section 或 block)。 |
安装与使用方式
请依照以下步骤,在 OS 3.0 主题中安装 Section Gallery 并添加所需组件:
如何从 SHOPLINE App Store 安装 Section Gallery
- 进入 SHOPLINE admin 后台,点击应用 > 点击前往应用市场。
- 搜索 Section Gallery,点击安装并完成授权以完成安装。
如何将 Section Gallery 组件添加至主题
- 安装成功后,选择您要添加的组件。
- 在弹窗中选择您要添加的 OS 3.0 主题。
- 点击前往主题编辑器,进入可视化编辑器。
或者,您也可从后台进入在线商店 > 设计来手动开启编辑器。想了解主题编辑与发布操作,请参考帮助中心中《设计店铺》的相关说明。
如何放置并自定义组件
- 点击 + 添加组件,选择您要使用的 Section Gallery 组件。添加后,将组件拖拽至页面中您希望展示的位置。Section Gallery 支持多层级结构,可放置于 section 或 block 层级。
- 通过组件设置面板自定义文字、按钮、背景、间距、排版样式等外观。
- 完成组件设计后,点击保存以套用更改。然后点击预览 > 查看在线网店,即可查看组件在前台页面的展示效果。
编辑组件代码
如果您具备一定的代码经验,可以直接编辑 Section Gallery 组件的代码,以进一步自定义页面布局与功能表现。
- 进入 SHOPLINE 后台,点击线上商店 > 设计,在主题库中找到已安装 Section Gallery 组件的主题。点击该主题右侧的 ⋯(更多) 图标,选择编辑代码。
- 在左侧导航栏中打开 sections 文件夹,查看已安装的组件文件。
- 查找以 SGC- 开头的文件,例如 SGC-product-list.css。您也可以在搜索栏中输入 SGC,快速筛选所有 Section Gallery 组件。
- 点击对应组件文件,即可开始进行代码编辑。
| 重要说明: 一旦添加 Section Gallery 组件,当前主题将转为私有主题,无法进行自动或手动版本更新。 |
重新安装组件以更新或还原代码
如果您希望将 Section Gallery 组件恢复为原始状态(例如修复错误、套用最新版本,或撤销本地代码修改),可透过 Section Gallery 应用后台进行重新安装操作。
重新安装功能会更新 SHOPLINE 提供的原始组件代码,但不会影响您透过主题编辑器所设定的视觉内容与样式,例如布局结构、区块内容或排版样式。这让您可以在不重设前端设计的前提下,安全套用组件修复或还原操作。
| 备注: 若您曾修改过 Section Gallery 组件的程式码且希望恢复预设版本,可使用此功能还原代码结构,并保留前台呈现效果。 |
如何重新安装组件
- 进入 SHOPLINE admin 后台,点击应用前往应用 > 搜索 Section Gallery。
- 找到您希望重新安装的组件,点击重新安装并确认操作。
| 重要说明:系统会根据组件的原始档案名称判断是否已安装该组件。如果您手动更改了组件档名(例如将 sgc-shopping-image.liquid 改名),系统将无法识别原组件,并会重新下载一份新的副本安装至主题中。 |
使用限制
- 仅支持 OS 3.0 主题:Section Gallery 组件仅适用于 OS 3.0 主题。非 OS 3.0 主题将不会出现在可选列表中。
-
添加组件后,主题将变为私有主题:一旦添加任何 Section Gallery 组件,主题将自动转为私有版本。
重要说明: 私有主题无法进行自动或手动更新。如需在未来更新主题版本,需联系 SHOPLINE 客服申请白名单支持。
常见问题
-
Section Gallery 是否支持非 OS 3.0 主题?
不支持。组件仅适用于 OS 3.0 主题,添加组件时非 OS 3.0 主题将不会显示。 -
添加组件会影响我现有的主题内容吗?
透過 Section Gallery 添加新组件不会影响您当前的页面内容或其他组件配置。
如果您使用 重新安装功能 来恢复组件的原始代码(例如修复错误或撤销本地修改),系统只会更新该组件的代码,不会更改您在主题编辑器中所设定的布局、文字或样式等视觉内容。注意: 若您重新添加或重新安装相同组件,并且组件文件夹名称与现有版本相同,系统可能会覆盖原有代码结构。如您曾手动更改文件名称,系统可能无法识别该组件并重新下载一份新副本。 -
可以在同一个主题中使用多个 Section Gallery 组件吗?
可以。您可在同一 OS 3.0 主题中安装并使用多个组件,且每个组件互相独立,可分别添加至页面中的不同区域。