如何在Shopify的quick view快速预览页面添加color swatches颜色色板

1. 前置准备 #

• 先在Shopify后台的「产品」-「选项集」中确认颜色选项的名称统一为Color（或你站点当前用的颜色选项名，后续代码要对应）
• 提前把每种颜色对应的色值/图片资源上传到Shopify的文件库，记录好对应的资源链接

2. 注入色板渲染逻辑到快速预览模板 #

• 进入Shopify后台「在线商店」-「主题」-「编辑代码」，找到快速预览的模板文件，一般命名为quick-view.liquid或者snippets/quick-view-product.liquid
• 找到模板中原有的产品选项下拉框渲染的代码段，替换为色板渲染逻辑，核心代码参考：

{% if option.name == 'Color' %}
  <div class="color-swatches">
    {% for value in option.values %}
      {% assign color_handle = value | handleize %}
      <label class="swatch-item">
        <input type="radio" name="option-{{ option.name }}" value="{{ value }}" class="swatch-radio" {% if forloop.first %}checked{% endif %}>
        <span class="swatch-color" style="background-color: {{ settings[color_handle] | default: '#ccc' }}"></span>
        <span class="swatch-label">{{ value }}</span>
      </label>
    {% endfor %}
  </div>
{% else %}
  <!-- 保留其他选项的原有渲染逻辑 -->
{% endif %}

注意：上述代码中的settings[color_handle]对应你在主题设置中提前配置的颜色和色值的映射关系，如果没有配置可以自行写判断逻辑匹配颜色名和对应色值。

3. 添加选项切换的交互逻辑 #

• 在快速预览模板的底部添加对应的JS代码，实现点击色板切换对应变体的功能：

document.querySelectorAll('.swatch-radio').forEach(radio => {
  radio.addEventListener('change', function() {
    // 收集当前选中的所有选项值
    const selectedOptions = Array.from(document.querySelectorAll('.swatch-radio:checked, .other-option-select')).map(el => el.value);
    // 匹配当前产品的对应变体
    const currentVariant = window.quickViewProduct.variants.find(variant => {
      return variant.options.every((opt, index) => opt === selectedOptions[index]);
    });
    if(currentVariant) {
      // 更新快速预览页的价格、库存、加购按钮状态、变体ID等信息
      document.querySelector('.quick-view-price').textContent = currentVariant.price;
      document.querySelector('.quick-view-addtocart [name="id"]').value = currentVariant.id;
      // 按需添加其他需要更新的信息，比如库存提示、变体图片等
    }
  });
});

注意：上述代码的选择器要和你当前主题快速预览页的对应元素类名保持一致，window.quickViewProduct是快速预览加载时注入的产品全局对象，如果你的主题没有这个对象，需要自己在快速预览渲染时把产品变体数据注入到页面中。

4. 添加色板样式 #

• 在主题的全局CSS文件（一般是base.css、theme.css或者custom.css）中添加色板的样式代码：

.color-swatches {
  display: flex;
  gap: 10px;
  margin: 15px 0;
}
.swatch-item {
  cursor: pointer;
}
.swatch-radio {
  display: none;
}
.swatch-color {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #eee;
}
.swatch-radio:checked + .swatch-color {
  border-color: #000;
}
.swatch-label {
  display: block;
  text-align: center;
  font-size: 12px;
  margin-top: 4px;
}

如果你的快速预览是通过第三方APP实现的，需要在APP的自定义代码设置中注入上述的渲染、JS和样式代码，不同APP的注入位置不同，可以参考APP的官方说明。所有修改保存后，到前台测试快速预览功能，确认点击颜色色板可以正常切换变体信息，加购功能正常即可。

内容的提问来源于stack exchange，提问作者Mark