Marketing - All in One：创建和配置组件 – SHOPLINE 常见问题

【组件】是【Marketing - All in One】中用于在店铺前台展示商品推荐的营销模块，商家可以将其添加到主题编辑器的多个页面中，帮助顾客发现更多感兴趣的商品。每个组件都会绑定一个数据源来提供推荐商品，并可以单独设置模块标题、布局和商品卡片样式等展示效果。

本文将介绍如何创建组件、配置展示设置、预览效果，以及在主题编辑器中添加组件。

创建组件前的准备工作

在开始之前，请确认：

您已创建至少一个与目标应用场景匹配的数据源，作为内容推荐的数据依据；也可以在创建组件时同步创建新的数据源。如需了解如何创建和配置数据源，请参阅《Marketing - All in One：创建和配置数据源》。
您的店铺使用 OS 3.0 主题。组件仅支持通过 OS 3.0 主题的主题编辑器添加。

创建组件

要创建一个新的组件，请按照以下步骤操作：

进入【Marketing - All in One】应用，点击左侧导航栏中的【组件】。
进入组件创建页面：
- 首次创建组件：点击页面中的【开始创建】。
- 店铺中已有组件：点击页面右上角的【创建】。
在【组件名称】字段中输入组件名称，最多支持 50 个字符。
在【组件类型】中选择组件类型。目前仅支持【商品推荐】。
在【应用场景】中选择组件要展示的页面，可选项包括：
- 首页
- 商品详情页
- 商品列表页
- 搜索页
- 购物车页
- 个人中心页
- 404 页
- 博客文章页
- 自定义页面
注意： 抽屉购物车和支付结果页当前暂不支持，相关选项会显示为置灰状态，后续将陆续开放支持。
在【数据源】中选择组件要使用的数据源，用于作为推荐依据/推荐数据来源：
- 【创建新数据源】：系统将根据您在下一步选择的推荐策略，自动创建一个与组件同名的数据源。
- 【绑定已有数据源】：从下拉列表中选择已有的数据源。系统仅展示应用场景与当前组件一致的数据源；如果没有符合条件的数据源，将显示【暂无数据】。
注意：如需了解如何创建、配置及管理数据源，请参阅《Marketing - All in One：创建和配置数据源》。
如果选择【创建新数据源】，请在【推荐策略】中选择 AI 推荐策略。系统会根据上一步所选应用场景自动展示适用的推荐策略，包括：
- 【AI 多维度推荐】：综合分析用户画像，智能推荐最具潜在转化机会的商品。
- 【热门趋势】：根据店铺商品的浏览、点击、查看及销售情况，推荐热门商品。
- 【相似用户】：根据相似用户的购买行为，推荐其他相似用户购买过的商品。
- 【相关商品】：分析全店商品数据，推荐与用户当前浏览商品属性相近的商品。
- 【共同购买】：根据店铺商品的购买数据，推荐经常一起购买的相关商品组合。
点击【创建】。

创建成功后，系统会自动跳转至组件设置页面。您可以继续配置组件的展示样式并预览效果。

注意：同一个应用场景下，您可以创建并挂载多个不同的组件，每个组件可以有各自独立的展示样式和数据源。

配置组件的展示设置

在组件设置页面左侧的设置面板中，您可以配置组件使用的数据源，以及模块标题、布局和商品卡片的展示样式。您可以通过页面右侧的预览区域实时查看调整效果。

基础信息

基础信息用于管理组件当前使用的数据源，并可快速前往对应的数据源进行编辑。

【绑定数据源】：查看或更换当前组件绑定的数据源。点击【编辑】，可在新标签页中打开该数据源的详情页面。

模块标题

模块标题设置决定了组件标题在前台的展示内容和对齐方式。

【文本内容】：设置组件顶部展示的标题文字，最多 50 个字符，例如「猜你喜欢」。
【文本对齐】：选择标题的对齐方式，可选【左对齐】、【居中对齐】或【右对齐】。

布局

布局设置决定了推荐商品在电脑端和移动端的排列数量和展示方式。

【电脑端列数】：设置电脑端每行展示的商品数量，范围为 1 至 5。
【电脑端展示方式】：选择【单行横向滚动】或【平铺展示】。
【移动端列数】：设置移动端每行展示的商品数量，范围为 1 至 2。
【移动端展示方式】：选择【单行横向滚动】或【平铺展示】。

商品卡片

商品卡片设置决定了每个推荐商品在前台的展示样式，包括图片、标题、价格和优惠信息等。

【商品图片边框】：调整商品图片的圆角、边框厚度和不透明度。
- 【圆角半径】：设置商品图片边框的圆角大小，范围为 0 至 40（单位：px）。
- 【厚度】：设置商品图片边框的粗细，范围为 0 至 12（单位：px）。
- 【不透明度】：设置商品图片边框颜色的不透明度，范围为 0% 至 100%
【商品图片】：选择商品图片的显示比例和填充方式。
- 【图片比例】：选择商品图片的显示比例，可选【1:1】、【2:3】、【3:4】或【4:3】。
- 【图片填充方式】：选择图片的填充方式，可选【填充】或【适应】。
【商品标题】：设置电脑端和移动端是否展示商品标题，以及标题最多展示的行数。
- 【电脑端 / 移动端展示标题】：分别控制是否在电脑端和移动端展示商品标题。
- 【电脑端 / 移动端展示行数】：仅在对应终端开启展示标题时可设置，可选【展示 1 行】、【展示 2 行】或【全部展示】。
【商品价格】：设置是否展示售价和原价，并选择售价的展示格式。
- 【展示售价】：是否展示商品售价，关闭后将隐藏整个价格区域。
- 【售价格式】：开启【展示售价】后可设置，可选【最低价】、【价格区间】或【最低价起】。
- 【展示原价】：是否展示原价（划线价），仅在最低售价低于原价时生效。
【优惠标签】：设置是否展示优惠标签，并选择标签类型和优惠数据格式。
- 【展示标签】：是否展示优惠标签，仅在最低售价低于原价时生效。
- 【标签类型】：开启展示标签后可设置，可选【Save 标签】或【Sale 标签】。
- 【数据格式】：选择【Save 标签】时可设置，可选【优惠金额】或【优惠比例】（优惠比例四舍五入后为 0% 时，将不展示该标签）。
- 【圆角半径】：设置优惠标签的圆角大小，范围为 0 至 40（单位：px）
【快速加购】：设置是否在商品卡片上展示快速加购按钮。开启【是否启用】后，顾客点击按钮即可唤起店铺主题的快速加购弹窗。

预览及保存组件的展示效果

组件设置页面提供了实时预览功能，帮助您在正式发布前查看展示效果。

在组件设置页面顶部，点击【电脑图标】或【手机图标】，切换预览终端。
预览区域会根据您当前的展示设置实时更新。
完成设置后，请点击页面右上角的【保存】，使配置生效。

注意：当前预览效果仅供参考。请前往【在线商店】 > 【店铺设计】，，将组件实际添加到主题编辑器对应页面后，再查看真实的展示效果。

在主题编辑器中添加组件到店铺页面

组件设置完成后，需要在主题编辑器中手动将其添加到店铺页面，才能在前台展示。

注意：目前仅支持在 OS 3.0 主题中添加并展示组件。

打开【在线商店】>【店铺设计】，进入主题编辑器，导航至您希望展示组件的页面（如首页、商品详情页等）。
依次点击【+ 添加组件】>【应用】>【All in One - 组件】。
添加后，点击进入第二层级的设置面板。

在【组件】输入框中，填写您要展示的组件 ID（仅支持输入英文字母和数字）。您可以在组件列表或组件设置页面顶部找到并复制该 ID。

注意：该输入框不会校验您填写的组件 ID 是否正确，也不会校验该组件的应用场景是否与当前页面一致。如果 ID 填写错误，或组件的应用场景与当前页面不匹配，组件将无法正常渲染或展示异常，且不会有报错提示。请务必仔细核对 ID 后再填写。

点击主题编辑器右上角的【保存】以应用更改，即可在店铺前台查看该组件的实际展示效果。

重要：同一个页面可以挂载多个【All in One - 组件】区块，每个区块可以填写不同的组件 ID，分别展示不同的推荐内容。

管理组件列表

在组件列表页面，您可以查看、搜索、筛选和管理店铺中已创建的组件。

点击左侧导航栏中的【组件】，进入组件列表。
根据需要查找组件：
- 使用搜索框按【组件 ID】或【组件名称】精确搜索。
- 点击【应用场景】筛选器，选择一个或多个应用场景进行筛选。
如需管理某个组件，点击该组件右侧【操作】栏的【···】，然后选择：
- 【编辑】：进入组件设置页面进行编辑。
- 【删除】：删除该组件。

注意：

组件删除后无法恢复，请谨慎操作。
如果组件绑定的数据源已被删除，列表中的【绑定数据源】字段会提示「数据源已删除」。

Marketing - All in One 组件的重要须知

删除组件是不可逆操作。
在购物车页面，组件支持客户端实时渲染：当顾客的购物车商品发生变化时，组件会自动重新渲染推荐结果；其他页面暂不支持此实时渲染能力。
模块标题暂不支持多语言设置，展示内容以您填写的文本为准。
主题编辑器中的组件 ID 输入框不会校验 ID 的正确性或应用场景是否匹配，请务必仔细核对后再填写。

关于 Marketing - All in One 组件的常见问题

问题 1：同一个数据源可以绑定给多个组件吗？

可以。只要组件与数据源的【应用场景】一致，多个组件可以绑定同一个数据源，实现推荐策略的复用。

问题 2：可以在同一个页面挂载多个组件吗？

可以。同一个应用场景下，您可以创建并挂载多个不同的组件，每个组件可以设置独立的展示样式和数据源。

问题 3：组件的展示设置修改后，为什么在预览中看不到变化？

请确认修改后已点击【保存】 按钮。此外，组件设置页面的预览效果仅供参考，实际展示效果需要前往主题编辑器添加并保存该组件后才能看到。