OS 3.0 主题新功能介绍 – SHOPLINE 常见问题

SHOPLINE 的 OS 3.0 主题持续推出全新功能，为您提供更高的灵活度与个性化的店铺设计体验。

本文将介绍仅适用于 OS 3.0 主题的最新功能。

备注： 如果您是首次使用 OS 3.0 主题，建议先阅读《OS 3.0 主题介绍》，了解其结构、组件与编辑功能。

允许顾客在移动端选择每行显示的商品数量

通过此功能，您可以让顾客根据个人偏好自由调整在移动端的商品浏览方式。

启用自定义商品展示布局功能后，顾客可在每行显示 1 或 2 个商品之间切换，无论是希望以更大的卡片查看商品细节，还是以更小的卡片快速浏览商品，都能灵活实现。

设置步骤

在 SHOPLINE admin 后台，前往在线商店 > 店铺设计，进入我的主题页签。选择一个 OS 3.0 主题（例如：Fashion），然后点击设计进入主题编辑器。
在主题编辑器中，打开商品列表页模块。在主题编辑器中，切换到移动端预览，开始自定义商品列表页的展示布局。
从下拉菜单中选择要编辑的集合页面，在商品列表模块中开启多列切换器，以启用移动端多列切换功能。
设置默认与可切换的列数后，点击保存以应用更改。

备注：

列数设置仅适用于移动端。
默认移动端列数：1 或 2 列
可切换列数：1 或 2 列
如果默认列数与可切换列数设置为相同数值（例如 1/1 或 2/2），顾客在移动端点击多列切换器图标时将不会产生任何变化。

功能限制

适用范围： 适用于所有 OS 3.0 主题，Bottle 主题除外。
设备限制： 仅支持移动端展示与切换。
插件兼容性： 建议在发布前测试与已启用插件的兼容情况，部分插件可能影响商品列表页的显示。
系统集成： 本功能不涉及 API 或文件上传操作。

通过可配置的面包屑路径改善导航体验

通过部署传统的路径式面包屑，为您的顾客提供标准、清晰的店铺导航方式。这些增强功能提供了通用的导航，能够显示顾客访问页面的层级路径（例如：首页 / 分类 / 商品）。

新的面包屑系统提供了清晰的、基于路径的导航，以提升顾客体验和店铺可用性。路径中的所有节点（当前页面除外）均可点击，方便顾客轻松导航回上一级页面、分类页或首页。

了解三种面包屑元素

为确保功能清晰，OS 3.0 主题中存在三种不同的面包屑元素，每种元素都有不同的位置和逻辑：

新增通用面包屑模块（推荐标准）
1. 逻辑： 采用传统的页面路径层级（例如：首页 / 分类 / 商品）。
2. 位置： 可以通过主题编辑器中的新增专用区域，添加到所有页面。
3. 路径规则：
  1. 商品详情页：通常显示为首页 / {分类标题} / {商品标题} 或首页 / {商品标题}。
  2. 博客文章页：显示为首页 / {博客分类标题} / {博客文章标题}。
4. 使用建议： 这是推荐用于一般导航的模块。
经典多级分类面包屑（仅限商品详情页）
1. 逻辑： 依赖于商品域的多级分类数据。
2. 位置：仅作为模块出现在商品详情页。

备注：

该经典功能需要商家申请白名单才能使用，且将从原有的「面包屑」模块更名为「多级分类面包屑」，以确保清晰区分。
如需使用经典多级分类功能，请联系我们的客服团队寻求帮助。

经典商品分类页「首页」节点（可修复）:
1. 逻辑：叠加在分类图片上的硬编码「首页」节点。
2. 位置：仅出现在商品分类列表页上。
3. 使用建议： 该节点之前无法配置且被视为错误元素，但更新后，新增的配置设置允许商家将其隐藏。

如何设置

请按照以下步骤启用推荐的新通用面包屑模块并解决传统显示问题。

在 SHOPLINE admin 后台，前往在线商店 > 店铺设计 > 我的主题。

情景一：启用通用面包屑模块

为启用推荐的新面包屑模块，请遵循以下步驟：

在主题编辑器中，导航到您想要的页面（例如：首页、商品详情页）。
在相应页面模块下，点击添加模块，然后切换到主题分页选择面包屑模块。
添加面包屑模块后，根据需要设置偏好的配色方案，选择是否在桌面端和/或移动端启用，并配置其布局。完成后，点击保存以应用您的设置。

备注：对于标准、路径式的导航，我们强烈推荐使用此通用面包屑模块。

情景二：隐藏传统商品分类页节点

在主题编辑器中，导航到商品分类列表页。
找到配置設置，以隐藏叠加在分类图片上的硬编码「首页」面包屑节点。
点击保存以应用更改。

功能限制

多级分类面包屑访问：经典面包屑元素（现已更名为多级分类面包屑）仍需要使用商品域的多级分类数据，并要求商家申请白名单才能访问。
隐藏经典商品分类页「首页」节点：商品分类页上的硬编码「首页」元素无法被完全移除，但新功能提供了隐藏它的能力。

在商品详情页内启用灵活的横排布局

此增强功能解决了先前主题布局中的一個關鍵限制，允許商家和第三方應用程式在商品详情页的商品信息區域內實現複雜的、非垂直的排列。以往，商品信息模块被限制為單一的垂直堆疊，無法滿足現代設計需求，例如將數量選擇器與購買按鈕並排，或將心願清單按鈕放置在商品標題旁邊。

通过引入新的結構元素，您可以對商品详情页上特定商品元素的排列獲得精準的控制，這與 OS 3.0 主題提供靈活布局的整體設計理念保持一致。

如何设置

要在您的商品信息區域內對元素應用橫排布局，您將利用一个新的內容容器：

在 SHOPLINE admin 后台，前往在线商店 > 店铺设计 > 我的主题。选择一个 OS 3.0 主题（例如：Fashion）并点击设计以进入主题编辑器。
在主题编辑器中，导航至商品页面以访问商品详情页模板。
在商品模块下，找到商品区域 > 商品信息。將鼠标懸停在商品信息上方，点击 + 图标，然後在主题下選擇内容容器。該容器作為中間層布局，用於獨立調整橫向排列。
添加容器後，將鼠標懸停在其上方，以添加标题、价格和数量选择器等信息模块。您可以拖放這些模块來調整其順序。
点击内容容器以配置布局，包括模块排列、間距和尺寸等。
保存更改。

功能限制

主题可用性：Bottle 主题不支援此功能，這是目前唯一排除在外的 OS 3.0 主題。
位置限制：橫排布局控制僅適用於主商品信息區域下專用的内容容器節點。它不會覆蓋整個商品详情页模板的垂直排列結構。

使用购买按钮组合优化商品详情页

本次更新推出了 购买按钮组合，旨在通过打造更聚焦的视觉体验来集中购物区域，进而提升转化率。

此前，购买元素是以独立区块的形式进行管理的，这可能导致布局不齐或在自定义过程中被误删。新的购买按钮组将这些元素「重新封装」为一个完整的单元。这让您能够在编辑器中轻松拖动整个组件，并支持专业的单行布局（将数量选择器与加入购物车选项并排显示），这是常用的提升转化设计。

如何设定

请参考以下步骤，通过对齐商品详情页上的购买按钮组区块与选择器，打造更紧凑且专业的结帐区域：

在 SHOPLINE admin 后台，前往在线商店 > 店铺设计 > 我的主题。选择一个 OS 3.0 主题（例如：Fashion）并点击设计以进入主题编辑器。
在主题编辑器中，导航至商品详情页。
在左侧侧边栏中，按照层级找到：商品详情 > 商品主体 > 商品信息。点击展开商品信息，即可找到内置的 购买按钮组合 组件。
点击购买按钮组区块以打开其设定。在 排布方向 下，选择水平即可将 数量选择器 与 快捷结帐 显示在同一行。随后您可以调整这两个元素之间的宽度比例以符合您的设计。
使用区块设定自定义布局或隐藏特定元素以简化界面。整个模块可以作为一个整体拖动到您偏好的位置。
点击保存以应用布局。

功能限制

不支持阶梯价格：请注意，此组件目前不支持显示「阶梯价格」。
位置限制：此组件支持在商品详情页进行悬浮吸底。

然而，它不支持在其他页面（如弹窗或专辑页面）进行底部吸附，且添加到这些页面时不会自动包含购买按钮。

配置商品列表页交互功能

为了帮助顾客更快速地从浏览转向购买，我们增强了商品列表页的功能以缩短购买路径。商家无需第三方应用或复杂的自定义开发，即可提供丰富的交互体验。

核心功能

快速预览能力：在商品卡片上添加快速预览按钮，让顾客无需离开列表页即可获取详情并执行操作。
灵活的购买路径：定义您的「加入购物车」行为——根据销售策略选择弹窗、浮层或直接加入购物车。
商品卡片自定义：商品卡片现在支持通用区块和动态数据源，实现高度个性化的展示。

如何设定

请参考以下步骤，配置支持浏览与直接购买动作的商品列表页功能。

功能 1：快速预览按钮

快速预览按钮功能允许顾客在不离开商品列表页的情况下查看商品详情并执行操作。配置步骤如下：

在主题编辑器中，前往商品列表页。在下方模块，点击下拉箭头图标选择一个商品分类进行预览。
在商品列表区块下，找到并将鼠标悬停在商品卡片部分，点击 + (添加内容) 并选择 快速查看按钮。
添加后，商品卡片下方将出现一个默认文本为 View more (查看更多) 的 CTA 按钮。您可以在其设定中自定义按钮文本、颜色和格式。
点击保存以应用布局。

功能 2：悬浮遮罩层

悬浮遮罩层功能当顾客将鼠标悬停在商品图片上时，显示与购买相关的动作或额外内容。配置步骤如下：

在主题编辑器中，前往商品列表页。在下方模块，点击下拉箭头图标选择一个商品分类进行预览。
在商品列表区块下，找到并将鼠标悬停在 图片浮层区块上，点击 + (添加内容) 并选择 快速预览按钮。
在 图片浮层 的设定区域中，调整悬停效果（例如：浮层常显、浮层淡入、浮层淡出）。
点击保存以应用布局。

注意：您可以通过添加 通用区块 和 动态源 引用来增强浮层内容。在大促期间，尝试在商品卡片或浮层中添加图标或促销文本区块，以提升营销效果。

功能 3：动态营销标签

动态营销标签功能允许您利用商品自定义栏位在商品页面上展示醒目且灵活的文本标签。这对于突出「限量版」或「有机材料」等独特卖点非常理想。配置步骤如下：

在主题编辑器中，导览至商品详情页，并选择一个您偏好的商品以预览更改。
在左侧侧边栏所需的模板层级下，点击 + (添加组件) 以添加一个 自定义 section。在该模块内，添加一个 内容容器，然后再添加一个 富文本 区块。
若要实现专业的标签外观，请点击 富文本 区块。在右侧设定面板中，您可以自定义背景颜色、圆角半径和透明度，以匹配您的品牌风格。
点击保存以应用布局。

使用多层级描述模块构建進階商品佈局

此项增强功能使商家无需编写任何代码，即可构建复杂且高效的商品详情页。以往，展示如「促销卡」、「产品说明」或「相似产品亮点」等结构化资讯时，通常需要自定义开发或大量使用难以排版的富文本模块。透过利用多层级描述模块，您现在可以直接在商品信息区域内创建专业的卡片式视觉布局。

最佳实践：透过结构化布局提升转化

为了发挥此功能的最大效用，建议使用多层级描述模块将复杂资讯拆分为易于阅读的「碎片化」区段。对于高客单价商品，我们建议在此容器内嵌套标题、富文本与 Logo 模块，以构建「信任卡片」（例如在保修保证旁展示品牌 Logo）。这种方法不仅提升了「首屏」资讯密度，还能创造出专业的高级视觉层次感，显著提升产品竞争力并降低顾客跳出率。

如何设置

如需使用多层级描述模块实现专业的卡片式布局，请按照以下步骤操作：

在 SHOPLINE admin 后台，前往在线商店 > 店铺设计 > 我的主题。选择一个 OS 3.0 主题（例如：Fashion）并点击设计以进入主题编辑器。
在主题编辑器中，导航至商品页面以访问商品详情页模板。
在商品模块下，找到商品区域 > 商品信息，点击 + (添加内容)并选择多层级描述模块。
点击多层级描述模块以访问其设定。您现在可以点击该区块下的 + 图标来增加各种子区块——如标题、富文本与 Logo——来构建您想要的布局。

注意：当您更新右侧设定面板的标题名称后，左侧侧边栏选单中的 Example title 也会同步更新为您设定的名称，以便于辨识。
您可以切换折叠展示选项，以决定描述内容在默认情况下是折叠还是完全显示。
排列这些嵌套模块，以实现行内图文排版或卡片式等视觉效果。
点击保存以应用更改。

功能限制

主题可用性： Bottle 主题不支持此功能，这是目前唯一排除在外的 OS 3.0 主题。
布局范围： 该区块专为商品信息内的结构化布局设计，不支持外部文件上传或 API 集成。
内容缩放： 为了保持移动端效能，建议限制单个多层级描述模块的数量，以确保布局在小屏幕上保持整洁易读。

使用文本标签與气泡强化商品资讯

此项增强功能解决了商品详情页在保持高资讯密度的同时兼顾整洁用户介面的挑战。以往，商家往往必须在「让顾客面对负载的专业术语与政策细节」或「省略可能辅助决策的深度产品细节」之间做出选择。透过利用文本标签模块及其互动式气泡子模块，您现在可以以非侵入性的方式提供专业说明，确保补充细节只需悬停或点击即可查看。

透过引入这种分层资讯处理方式，文本标签充当了视觉锚点（例如「了解更多」或「配送资讯」），而气泡则将次要细节隐藏在悬停触发的气泡弹窗中。这种设计符合现代浏览习惯，在保持核心转化路径聚焦且整洁的同时，仅在购物者寻求额外背景资讯时提供即时价值。

最佳实践：利用分层资讯提升页面专业质感

针对药妆或医护类产品，建议将成分解释与功效说明配置于文本标签模块。透过气泡子模块的即时气泡提示，商家能以更专业且具层次感的方式呈现技术细节。这不仅能显著提升页面的交互质感，还能帮助顾客快速理解产品价值，缩短决策路径。

如何设置

如需在商品资讯区域启用并配置文本标签与气泡，请按照以下步骤操作：

在 SHOPLINE admin 后台，前往在线商店 > 店铺设计 > 我的主题。选择一个 OS 3.0 主题（例如：Fashion）并点击设计以进入主题编辑器。
在主题编辑器中，导航至商品页面以访问商品详情页模板。

在商品模块下，找到商品区域 > 商品信息。将鼠标悬停在商品信息上方，点击 + (添加内容)，然后在主题下选择文本标签。

提示：如果您追求更灵活的布局，可以先在商品信息部分下添加一个内容容器，然后再在该容器内添加文本标签模块。如需对齐或移动该容器，请选择其「父区块」来应用对齐设定，因为直接对齐容器本身可能无法改变其位置。

点击文本标签模块以输入您想要的文字（例如「了解更多」），并调整其背景颜色以匹配您的品牌风格。
在文本标签模块内，找到气泡子模块。使用提供的富文本编排您希望显示的内容。
在线商店中，文本标签将显示在产品资讯下方；当用户将鼠标悬停在标签上（电脑端）或点击它（移动端）时，将出现一个显示您在气泡中所设定内容的气泡弹窗。
点击保存以应用更改。

功能限制

主题可用性： Bottle 主题不支持此功能，这是目前唯一排除在外的 OS 3.0 主题。
内容最佳实践： 虽然气泡子模块支持富文本与链接，但建议用于简短且具影响力的说明，以保持用户购物流程的顺畅。
API 与上传： 此功能直接在主题编辑器内管理，不支持外部 API 或文件上传集成。

使用放大镜自定义功能优化商品媒体展示

此项增强功能允许商家根据商品类别自定义商品详情页的图片缩放交互方式。通过提供多种缩放模式（如悬停、滚动或箭头切换），商家可以优化顾客查看细节的体验。该功能旨在增加页面停留时间、建立购买信心，并通过确保顾客在购买前能准确检查产品材质与规格，从而降低退货率。

最佳实践：为您的行业选择合适的缩放形式

选择与商品属性匹配的缩放形式可以显著提升转化率：

3C 电子产品（如键盘、相机）： 推荐使用鼠标悬停。顾客通常需要快速检查接口类型或按键布局，悬停缩放能提供最高效的技术细节检视方式。
家居用品与装饰： 推荐使用全屏箭头切换。这类商品依赖构图与氛围，允许用户通过箭头切换场景图，能提升他们对商品的沉浸感。
高端时装与饰品： 推荐使用点击查看大图细节或全屏长图滑动。此类别的顾客需要查看面料纹理与工艺细节的极致近距特写。

如何设定

如需为您的商品媒体自定义放大镜设定，请按照以下步骤操作：

在 SHOPLINE admin 后台，前往在线商店 > 店铺设计 > 我的主题。选择一个 OS 3.0 主题（例如：Fashion）并点击设计以进入主题编辑器。
在主题编辑器中，导航至商品页面以访问商品详情页模板。
在商品信息模块下，展开商品信息区块并点击商品媒体组件。
在商品媒体设定中，找到商品媒体文件子区块并点击进入放大镜配置。
找到放大镜配置并开启显示放大镜开关。

注意：

放大镜设定仅缩放媒体图片，浮层不会随之缩放。
为了获得最佳的缩放清晰度，请确保您的商品图片符合《图片尺寸指南》中的推荐规格。

在放大镜设定下，您可以分别为不同设备配置缩放形式：
- 电脑端缩放形式：
  - 全屏长图滑动：（默认）最适合浏览长篇、细节丰富的图片。
  - 全屏箭头切换：最适合富有氛围感的生活场景照。
  - 鼠标悬停：最适合对特定产品部件进行技术性检视。
- 移动端缩放形式：
  - 全屏箭头切换：（默认）标准的移动端浏览体验。
  - 全屏长图滑动：允许在全屏模式下垂直滚动。
  - 点击查看大图细节：进入一个以最大比例显示图片的新图层；用户可以拖动查看细节，再次点击即可返回。
如有需要，可以开启展示放大镜，在媒体上显示放大镜图标，作为图片缩放的视觉提示。
点击保存以应用更改。

功能限制

主题可用性： Bottle 主题不支持此功能，这是目前唯一排除在外的 OS 3.0 主题。
视频限制：如果视频模块的用户界面被隐藏，放大镜功能将无法应用于该特定视频元素。
适用对象：放大镜效果仅作用于原始媒体图片，图片上的文字浮层或 UI 元素不会随之缩放。

自定义社交媒体图标

为了帮助商家在 Facebook 和 Instagram 等通用图标之外，推广特定平台或地区性平台（如 Discord、Reddit 或微信），SHOPLINE 现在支持自定义社交媒体展示。这允许您在无需代码开发或第三方应用的情况下，自行上传个性化图标并设置跳转链接。

如何设定

如需为您的商品媒体自定义放大镜设定，请按照以下步骤操作：

在 SHOPLINE admin 后台，前往在线商店 > 店铺设计 > 我的主题。选择一个 OS 3.0 主题（例如：Fashion）并点击设计以进入主题编辑器。
在主题编辑器中，前往 主题设置 > 社交媒体。
滚动至底部找到 自定义社交媒体 区域。您将看到五个预设栏位，分别为 自定义社交媒体 1 至 自定义社交媒体 5。选择任一栏位即可开始配置。
为每个项目配置以下设定：
- 图标上传：上传您的自定义图片。（在图片成功上传前，图标将显示为灰色）。
- 链接：输入完整的跳转 URL。
  
  注意：链接字段为必填项。您必须输入有效的 URL 格式（例如：https://...）才能保存更改。
点击保存以将图标应用到您的 header（页头）或 footer（页脚）。

图标规格

为确保最佳显示效果，请遵循以下指南：

支持格式：JPG、SVG 和 PNG。
文件大小：建议不超过 200KB。
建议尺寸：20px x 20px 或 25px x 25px。

功能限制

数量限制：您最多可以添加 5 个自定义社交媒体图标。
主题可用性： 此功能支持除 Bottle 主题外的所有官方 OS 3.0 免费主题；第三方付费主题不支持此功能。