Page Builder | 商品组件

Page Builder 推出了商品类型组件。该组件功能强大，可帮助您轻松创建精美的商品卡片，以直观美观的方式展示商品信息。这些卡片能有效吸引顾客注意力，促进购买决策，从而提升店铺转化率。欢迎试用商品组件以优化店铺浏览、购买体验。

一、在主题中添加商品类型卡片

Step 1. 添加卡片

• 登录您的 Shoplazza 管理后台，点击在线商店 > 主题装修 > 编辑，进入到主题编辑器，将左侧面板的卡片列表下滑至底部，点击添加卡片按钮，在二级面板中点击入口高级卡片广场。

Step 2. 编辑卡片

• 在高级卡片广场中点击卡片一级分类商品，在列表中选择需要的卡片模板，点击卡片即可自动添加卡片在主题中，并同时打开 Page Builder 编辑器，可对卡片进行编辑。

Step 3. 绑定数据源

• 在画布中点击定位到组 商品列表，在左侧配置面板中点击选择商品/选择专辑，在弹窗中完成选择后即可完成商品绑定。

Step 4. 保存卡片

• 完成编辑后，点击Page Builder编辑器右上角保存，即可将卡片保存到主题中。

Step 5. 发布主题

• 完成主题编辑后，发布主题，即可在C端生效。

二、组件说明

1. 基础商品组件

分类	组件	说明	编辑示例
商品标题	/	商品标题，呈现文本形式。
商品价格	商品价格	商品价格，呈现文本形式。
	icon+商品价格	由icon+商品价格组成，多用于促销场景。
折扣优惠	折扣优惠1（文本）	折扣数值，为文本形式。
	折扣优惠2（标签）	折扣数值，为标签形式。
	划线价格	商品原价，以划线样式展示。
商品图片	/	商品图片，呈现图片形式。
查看商品详情	查看商品详情1（按钮）	呈现按钮形式，点击跳转对对应商品详情页。
	查看商品详情2（icon）	呈现icon形式，点击跳转对对应商品详情页。
	查看商品详情3（文本）	呈现文本形式，点击跳转对对应商品详情页。

2. 商品块/商品列表

分类	组件	说明	编辑示例
单商品块	单商品块1（纵向排列）	纵向排列展示单个商品的信息，默认依次为： 商品图片 商品标题 商品价格
	单商品块2（横向排列）	横向排列展示单个商品信息，默认依次为： 左侧： 商品图片 右侧： 商品标题 商品价格
商品列表	商品列表1（纵向）	商品单行/多行排列展示，每个商品的商品信息纵向排列，默认依次为： 商品图片 商品标题 商品价格
	商品列表2（横向）	商品单行/多行排列展示，每个商品的商品信息横向向排列，默认依次为： 左侧： 商品图片 右侧： 商品标题 商品价格
	商品轮播1	轮播展示多个商品，每个商品的商品信息纵向排列，默认依次为： 商品图片 商品标题 商品价格
	商品轮播2（3D轮播）	轮播展示多个商品，且轮播效果有3D样式，每个商品的商品信息纵向排列，默认依次为： 商品图片 商品标题 商品价格

三、常规编辑操作介绍

自定义调整商品类型卡片

商品列表/单商品组件只默认组合了商品图片、标题、价格方便快速完成搭建，同时也支持自定义的组合商品组件、调节组件样式、以及布局。

1. 添加商品组件

商品组件在左侧组件面板中，切换到商品组件分类下，选择需要的组件（例如，折扣优惠）拖拽到画布中，放置到商品列表的商品块中。

2. 删减商品组件

在画布中点击定位到需要删除的商品组件，在左上方的快捷操作中，点击删除icon即可删除。

3. 调节组件样式

例：修改商品标题颜色、字号：在画布中点击定位到商品标题组件，在左侧配置面板中，切换到样式 tab下，点击文本选色器，自定义选择颜色。

4. 调节列表布局

组件	说明	编辑示例
商品列表	配置排版风格： 可通过排版风格 配置不同的商品排列方式。支持: 整齐布局 错落布局
	配置第一屏商品数量： 第一屏商品展示数量=展示行数*每行展示商品数 ，可通过展示行数、每行展示商品数进行配置。
	配置加载方式： 可通过加载方式进行配置，支持： 滚动加载：向下滚动屏幕时加载剩余商品 点击按钮加载：点击按钮 「Load more」加载剩余商品
商品列表轮播1	配置商品轮播行数： 可通过展示行数进行配置。
	配置第一屏商品数量： 可通过轮播块宽度进行配置，例如设置50%宽度比例，则每行展示2个商品。 注意：轮播块间距、轮播块宽度比例共同决定第一屏商品展示数量，例如，当存在间距时，设置50%的宽度比例无法完整展示2个商品，需要将比例减小至49%。
	配置轮播切换数量： 可通过轮播切换宽度进行配置，支持： 仅轮播单列商品：PC端每次点击 轮播切换按钮进行单个商品轮播切换。 仅轮播单列商品：PC端每次点击 轮播切换按钮进行整屏商品轮播切换。
商品列表轮播2（3D轮播）	配置每行商品数量： 可通过每行展示个数进行配置。 注意：3D轮播因样式限制，每行展示个数仅支持奇数。

四、常见搭建技巧

灵活调整商品组件布局

商品列表布局改变

• 商品组件中，不同的组件会默认有布局方式，例如横纵商品块/横向商品列表，商品信息默认为左右两列布局展示，可以通过商品块容器的能力来灵活调整布局。

1. 添加、删除子容器：在画布中点击定位到单商品容器（蓝色线条部分），在左侧配置项面板中，点击添加/删除列，对应单商品容器中的子容器（黄色线条部分）会相应增加/删除。

2. 调整子容器宽度：在画布中点击定位到单商品容器的左侧子容器（黄色线条），拖拽容器的尺寸调节器，即可快捷完成调节。

3. 切换子容器排列方向：在画布中点击定位到单商品容器（蓝色线条部分），在左侧配置项面板中，点击切换排列方向，即可快捷完成操作。例：将横向排列改成纵向排列。

商品信息布局调整

• 在商品组件中，商品信息的排列只能遵守父容器（单商品的子容器-黄色线条部分），仅单向横向/纵向排列，若需要搭建出，整体纵向排列，但价格、折扣优惠组件横向排列（如下图所示）。

1. 在画布中点击定位到单商品容器的子容器（黄色线条），点击左侧组件面板，将2列布局容器拖入单商品容器的子容器。

2. 将价格、折扣优惠分别拖入上方布局容器的左/右子容器（列）中。

3. 点击定位布局容器的左侧子容器，拖拽容器的尺寸调节器，将价格、折扣优惠的间距调整到合适的距离。

数据绑定

所有的商品组件均支持绑定商品数据源，单商品组件需要在单商品容器中绑定单商品数据源，商品列表组件需要在列表容器中绑定商品数据源。绑定后，二者内的商品组件（商品图片、价格等）都将跟随父容器绑定的数据源，无法单独修改。

• 商品图片/商品价格/折扣优惠/查看商品详情绑定商品数据源（以商品价格为例）：

点击选中画布中的商品价格组件，在左侧配置面板中点击选择商品，在弹窗中勾选需要绑定的商品即可。

• 单商品组件绑定商品数据源：

点击选中画布中的单商品容器（蓝色线条部分），在左侧配置面板中点击选择商品，在弹窗中勾选需要绑定的商品即可。

此时，单商品容器内的商品组件将都将跟随父容器绑定的商品数据源，且配置项「选择商品」为禁用状态，无法更改商品数据源。

• 商品列表组件绑定商品数据源：（以纵向商品列表为例）：

点击选中画布中的商品列表容器（蓝色线条部分），在左侧配置面板中点击选择商品，在弹窗中勾选需要绑定的商品即可。

此时，单商品容器内的商品组件将都将跟随父容器绑定的商品数据源，且配置项「选择商品」为禁用状态，无法更改商品数据源。

常见问题

1. 如何理解单商品、商品列表预留出的内边距？

A:因为单商品、商品列表都由容器+商品信息组件（商品图片、商品价格等）组成，而容器组件都是两层盒子的结构，以单商品为例：即单商品父容器（蓝色线条部分）+子容器（列-黄色线条部分），拖入组件进入画布时，预留出的边距只是为了方便再编辑器中进行选中、编辑等操作，实际不会在C端展示边距；因此，此时的组件的内边距、外边距配置项数值为0，手动输入边距的值后，该样式才会在C端生效。

2. 为什么商品列表组件绑定了商品数据源后，无法在编辑器中预览加载效果？

A: Page Builder 编辑器环境暂不支持预览效果，在主题编辑器、C端可正常加载。