颜色色卡 (Color Swatches)

颜色色卡功能允许您将传统的下拉选择器替换为更直观的颜色块或图片，从而提升用户的购物体验，特别是在浏览具有多种颜色变体的产品时。

配置项

您可以在 主题设置 (Theme Settings) -> 颜色色卡 (Color Swatches) 中找到以下配置项：

外观设置

1. Swatch Type 色卡类型 (swatch_type)

   • 类型：选择 (Select)
   • 描述：选择变体选择器的显示样式。
   • 选项：
     • Color Block (颜色块)：显示为色块。
     • Dropdown (下拉菜单)：显示为传统的下拉列表。
   • 默认值：block

2. Shape 形状 (swatch_shape)

   • 类型：选择 (Select)
   • 描述：控制色卡的外观形状。
   • 选项：
     • Circle (圆形)
     • Square (方形)
     • Rounded Square (圆角正方形)
   • 默认值：circle

数据源设置

1. Source 颜色源 (swatch_source)

   • 类型：选择 (Select)
   • 描述：决定色卡颜色的来源。
   • 选项：
     • Native / CSS (原生设置或CSS颜色名)：使用 HTML/CSS 标准颜色名称（如 "Red", "Blue"）或主题预设的颜色值。
     • Custom Image (自定义PNG图片)：使用您上传的自定义图片作为色卡背景（适用于花色、纹理或特定图案）。
   • 默认值：native
   • 提示：如果选择 Custom Image，您需要在 Shopify 后台的 内容 -> 文件 中上传对应的 PNG 图片。
     • 文件名格式：必须为全小写，空格用连字符 - 代替，扩展名为 .png。
     • 示例：如果颜色选项名为 Navy Blue，则文件名应为 navy-blue.png。

2. Color Option Names 触发色卡的选项名称 (swatch_trigger_options)

   • 类型：多行文本 (Textarea)
   • 描述：指定哪些变体选项应该显示为色卡。系统会根据选项名称进行匹配。
   • 格式：多个名称之间用英文逗号 , 分隔。
   • 默认值：Color,Colour,Couleur,Farbe,Colore,Cor
   • 说明：支持多语言，确保包含了您店铺语言中对应的颜色选项名称。

交互设置

1. Trigger: Hover to switch image (悬停切换主图) (swatch_hover_trigger)
   • 类型：复选框 (Checkbox)
   • 描述：启用后，当鼠标悬停在产品列表页（Collection页）的色卡上时，产品主图会自动切换到对应颜色的变体图片。
   • 默认值：false

使用说明

1. 启用色卡：

   • 确保 Swatch Type 设置为 Color Block。
   • 检查 Color Option Names 中是否包含了您的产品颜色选项名称（例如 "Color" 或 "颜色"）。

2. 自定义色卡图片 (可选)：

   • 如果标准颜色无法满足需求（例如迷彩、渐变色），请选择 Source 颜色源 为 Custom Image。
   • 准备 50x50 像素左右的 PNG 图片，截取该颜色的纹理或图案。
   • 重命名图片文件以匹配颜色名称（例如 Heather Grey -> heather-grey.png）。
   • 将图片上传到 Shopify 后台的 内容 -> 文件 部分。

3. 悬停切换效果：

   • 如果您希望用户在浏览产品列表时能快速预览不同颜色的外观，请勾选 Trigger: Hover to switch image。这要求您的每个颜色变体都关联了正确的产品图片。