按颜色分组展示商品媒体
商品页只展示当前所选颜色的图片。Zalify 主题根据变体图片在图库中的位置自动分组，无需在替代文本中填写识别码，替代文本可完全用于 SEO 与无障碍访问。
当一款商品有多个颜色时，图库中的图片数量往往很多。Zalify 主题会对商品媒体自动分组：商品页只展示顾客当前所选颜色的媒体，切换颜色时即时替换为对应的一组图片。同时，颜色选项的色块会以缩略图形式呈现，图片取自各变体的变体图片。
该功能自动生效，无需开启任何设置。主题依据您在 Shopify 后台已在维护的两项信息完成分组：各颜色的变体图片，以及图库中媒体的排列顺序。
分组规则
主题会检查商品的各个选项，选取第一个「各变体图片互不相同」的选项作为分组依据，绝大多数情况下即 Color（颜色）。随后：
- 每个颜色的变体图片标记该颜色分组的起点。 从这张图片开始、直到下一个颜色的变体图片之前的所有媒体，都归属于该颜色。
- 排在第一个颜色变体图片之前的媒体为共享媒体。 无论选择哪个颜色都会展示，适合放置尺码表、品牌横幅或适用于全系列的面料细节图。
- 选择某个颜色时，页面展示该颜色的分组以及共享媒体，其余媒体隐藏。
因此，分组完全取决于每张媒体在图库中的位置，并以您设置的变体图片为锚点，无需在任何地方填写识别码。
分组不再依赖替代文本，您可以将替代文本用于如实描述每张图片。屏幕阅读器会朗读替代文本，搜索引擎也会将其纳入索引，建议面向顾客与 SEO 撰写，而不是为主题填写代码。
设置步骤
本文介绍的是当前 Zalify 主题（v3）的行为。旧版主题通过在替代文本中填写 #Color_颜色值 识别码进行分组；如果您的店铺仍在使用旧版主题，请按旧版方式设置。
为每个颜色设置变体图片
在 Shopify 后台打开商品，为每个颜色变体指定一张图片（在 变体 区域点击某个颜色，设置其图片）。这张图片既是主题识别该颜色分组的锚点，也是颜色选择器中显示的缩略图。
未设置变体图片的颜色不会形成分组；顾客选择该颜色时，主题将展示全部媒体。
按颜色分段排列图库
在商品的 媒体 区域，拖动图片调整为以下顺序：
- 共享媒体放在最前：所有颜色都需要展示的内容，如尺码表、品牌横幅。可选，没有可跳过。
- 随后每个颜色连续排列一段：以该颜色的变体图片开头，后面紧跟该颜色的其余图片。
例如，一件有 Mocha 和 Off-white 两种颜色的衬衫：
| 位置 | 图片 | 归属 |
|---|---|---|
| 1 | 尺码表 | 共享（所有颜色均展示） |
| 2 | Mocha 正面（Mocha 的变体图片） | Mocha |
| 3 | Mocha 背面 | Mocha |
| 4 | Mocha 细节 | Mocha |
| 5 | Off-white 正面（Off-white 的变体图片） | Off-white |
| 6 | Off-white 背面 | Off-white |
选择 Mocha 时展示第 1–4 张；选择 Off-white 时展示第 1、5、6 张。
注意事项
- 同一颜色的图片需连续排列。 每个颜色的分组一直延续到下一个颜色的变体图片为止，若把一张 Mocha 图片放在 Off-white 分段中间，它会被归入 Off-white。分组有误时，调整图库顺序即可，无需修改其他内容。
- 末尾的图片归入最后一个颜色。 排在最后一个颜色分段之后的媒体，都会归属于该颜色。共享媒体请放在最前面，不要放在末尾。
- 没有变体图片则不分组。 如果该选项下所有颜色都未设置变体图片，主题会在任意选择下展示完整图库，即 Shopify 的默认行为。
- 视频与 3D 模型同样参与分组。 分组依据位置，任何类型的媒体只要位于某个颜色的分段内，都会归入该颜色。
相关阅读
- 商品分区与商品页内容块：商品页的其他媒体与布局设置
- 商品卡片设置：色块在集合页与商品卡片中的展示方式
- 添加商品媒体 与 为变体添加图片（Shopify 帮助中心）