藉由添加或编辑「商品图文」、「商品列表」元件，为卖场加入图片和文字说明，并搭配不同的呈现方式，丰富您的独立分润卖场设计，吸引顾客浏览。
⚠️ 开始前请注意：
- 当前功能仅支持搭配「独立分润卖场」使用。
- SHOP Builder 当前仅支持 Ultra Chic、Kingsman、Varm、Philia 版型使用；若切换其他店面版型，独立分润卖场将无法正常展示。
以下文章将介绍：
一、商品图文元件
步骤一：
接续 独立分润卖场 的商品与卖场样式设定，点击「商品图文」。
步骤二：
您可以选择添加「商品」、「图片」或「文字」。
＊注意：最多支持选择 4 项，可任意组合及复选。
示例说明
1. 商品 x4
2. 图片 x3 + 文字 x1
3. 商品 x2 + 图片 x2
1. 商品
第一步：下拉商品元件，点击「+ 商品」按钮。
第二步：选择一件商品后，点击「确认」。
＊注意：暂不支持选择组合商品。
2. 图片
下拉图片元件，点击新增桌机 / 手机图片，并设置图片 ALT。
3. 文字
下拉文字元件，输入标题、副标题及内容；可调整 Heading 标籤、 字体颜色、 字体大小、字体粗细、添加超链接等。
＊备註：
- 若您想了解更多 Heading 标籤信息，请参考：设定商店 Heading 标籤。
- 样式呈现的优先顺序为：元件的样式设置 > 店面级别样式设置。
- 若您有使用客製化语法调整页面样式设置，在调整过元件样式设置后，需要重新调整客製化语法的规则。
- 当前 Shopper App 暂不支持元件层级的文字颜色、文字大小设置。
步骤三：
设置边距、文字对齐，并选择是否展示商品摘要及隐藏商品，完成后点击「储存」。
- 边距：可调整「图片」和「文字」与页面的边距。
- 文字对齐：可选择靠左、置中、靠右对齐。
- 展示商品摘要：开启按钮代表展示商品摘要，关闭则不展示。
- 展示隐藏商品：开启按钮代表展示隐藏商品，关闭则不展示。
步骤四：
点击「储存」后，可于右侧预览商品图文设置，或点击右上方「预览商店」，查看完整的卖场前台画面。
步骤五：
确认完成上述设置后，请点击「发布」按钮，让顾客在卖场前台可查看当前分页所有添加与异动。
二、商品列表元件
步骤一：
接续 独立分润卖场 的商品与卖场样式设定，点击「商品列表」。
步骤二：
步骤三：
1. 商品
第一步：最多可选择 40 项商品，点击前往「下一步」。
＊注意：暂不支持选择组合商品。
第二步：拖拉商品以调整其排序，完成后点击「确认」。
第三步：已选择的商品将展示于左侧栏位，您可以点击 图示编辑，或
图示删除。
2. 商品分类
第一步：选择商品分类，完成后点击「确认」。
＊注意：最多支持展示 40 项商品，若当前分类内含 40 项商品以上，排序靠后的商品将不会展示于卖场。
第二步：已选择的商品分类将展示于左侧栏位，您可以点击 图示编辑，或
图示删除。
步骤四：
设置标题、文字对齐、商品栏数及边距，并选择是否展示商品摘要及隐藏商品，完成后点击「储存」。
- 标题：输入当前商品列表的标题，并设置标题大小。
- 文字对齐：可选择靠左、置中、靠右对齐。
- 商品栏数：商品列表的栏数（横排），仅支持设置桌机。
- 边距：可调整「图片」和「文字」与页面的边距。
- 展示商品摘要：开启按钮代表展示商品摘要，关闭则不展示。
- 展示隐藏商品：开启按钮代表展示隐藏商品，关闭则不展示。
步骤五：
点击「储存」后，可于右侧预览商品列表设置，或点击右上方「预览商店」，查看完整的卖场前台画面。
步骤六：
确认完成上述设置后，请点击「发布」按钮，让顾客在卖场前台可查看当前分页所有添加与异动。
延伸阅读
评论