Start Strong
Sell Smart
Manage with Ease
Market to Success

Section Gallery：为 OS 3.0 主题添加开源组件

通过 Section Gallery，使用 OS 3.0 主题的商家可以轻松添加灵活、可自定义且支持代码编辑的开源组件。此功能可帮助您更高效地进行页面排版，在桌面端与移动端实现更精细的设计控制。

本文将介绍 Section Gallery 的使用时机及场景，涵盖安装步骤、组件设置方式、代码编辑指引、使用限制及常见问题说明。

重要说明：

  • Section Gallery 组件仅适用于 OS 3.0 主题。
  • 一旦您将组件添加至主题编辑器，主题将自动转为私有主题，并不再接收公版主题的自动更新

 

 

适用场景

当您需要更灵活的页面布局能力，或希望使用当前主题不具备的进阶页面组件时，可以考虑使用 Section Gallery。

常见使用情境

  • 添加页面展示类组件：Section Gallery 提供丰富的开源组件，包括图文区块、商品陈列、客户评价、视频模组、规格表、文件下载按钮与滚动横幅等。这些组件可覆盖大多数页面展示场景，并支持页面级与区块级灵活配置。
  • 自定义组件元素（文字、按钮、背景或间距等）：您可通过设置面板精细调整组件的样式与功能，例如图片圆角、按钮阴影、区块间距、字体样式等，所有配置皆可在无代码环境下完成。
备注：所有 Section Gallery 组件均兼容 OS 3.0 主题，支持多层级结构，您可将组件添加至页面中的不同层级（如 section 或 block）。

 

 

安装与使用方式

请依照以下步骤，在 OS 3.0 主题中安装 Section Gallery 并添加所需组件：

如何从 SHOPLINE App Store 安装 Section Gallery

  1. 进入 SHOPLINE admin 后台，点击应用 > 点击前往应用市场。
    image.png
  2. 搜索 Section Gallery，点击安装并完成授权以完成安装。
    image.png

如何将 Section Gallery 组件添加至主题

  1. 安装成功后，选择您要添加的组件。
    image.png
  2. 在弹窗中选择您要添加的 OS 3.0 主题。
    image.png
  3. 点击前往主题编辑器，进入可视化编辑器。
    image.png

或者，您也可从后台进入在线商店 > 设计来手动开启编辑器。想了解主题编辑与发布操作，请参考帮助中心中《设计店铺》的相关说明。

如何放置并自定义组件

  1. 点击 + 添加组件，选择您要使用的 Section Gallery 组件。添加后，将组件拖拽至页面中您希望展示的位置。Section Gallery 支持多层级结构，可放置于 section 或 block 层级。
    image.png
  2. 通过组件设置面板自定义文字、按钮、背景、间距、排版样式等外观。
    image.png
  3. 完成组件设计后，点击保存以套用更改。然后点击预览 > 查看在线网店，即可查看组件在前台页面的展示效果。

 

 

编辑组件代码

如果您具备一定的代码经验，可以直接编辑 Section Gallery 组件的代码，以进一步自定义页面布局与功能表现。

  1. 进入 SHOPLINE 后台，点击线上商店 > 设计，在主题库中找到已安装 Section Gallery 组件的主题。点击该主题右侧的 ⋯（更多） 图标，选择编辑代码。
    image.png
  2. 在左侧导航栏中打开 sections 文件夹，查看已安装的组件文件。
    image.png
  3. 查找以 SGC- 开头的文件，例如 SGC-product-list.css。您也可以在搜索栏中输入 SGC，快速筛选所有 Section Gallery 组件。
    image.png
  4. 点击对应组件文件，即可开始进行代码编辑。
    image.png
重要说明： 一旦添加 Section Gallery 组件，当前主题将转为私有主题，无法进行自动或手动版本更新。

 

重新安装组件以更新或还原代码

如果您希望将 Section Gallery 组件恢复为原始状态（例如修复错误、套用最新版本，或撤销本地代码修改），可透过 Section Gallery 应用后台进行重新安装操作。

重新安装功能会更新 SHOPLINE 提供的原始组件代码，但不会影响您透过主题编辑器所设定的视觉内容与样式，例如布局结构、区块内容或排版样式。这让您可以在不重设前端设计的前提下，安全套用组件修复或还原操作。

备注： 若您曾修改过 Section Gallery 组件的程式码且希望恢复预设版本，可使用此功能还原代码结构，并保留前台呈现效果。

如何重新安装组件

  1. 进入 SHOPLINE admin 后台，点击应用前往应用 > 搜索 Section Gallery。
    image.png
  2. 找到您希望重新安装的组件，点击重新安装并确认操作。
    image.png
重要说明：系统会根据组件的原始档案名称判断是否已安装该组件。如果您手动更改了组件档名（例如将 sgc-shopping-image.liquid 改名），系统将无法识别原组件，并会重新下载一份新的副本安装至主题中。

 

 

使用限制

  • 仅支持 OS 3.0 主题：Section Gallery 组件仅适用于 OS 3.0 主题。非 OS 3.0 主题将不会出现在可选列表中。

  • 添加组件后，主题将变为私有主题：一旦添加任何 Section Gallery 组件，主题将自动转为私有版本。

    重要说明： 私有主题无法进行自动或手动更新。如需在未来更新主题版本，需联系 SHOPLINE 客服申请白名单支持。


     

 

常见问题

  1. Section Gallery 是否支持非 OS 3.0 主题？
    不支持。组件仅适用于 OS 3.0 主题，添加组件时非 OS 3.0 主题将不会显示。

  2. 添加组件会影响我现有的主题内容吗？
    透過 Section Gallery 添加新组件不会影响您当前的页面内容或其他组件配置。
    如果您使用 重新安装功能 来恢复组件的原始代码（例如修复错误或撤销本地修改），系统只会更新该组件的代码，不会更改您在主题编辑器中所设定的布局、文字或样式等视觉内容。

    注意： 若您重新添加或重新安装相同组件，并且组件文件夹名称与现有版本相同，系统可能会覆盖原有代码结构。如您曾手动更改文件名称，系统可能无法识别该组件并重新下载一份新副本。
  3. 可以在同一个主题中使用多个 Section Gallery 组件吗？
    可以。您可在同一 OS 3.0 主题中安装并使用多个组件，且每个组件互相独立，可分别添加至页面中的不同区域。