在主题编辑器中设计商品详情页 (OS 3.0主题) – SHOPLINE 常见问题

【商品详情页】是访客从「浏览」转变为「购买」的关键节点，是顾客购物旅程中最重要的接触点之一。借助 OS 3.0 主题的主题编辑器，您无需编写代码即可通过可缩放媒体、结构化描述、精简的购买按钮以及灵活的自定义版面来展示商品。

本指南将说明如何进入【商品详情页】编辑器、配置其专属组件，并自定义商品详情页的内容、样式与版面。

开始之前：请确认您的工具

本文涵盖的是电脑端主题编辑器（路径：【在线商店】>【设计】）中的设置。如果您正在寻找 Shopper App 中的商品展示设置，请参阅《商品详情页设计》。

商品详情页编辑器入门

进入编辑器

如需进入主题编辑器并自定义【商品详情页】，请按以下步骤操作：

在 SHOPLINE 后台，前往【在线商店】>【设计】。
找到您的当前主题，点击【设计】按钮。
在顶部的【页面选择器】中，切换至【商品详情页】>【默认模板】。

了解商品详情页专属组件

与首页不同，商品详情页拥有专属组件，可自动从您的商品目录中提取动态数据的专属组件。这些组件位于左侧的【组件】侧边栏中：

【商品信息】：显示标题、价格、税费等基本信息。
【变体选择器】：方便客户选择尺寸、颜色或材质等规格。
【购买按钮】：包含【加入购物车】和【立即购买】按钮。
【商品描述】：直接同步商品后台描述字段中的内容。
【商品推荐】：系统自动生成的【您可能还喜欢】版块。

使用面包屑优化导航体验

您可以在商品详情页添加【面包屑】模块，帮助客户追踪其导航路径（例如：首页 / 分类 / 商品）。路径中除当前页面外的所有节点均可点击，方便客户轻松返回上一页、分类页或首页。

注意：如需完整的设置说明以及 OS 3.0 中所有面包屑类型的概览，请参考《在主题编辑器中使用组件设计店铺页面（OS 3.0 主题）（即将推出）》。

设置方法

在 SHOPLINE 后台，进入【在线商店】>【设计】，选择一个 OS 3.0 主题，点击【设计】进入主题编辑器。
在主题编辑器中，导航至【商品详情页】。
在对应模块下，点击【+ 添加组件】，进入【主题】分页，选择【面包屑】模块。
配置您偏好的配色方案，并选择是否在电脑端和/或移动端启用【面包屑】模块，然后根据需要配置其布局。完成后，点击【保存】以应用设置。

注意：对于标准的、基于路径的导航，我们强烈建议使用【面包屑】。

在商品详情页配置面包屑时，请注意以下事项：

【面包屑】（推荐）：显示标准的、基于路径的导航层级，通常展示为「首页 / {分类名称} / {商品名称}」。这是大多数商家推荐使用的选项。
【多级分类面包屑】：此元素仅适用于商品详情页，依赖商品所属域名的多级分类数据，需要商家获得白名单权限才能使用。如需启用，请联系我们的支持团队。

功能限制

主题适用范围：此功能适用于所有 OS 3.0 主题。

使用自定义 CSS 自定义内容和样式

通过悬停添加模块

在 OS 3.0 主题中，您可以精确地在商品信息区域内您想要的位置插入元素。

悬停技巧：将光标移动到现有模块之间的空隙处（例如价格和描述之间），此时会出现一个【+】图标，点击即可添加【自定义内容】模块。

注意：如果看不到【+】按钮，请确保鼠标位于两个模块之间垂直间隙的正中央。

修改或隐藏默认文本

如果您想自定义或隐藏商品价格下方的默认系统文案（例如「含税」或「运费将在结账时计算」），SHOPLINE 提供两种有效的方法：您可以直接在主题内容设置中修改文本，也可以使用对话式 AI 代码助手生成自定义 CSS。

方法一：通过「编辑默认主题文本」隐藏文本

此方法可让您查找系统标签，并通过将文本替换为空格字符来隐藏它们。

在 SHOPLINE 后台，进入【在线商店】。找到您当前使用的主题，点击三点图标【... 】（更多操作），然后选择【编辑默认文本】。
在顶部搜索栏中输入「运费」或「税」，然后在筛选结果中的【商品】>【商品详情】部分找到目标文本字段。
删除字段中的现有文本，并【输入一个空格】。该空格会指示店铺前台将标签完全隐藏。
点击【更新】以保存更改。

方法二：通过 AI 代码助手隐藏文本（自定义 CSS）

如果您希望使用更快捷的方式，或希望在不永久更改主题内容的情况下进行精确的视觉调整，可以使用内置的 AI 代码助手自动生成并应用自定义 CSS。

在主题编辑器中，导航至【商品详情页】。
点击位于组件标题旁（或设置面板中【自定义 CSS】标题旁）的 AI 代码助手图标，打开助手。
在聊天输入框中，以对话方式描述您想要进行的前台样式更改。
助手将处理您的请求，并自动输出相应的 CSS 代码块。
点击【应用】。生成的代码将自动填充到【自定义 CSS】字段中，您可以在屏幕看到即时的视觉预览。
点击主题编辑器右上角的【保存】，将更改发布到您的线上店铺。

注意：有关如何使用 AI 代码助手设计您的前台的更多信息，请参考《使用 AI 代码助手为店铺前台生成自定义 CSS 》。

在微调商品详情页的视觉样式时，请牢记以下样式原则和故障排查提示，以保持前台设计的一致性。

应用驱动组件的样式差异

诸如【商品推荐】版块等功能通常由后台应用驱动，其渲染独立于主题的核心布局。

如果您已在【全局设置】中配置了全局设计样式（例如特定的圆角或阴影），这些样式可能不会自动应用于这些由应用驱动的卡片。为解决此问题并确保各版块视觉效果一致，您可以应用页面级的自定义 CSS 来手动统一卡片样式。

在全局 CSS 与页面级 CSS 之间做出选择

应用自定义 CSS 调整店铺外观时，选择正确的作用范围非常重要，以避免破坏站点布局：

页面级 CSS（推荐用于商品详情页）：对于商品详情页专属的修改（例如隐藏特定的描述模块或样式微调），请始终在商品详情页的设置侧边栏中应用代码。这样可将更改限定在商品详情页范围内，避免对首页或分类页面造成非预期的布局干扰。
全局 CSS：仅当您希望视觉修改在线上商店的每个页面上都生效时，才将代码应用于【全局设置】。

注意：如需使用 CSS 进行更深入的自定义，请参专门指南：《使用 AI 代码助手为店铺前台生成自定义 CSS 》。

使用模板创建独特布局

常见问题：「我编辑了一个商品详情页，结果所有商品都变了！」出现这种情况是因为您正在编辑的是默认商品模板。如需为特定商品系列创建独特外观，请按以下步骤操作：

在页面选择器中，点击【商品详情页】>【+ 创建模板】。
设计您的独特布局（例如，专门为服装类商品添加「尺码指南」图片）。
进入【商品】>编辑【商品】。在【主题模板】下拉菜单中，将新模板分配给该特定商品。

故障排查：颜色色板显示问题

如果您发现商品详情页上出现两行颜色色板，或【您可能还喜欢】版块中缺少色板，这很可能是由于两个色板来源同时生效而产生冲突所致。

为什么会出现这种情况

SHOPLINE 支持两种在商品详情页显示颜色色板的方式：主题内置调色板，以及商品筛选&色板应用。当两者同时启用时，它们会独立渲染，从而在商品详情页上产生重复的色板。

单一来源原则：颜色色板显示

为避免冲突，同一时间应仅启用一种颜色来源。在决定使用哪种方式之前，请注意两者的主要区别：

	主题内置调色板	商品筛选&色板应用
您可能还喜欢版块	支持	不支持
自定义材质 / 图片色板	不支持	支持
适用对象	需要在所有版块中显示色板的商家	需要高级色板自定义功能的商家

如何停用主题内置调色板

如果您选择将商品筛选&色板应用作为唯一来源，请禁用主题内置调色板以避免冲突：

在 SHOPLINE 后台，进入【在线商店】>【设计】。
找到您当前使用的主题，点击【设计】打开主题编辑器。
在主题编辑器中，点击左侧边栏的【全局设置】。
选择【商品】，然后关闭【快速加入购物车色板】。
点击【保存】以应用更改。

如果您需要在「您可能还喜欢」版块中显示色板

商品筛选&色板应用不支持在【您可能还喜欢】版块中显示色板。如果此项展示对您的店铺很重要，请改用主题内置调色板。有关设置说明，请参见《了解 OS 3.0 主题的标准颜色名称（即将推出）》。

展示您的商品

使用增强放大镜自定义商品媒体

增强放大镜功能可让您自定义商品详情页上的图片缩放交互方式，以匹配您的商品类别。通过选择合适的缩放模式，您可以帮助客户在购买前仔细查看商品材质和规格细节，从而增强购买信心并降低退货率。

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

选择与商品属性相匹配的缩放形式，能够显著影响转化率：

3C 电子产品（例如键盘、相机）：我们推荐使用【鼠标悬停】。客户通常需要快速查看「接口类型」或「按键布局」，悬停缩放是查看这些技术细节最高效的方式。
家居用品与装饰：我们推荐使用【全屏箭头切换】。这类商品依赖构图和氛围感，让用户通过箭头切换场景，可以增强其对商品的沉浸式感受。
高端时尚与配饰：我们推荐使用【点击查看大图细节】或【全屏长图滑动】。这类客户需要查看面料材质和工艺的极致特写细节。

设置方法

在 SHOPLINE 后台，进入【在线商店】>【设计】，选择一个兼容的 OS 3.0 主题（例如 Fashion），点击【设计】进入主题编辑器。
在主题编辑器中，导航至【商品详情页】，选择一个商品以预览更改效果。
在【商品】模块下，展开【商品】部分，点击【商品媒体】组件。
点击【商品媒体文件】子模块，进入放大镜配置。
在【放大镜】设置下，开启【启用放大镜】。

注意：放大镜设置仅对媒体图片进行缩放，叠加层内容不会被缩放。

在【放大镜】设置下，分别为每种设备类型配置缩放形式：
- 电脑端缩放形式：
  - 【全屏长图滑动】（默认）：最适合浏览长图或细节丰富的图片。
  - 【全屏箭头切换】：最适合氛围感强的生活场景图片。
  - 【鼠标悬停】：最适合查看商品特定部位的技术细节。
- 移动端缩放形式：
  - 【全屏箭头切换】（默认）：标准的移动端浏览体验。
  - 【全屏长图滑动】：支持在全屏模式下垂直滑动浏览。
  - 【点击查看大图细节】：打开一个新图层，以最大比例展示图片；客户可拖动查看细节，再次点击即可返回。
如有需要，可开启【显示放大镜】，在媒体上显示放大镜图标，作为可缩放的视觉提示。
点击【保存】以应用更改。

功能限制

主题适用范围：此功能适用于除 Bottle 主题外的所有 OS 3.0 主题。
视频限制：如果视频模块的用户界面被隐藏，放大镜功能将无法在该视频元素上生效。
效果范围：放大镜效果仅适用于原始媒体图片，任何文本叠加层或 UI 元素都将保持原有比例。

使用动态营销标签突出关键属性

动态营销标签可让您直接在商品详情页上展示灵活、醒目的文本标签（例如「限量版」或「有机材质」），以突出商品的关键属性。您还可以将标签连接到【商品款式】元字段，使文字在顾客选择不同款式时自动更新，例如同一商品的棉质颜色选项显示「可机洗」、真丝选项则显示「仅可手洗」。

设置方法

在主题编辑器中，导航至【商品详情页】，选择一个商品以预览更改效果。

在左侧边栏中，点击【+ 添加组件】添加一个自定义模块。在该模块内添加一个【内容容器】，然后添加一个【富文本】模块。

提示：为获得更大的布局灵活性，您可以先添加一个【内容容器】，然后在该容器内添加【富文本】模块。如需对齐或移动该容器，请选择其父级模块以应用对齐设置，因为直接对容器进行对齐操作可能不会改变其位置。

点击【富文本】模块。在侧边设置面板中，自定义背景颜色、圆角和透明度，以匹配您的品牌风格。

提示：

使用【富文本】编辑器中的【添加动态来源】图标，将标签与特定的商品元字段关联，以实现动态内容更新。
您也可以将其连接到【商品款式】元字段。若要让标签在顾客切换款式时自动更新，请确保页面中已添加【款式选择器】组件。

点击【保存】以应用更改。

注意：如需了解展示商品款式元字段的完整配置说明（包括支持的数据类型与动态源设置指引），请参阅《在 OS 3.0 主题编辑器中配置动态源（Metafield）》。

功能限制

主题适用范围：此功能适用于除 Bottle 主题外的所有 OS 3.0 主题。

组织商品信息结构

使用多层级描述模块打造高级商品布局

【多层级描述】模块让您无需编写任何代码，即可直接在商品信息区域内构建精致的卡片式视觉布局。您可以使用它以专业的视觉层次展示结构化信息，例如促销卡片、商品认证或相关商品亮点。

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

为最大化发挥此功能的优势，请使用【多层级描述】模块将复杂的细节整理为易于浏览的区块。对于高客单价商品，我们建议在该容器内嵌套【标题】、【富文本】和【Logo】模块，打造一张「信任卡片」（例如同时展示品牌 Logo 和质保信息）。这种方式可以提高首屏的信息密度，营造专业的视觉层次，从而提升商品竞争力并降低跳出率。

设置方法

在 SHOPLINE 后台，进入【在线商店】>【设计】，选择一个 OS 3.0 主题，点击【设计】进入主题编辑器。
在主题编辑器中，导航至【商品详情页】，选择一个商品以预览更改效果。
将光标悬停在【商品信息】部分，点击【+ 添加内容】，选择【多层级描述】模块。
点击【多层级描述】模块以进入其设置。在该模块内添加通用模块，例如【标题】、【富文本】和【Logo】，以构建您想要的布局。

注意：当您在右侧设置面板中更新【标题】时，左侧边栏菜单中的名称会自动同步，方便您识别和管理多个模块。
您还可以开启或关闭【折叠展示】选项，以决定描述内容默认是折叠还是完全展开显示。
调整嵌套模块的排列方式，以实现您想要的布局效果，例如【图文并排对齐】或【卡片式】视觉效果。
点击【保存】以应用更改。

功能限制

主题适用范围：此功能适用于除 Bottle 主题外的所有 OS 3.0 主题。
布局范围：此模块专为【商品信息】部分内的结构化布局设计，不支持外部文件上传或 API 集成。
内容规模：为保持移动端性能，请限制单个【多层级描述】内嵌模块的数量，以确保布局在小屏幕上简洁易读。

使用文本标签和气泡增强商品信息

【文本标签】模块及其交互式【气泡】子模块，可让您在商品详情页上以非侵入的方式提供专业说明。【文本标签】作为视觉锚点，例如「了解更多」或「运费信息」，而【气泡】则通过悬停触发的气泡展示补充细节，从而使主转化路径保持聚焦、简洁。

最佳实践：增强专业视觉层次

对于护肤品或医疗级商品等专业品类，我们建议在【文本标签】模块中配置成分说明和功效细节。通过使用【气泡】子模块的即时气泡提示，您可以更专业、更有层次地呈现技术细节，帮助客户快速理解商品价值，缩短决策路径。

设置方法

在 SHOPLINE 后台，进入【在线商店】>【设计】，选择一个 OS 3.0 主题，点击【设计】进入主题编辑器。
在主题编辑器中，导航至【商品详情页】，选择一个商品以预览更改效果。

将光标悬停在【商品信息】部分，点击【+ 添加内容】，选择【文本标签】。

提示：为获得更大的布局灵活性，您可以先在【商品信息】部分下添加一个【内容容器】，然后在该容器内添加【文本标签】模块。如需对齐或移动该容器，请选择其父级模块以应用对齐设置，因为直接对容器进行对齐操作可能不会改变其位置。

点击【文本标签】模块，输入您想要的文本（例如「了解更多」），并调整其背景颜色以匹配您的品牌风格。
在侧边栏的【文本标签】模块中，将光标悬停在【气泡】子模块上，点击【+ 添加内容】，选择【富文本】，然后使用编辑器撰写说明气泡的内容。

点击【保存】以应用更改。

功能限制

主题适用范围：此功能适用于除 Bottle 主题外的所有 OS 3.0 主题。
内容最佳实践：虽然【气泡】子模块支持富文本和链接，但它最适合用于简短、有力的说明，以保持流畅的用户体验。
API 与上传：此功能直接在主题编辑器内管理，不支持外部 API 或文件上传集成。

推动购买行为

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

【购买按钮组合】模块将所有购买相关元素整合为一个统一的整体，打造更聚焦的购物体验，从而提升转化率。此前，购买相关元素以独立模块的形式进行管理，容易在自定义过程中导致布局错位或被意外删除。使用【购买按钮组合】模块，您可以在编辑器中将整个组合作为一个整体拖动，并配置专业的单行布局，将【数量选择器】和【加入购物车】按钮并排展示这是全球顶尖电商品牌普遍采用的高转化设计。

设置方法

在 SHOPLINE 后台，进入【在线商店】>【设计】，选择一个 OS 3.0 主题，点击【设计】进入主题编辑器。
在主题编辑器中，导航至【商品详情页】。
在左侧边栏中，展开【商品】>【商品信息】部分，找到内置的【购买按钮】组件。
在【排列方式】下，选择【数量选择器】和【购买按钮】的布局方向：
- 水平：将它们并排放置在同一行（推荐使用此方式，可打造紧凑、高转化的效果）。
- 垂直：将它们上下堆叠排列。
点击【购买按钮】组件，为整个按钮组合配置设置。
将整个组合拖动到【商品信息】部分中您偏好的位置。
点击【保存】以应用更改。

功能限制

阶梯价格：此组件目前不支持显示阶梯价格。
放置限制：此组件仅支持在商品详情页上进行底部悬浮吸底，不支持在弹窗或分类页面等其他页面上进行悬浮吸底，添加到这些页面时也不会自动包含购买按钮。

管理移动端购买按钮的放置位置

在移动设备上，【购买按钮组合】默认以悬浮吸底的方式固定在屏幕底部，方便客户无需滚动即可完成购买。如果您的店铺同时使用组合销售应用在商品详情页展示组合或套餐优惠，当客户滚动页面时，吸底的购买按钮可能会与该应用的内容发生重叠。

如果您发现出现此类重叠情况，请将按钮的移动端位置从【悬浮吸底】切换为【页面内置】：

在主题编辑器中，导航至【商品详情页】，选择【购买按钮】组件。
找到【移动端购买按钮位置】，将其从【悬浮吸底】更改为【页面内置】。
点击【保存】以应用更改。

自定义页面布局

在商品详情页内启用灵活的水平布局

【内容容器】为商品详情页引入了一个新的结构层，让您可以将商品信息模块进行水平排列，而不再局限于单一的垂直堆叠方式。这使您无需自定义开发，即可实现现代化的布局设计，例如将【数量选择器】放置在【购买按钮】旁边，或将【心愿单】按钮放置在商品标题旁边。

设置方法

在 SHOPLINE 后台，进入【在线商店】>【设计】，选择一个 OS 3.0 主题，点击【设计】进入主题编辑器。
在主题编辑器中，导航至【商品详情页】。
在【商品】>【商品信息】下，将光标悬停在【商品信息】上，点击【+ 添加内容】，在【主题】下选择【内容容器】。此容器作为中间布局层。
将鼠标悬停在容器上，点击【+ 添加内容】，添加您想要水平排列的商品信息模块，例如【标题】、【价格】或【数量选择器】。拖放模块以调整它们的顺序。
点击【内容容器】以配置布局，包括模块排列方式、边距和尺寸。使用布局控件将多个组件并排放置。
点击【保存】以应用更改。

功能限制

主题适用范围：此功能适用于除 Bottle 主题外的所有 OS 3.0 主题。
放置限制：水平布局控件仅在【商品信息】部分下的【内容容器】内可用，不会覆盖整个商品详情页模板的垂直排列方式。