跳至正文
帮助
编辑器版块与区块

如何更改产品卡片和合集卡片的外观?

更改产品网格和分类网格中使用的产品卡片(图片比例、标题、价格和节省金额徽章、星级评分、购买按钮:加入购物车、立即购买或查看产品,变体色块)和合集卡片(标准或叠加样式、图片、标题、产品数量、按钮)。

阅读时间 3 分钟

产品网格和分类网格会把每个项目显示为一张卡片。您只需在版块中设计一次卡片,该版块中的所有卡片都会随之改变。

卡片在哪里

  • 产品卡片区块位于精选产品、相关产品、搜索产品和合集产品中。
  • 合集卡片区块位于分类和子分类中。

在建站工具中,先选择版块,再选择卡片区块。每个版块都有自己的卡片,所以更改只会影响该版块。卡片区块本身无法删除,但它的组成部分可以:隐藏或删除某个部分,或用添加新区块重新添加。

产品卡片

在卡片本身上,使用父级配色方案默认开启。关闭后可以给卡片设置自己的配色方案。拖动各部分可以改变它们在卡片上的顺序。组成部分包括:

  • 图片:宽高比(自动、纵向、正方形或横向)和图片适应(覆盖填满画框,完整显示显示整张图片)。选择自动时,图片适应会隐藏。
  • 标题:预设(文字样式)、行高、字间距和最大行数(1 到 3,较长的名称会以“...”截断)。
  • 价格:价格,促销时会显示被划掉的原价。节省(节省金额)以百分比、价格(节省的金额)或无的形式显示徽章。它只出现在有折扣价的产品上。
  • 评分:星级和评价数量。没有评价的产品不显示星级。
  • 购买:按钮和变体。

购买部分

  • 操作:结帐让顾客直接在卡片上购买。链接打开产品页面。
  • 标签:留空则使用默认文字:选择链接时为“查看产品”,选择结帐时为“加入购物车”或“立即购买”,取决于结账设置中的结账方式。
  • 样式:主要或次要按钮颜色。
  • 显示变体,以及大小和形状(形状只适用于颜色和图片色块):顾客可以在卡片上选择选项。卡片上只显示第一组变体。选择链接时永远不显示变体。

所有选项都缺货的产品,在选择结帐时会显示一个不可用的“缺货”按钮。

合集卡片

卡片样式:标准把文字放在图片下方,叠加把文字放在图片上。您还可以使用使用父级配色方案。组成部分包括:

  • 图片:宽高比、图片适应和叠加透明度(仅叠加样式,图片越暗,文字越容易阅读)。
  • 标题:预设、行高、字间距、最大行数(1 或 2)和对齐。
  • 产品数量:合集中的产品数量。它没有设置项:要去掉它,请隐藏或删除。
  • 按钮:标签(留空则使用店铺语言的默认文字)、样式和宽度(适应或填充)。它始终打开该卡片对应的合集。

合集卡片的各部分始终按相同顺序显示:图片、标题、产品数量,然后是按钮。

小贴士

仍需帮助?

给我们留言,我们会回复你。

联系我们