Rich text
Description
Page Builder 推出了商品类型组件。该组件功能强大，可帮助您轻松创建精美的商品卡片，以直观美观的方式展示商品信息。这些卡片能有效吸引顾客注意力，促进购买决策，从而提升店铺转化率。欢迎试用商品组件以优化店铺浏览、购买体验。
一、在主题中添加商品类型卡片
Step 1. 添加卡片
登录您的 Shoplazza 管理后台，点击在线商店 > 主题装修 > 编辑，进入到主题编辑器，将左侧面板的卡片列表下滑至底部，点击添加卡片按钮，在二级面板中点击入口 高级卡片广场。
Step 2. 编辑卡片
在高级卡片广场中点击卡片一级分类商品，在列表中选择需要的卡片模板，点击卡片即可自动添加卡片在主题中，并同时打开 Page Builder 编辑器，可对卡片进行编辑。
图片准备中
Step 3. 绑定数据源
在画布中点击定位到组 商品列表，在左侧配置面板中点击选择商品/选择专辑，在弹窗中完成选择后即可完成商品绑定。
Step 4. 保存卡片
完成编辑后，点击Page Builder编辑器右上角保存，即可将卡片保存到主题中。
Step 5. 发布主题
完成主题编辑后，发布主题，即可在C端生效。
二、组件说明
-
基础商品组件
|
分类 |
组件 |
说明 |
编辑示例 |
|
商品标题 |
- |
商品标题，呈现文本形式。 |
|
|
商品价格 |
商品价格 |
商品价格，呈现文本形式。 |
|
|
icon+商品价格 |
由icon+商品价格组成，多用于促销场景。 |
|
|
|
折扣优惠 |
折扣优惠1（文本） |
折扣数值，为文本形式。 |
|
|
折扣优惠2（标签） |
折扣数值，为标签形式。 |
|
|
|
划线价格 |
商品原价，以划线样式展示。 |
|
|
|
商品图片 |
商品图片，呈现图片形式。 |
|
|
|
查看商品详情 |
查看商品详情1（按钮） |
呈现按钮形式，点击跳转对对应商品详情页 |
|
|
查看商品详情2（icon） |
呈现icon形式，点击跳转对对应商品详情页 |
|
|
|
查看商品详情3（文本） |
呈现文本形式，点击跳转对对应商品详情页 |
|
-
商品块/商品列表
单商品/商品类别分别都将上方的基础商品组件按照一定的布局规则组合在一起。
单商品：展示单个商品的商品信息。
商品列表：展示多个商品的商品信息，由多个商品块组成。
|
分类 |
组件 |
说明 |
编辑示例 |
|
单商品块 |
单商品块1（纵向排列） |
纵向排列展示单个商品的信息，默认依次为：
|
|
|
单商品块2（横向排列） |
横向排列展示单个商品信息，默认依次为： 左侧：
右侧：
|
|
|
|
商品列表 |
商品列表1（纵向） |
商品单行/多行排列展示，每个商品的商品信息纵向排列，默认依次为：
|
|
|
商品列表2（横向） |
商品单行/多行排列展示，每个商品的商品信息横向向排列，默认依次为： 左侧：
右侧：
|
|
|
|
商品轮播1 |
轮播展示多个商品，每个商品的商品信息纵向排列，默认依次为：
|
|
|
|
商品轮播2（3D轮播） |
轮播展示多个商品，且轮播效果有3D样式，每个商品的商品信息纵向排列，默认依次为：
|
|
三、常规编辑操作介绍
自定义调整商品类型卡片
商品列表/单商品组件只默认组合了商品图片、标题、价格方便快速完成搭建，同时也支持自定义的组合商品组件、调节组件样式、以及布局。
-
添加商品组件
商品组件在左侧组件面板中，切换到商品组件分类下，选择需要的组件（例如，折扣优惠）拖拽到画布中，放置到商品列表的商品块中。
-
删减商品组件
在画布中点击定位到需要删除的商品组件，在左上方的快捷操作中，点击删除icon即可删除。 -
调节组件样式
例：修改商品标题颜色、字号：在画布中点击定位到商品标题组件，在左侧配置面板中，切换到样式 tab下，点击文本选色器，自定义选择颜色。 -
-
调节列表布局
点击定位画布中的商品列表组件，在左侧配置面板-布局 分类下，可通过不同的配置项去调节布局，且支持PC、移动端分别配置。
|
组件 |
说明 |
编辑示例 |
|
商品列表 |
配置排版风格： 可通过排版风格 配置不同的商品排列方式。支持
|
|
|
配置第一屏商品数量： 第一屏商品展示数量=展示行数*每行展示商品数 ，可通过展示行数、每行展示商品数进行配置。 |
|
|
|
配置加载方式： 可通过加载方式进行配置，支持：
|
|
|
|
配置商品轮播行数： 可通过展示行数进行配置。 |
|
|
配置第一屏商品数量： 可通过轮播块宽度进行配置，例如设置50%宽度比例，则每行展示2个商品。 注意：轮播块间距、轮播块宽度比例共同决定第一屏商品展示数量，例如，当存在间距时，设置50%的宽度比例无法完整展示2个商品，需要将比例减小至49%。 |
||
|
配置轮播切换数量： 可通过轮播切换宽度进行配置，支持：
|
|
|
|
商品列表轮播2（3D轮播） |
配置每行商品数量： 可通过每行展示个数进行配置。 注意：3D轮播因样式限制，每行展示个数仅支持奇数。 |
|
四、常见搭建技巧
灵活调整商品组件布局
商品列表布局改变
商品组件中，不同的组件会默认有布局方式，例如横纵商品块/横向商品列表，商品信息默认为左右两列布局展示，可以通过商品块容器的能力来灵活调整布局。
-
添加、删除子容器：在画布中点击定位到单商品容器（蓝色线条部分），在左侧配置项面板中，点击添加/删除列，对应单商品容器中的子容器（黄色线条部分）会相应增加/删除。
-
调整子容器宽度：在画布中点击定位到单商品容器的左侧子容器（黄色线条），拖拽容器的尺寸调节器，即可快捷完成调节。
-
切换子容器排列方向：在画布中点击定位到单商品容器（蓝色线条部分），在左侧配置项面板中，点击切换排列方向，即可快捷完成操作。例：将横向排列改成纵向排列。
-
商品信息布局调整
在商品组件中，商品信息的排列只能遵守父容器（单商品的子容器-黄色线条部分），仅单向横向/纵向排列，若需要搭建出，整体纵向排列，但价格、折扣优惠组件横向排列（如下图所示）
-
在画布中点击定位到单商品容器的子容器（黄色线条），点击左侧组件面板，将2列布局容器拖入单商品容器的子容器。
-
将价格、折扣优惠分别拖入上方布局容器的左/右子容器（列）中。
-
点击定位布局容器的左侧子容器，拖拽容器的尺寸调节器，将价格、折扣优惠的间距调整到合适的距离。
数据绑定
所有的商品组件均支持绑定商品数据源，单商品组件需要在单商品容器中绑定单商品数据源，商品列表组件需要在列表容器中绑定商品数据源。绑定后，二者内的商品组件（商品图片、价格等）都将跟随父容器绑定的数据源，无法单独修改。
-
商品图片/商品价格/折扣优惠/查看商品详情绑定商品数据源（以商品价格为例）：
点击选中画布中的商品价格组件，在左侧配置面板中点击选择商品，在弹窗中勾选需要绑定的商品即可。
-
单商品组件绑定商品数据源：
点击选中画布中的单商品容器（蓝色线条部分），在左侧配置面板中点击选择商品，在弹窗中勾选需要绑定的商品即可。
此时，单商品容器内的商品组件将都将跟随父容器绑定的商品数据源，且配置项「选择商品」为禁用状态，无法更改商品数据源
-
商品列表组件绑定商品数据源：（以纵向商品列表为例）：
点击选中画布中的商品列表容器（蓝色线条部分），在左侧配置面板中点击选择商品，在弹窗中勾选需要绑定的商品即可。
此时，单商品容器内的商品组件将都将跟随父容器绑定的商品数据源，且配置项「选择商品」为禁用状态，无法更改商品数据源
常见问题
-
如何理解单商品、商品列表预留出的内边距？
A:因为单商品、商品列表都由容器+商品信息组件（商品图片、商品价格等）组成，而容器组件都是两层盒子的结构，以单商品为例：即单商品父容器（蓝色线条部分）+子容器（列-黄色线条部分），拖入组件进入画布时，预留出的边距只是为了方便再编辑器中进行选中、编辑等操作，实际不会在C端展示边距；因此，此时的组件的内边距、外边距配置项数值为0，手动输入边距的值后，该样式才会在C端生效。
提示：可通过预览模式查看真实边距效果。
-
为什么商品列表组件绑定了商品数据源后，无法在编辑器中预览加载效果？
A: Page Builder 编辑器环境暂不支持预览效果，在主题编辑器、C端可正常加载。