产品列表

产品列表组件用于在旺铺自定义模块里展示您店铺里的真实商品。选好商品后，会自动生成一排（或多排）商品卡片，每张卡片包含商品图、名称、价格、起订量等信息，访客点击按钮即可进入对应商品详情页。适合在首页做「主推商品」「新品推荐」等展示。

一、组件能做什么

• 从店铺选商品：不用手抄商品信息，直接从您国际站后台的商品库里勾选，最多可选 8 个。
• 自动生成卡片：选好后自动生成整齐的商品卡片，包含主图、标题、价格、起订量（若有）和底部按钮。
• 可调整外观：按钮颜色、按钮文字、卡片圆角、按钮圆角等都可以在右侧属性里改。
• 可调整位置：在画布上拖动组件，或设置距离左侧、顶部的距离，方便叠在背景图楼层上。

二、怎么添加组件

1. 打开阿里巴巴国际站旺铺装修后台，进入要编辑的页面。
2. 添加或打开自定义内容模块，点击「自定义内容」，进入雨燕装修大师编辑器。
3. 在左侧组件面板找到分类 「商品」。
4. 将 「产品列表」 拖到画布上合适的位置（常放在某张背景图楼层的商品展示区域）。
5. 选中该组件，在右侧属性里点击 「选择商品」，按下面第三节完成选品。
6. 按需修改按钮颜色、按钮文字等，保存模块并发布。

三、如何选择商品

点击属性里的 「选择商品」 按钮，会弹出选品窗口：

选品数据来自您当前登录的旺铺后台，请确保已用主账号或有权管理商品的账号登录国际站，否则可能加载不出商品列表。

四、主要设置项说明

选择商品

• 入口：属性面板顶部的蓝色 「选择商品」 按钮。
• 提示文字会说明最多可选 8 个；未选商品时，画布上会显示虚线框提示，需先选商品才会出现卡片。

主题颜色

• 控制每张商品卡片底部 按钮的背景颜色。
• 默认偏绿色，可改成与店铺主色、楼层设计一致的颜色。

按钮文本

• 卡片底部按钮上显示的文字，默认是英文 View more（查看更多）。
• 可改成如「立即查看」「了解更多」等，建议与页面语言一致。

边框圆角

• 数字越大，商品卡片外框和主图区域的 圆角越明显；填 0 则为直角。

按钮圆角

• 控制底部按钮是直角还是圆角，与「边框圆角」分开设置，可单独微调。

位置（样式里调整）

• 左边距、上边距：用来把整块产品列表精确摆到背景图上的商品区；需要与设计师给的坐标对齐时使用。
• 也可直接在画布上 拖动 组件到目标位置。

五、每张商品卡片上有什么

选品确认后，每张卡片大致包含：

• 商品主图（自动读取您后台的商品图）
• 商品标题
• 价格（展示后台返回的价格信息）
• 起订量（若后台有则会显示）
• 底部按钮：点击后在新页面打开该商品的详情链接

卡片上的星级为固定展示样式，不代表真实评价数据，无需单独设置。

六、常见使用场景

场景 1：首页主推 4 款爆品

在首页某楼层背景图上预留商品区，拖入产品列表，选 4 款主推商品，按钮文字改为「查看详情」，主题色与页面主色统一。

场景 2：新品推荐 6～8 款

选 6～8 款新品，组件会自动加高并分两行展示；适合「New Arrivals」专题区。

场景 3：叠在图片背景楼层上

先做好「图片背景容器」楼层，再把产品列表拖到背景图上商品橱窗的位置，用拖动或边距微调对齐设计稿。

七、注意事项

• 必须先选商品：未选商品时只有空白提示，发布前务必点「选择商品」并确认。
• 最多 8 个：超过数量无法继续勾选；若商品很多，请挑最想推广的若干款。
• 展示顺序：以选品窗口里「已选区域」的顺序为准，排在前面的商品在页面上也更靠前。
• 改商品要重新选：想换一批商品时，再次打开「选择商品」重新勾选即可，无需手改每张卡片。
• 信息随后台更新：标题、价格、图片、链接均来自店铺商品数据；在后台改了商品信息后，建议在编辑器里重新打开选品或保存一次模块，以便展示最新内容。
• 整块拖动，不要拆卡片：产品列表生成后，单张卡片不能在画布里单独拆开编辑；要改样式请用右侧属性，要改内容请重新选商品。
• 宽度固定为 1440 区域：与国际站 PC 旺铺常见通栏宽度一致，请与设计师确认商品区是否按 1440 宽排版。
• 与「图片链接」「热区」不同：产品列表是专门展示店铺商品库的组件；若只是给一张静态图加链接，请用图片链接或热区，不要用产品列表。

八、推荐操作顺序

1. 在画布上拖入「产品列表」并摆到大致位置；
2. 点击「选择商品」→ 筛选 / 搜索 → 勾选 1～8 个商品 → 调整顺序 → 确认；
3. 设置主题颜色、按钮文字、圆角等；
4. 拖动或设置边距，与背景图对齐；
5. 预览每个按钮能否正常打开商品页；
6. 保存模块并发布页面。

如有疑问，可结合「图片背景容器」等文档一起查看，或联系客服。