Shopify产品页使用链接而非变体实现色板功能咨询

核心逻辑和变体色板的区别是：变体色板是切换当前商品的variant_id，独立商品场景下是把同款式不同色的关联商品做聚合渲染，点击跳转到对应独立商品详情页，进阶可以做无刷新替换内容，体验和变体切换对齐。

第一步：后台元字段配置 #

先给商品配置两个自定义元字段，不用装第三方app，Shopify后台自定义数据里就能加：

• 商品归属色组字段：命名空间custom，键名product_color_group，类型选单行文本，同一款式所有不同颜色的商品，这个字段填完全相同的标识值，比如round-neck-tee-summer-2024，用来做同组商品的匹配
• 色板值字段：命名空间custom，键名swatch_color，类型可以选颜色（自动存十六进制色值）或者单行文本（纹理款可以存纹理图片地址），每个商品填自己对应的色值/纹理图地址

注意：如果同款式不同色的商品总数超过50个，建议建一个隐藏的自动/手动集合，把同组商品都归进去，避免Liquid遍历collections.all时的50个商品数量上限问题。

第二步：主题模板代码修改 #

找到你主题里产品页的主模板文件，一般路径是sections/main-product.liquid，找到原来放变体选择器的位置，或者你想放色板的位置，插入下面的Liquid渲染代码：

{% if product.metafields.custom.product_color_group != blank %}
  {% assign group_tag = product.metafields.custom.product_color_group.value %}
  {% comment %} 商品数少于50直接用all集合匹配，超过就替换成你建的同组隐藏集合句柄 {% endcomment %}
  {% assign related_color_products = collections.all.products | where: "metafields.custom.product_color_group", group_tag %}

  <div class="color-swatch-wrapper">
    <div class="swatch-title">可选颜色</div>
    <div class="swatch-container">
      {% for color_product in related_color_products %}
        <a
          href="{{ color_product.url }}"
          class="swatch-unit {% if color_product.id == product.id %}is-selected{% endif %} {% unless color_product.available %}is-outstock{% endunless %}"
          aria-label="{{ color_product.title }}"
        >
          <span class="swatch-fill"
            {% if color_product.metafields.custom.swatch_color contains '#' %}
              style="background: {{ color_product.metafields.custom.swatch_color }}"
            {% else %}
              style="background: url('{{ color_product.metafields.custom.swatch_color }}') center/cover"
            {% endif %}
          ></span>
        </a>
      {% endfor %}
    </div>
  </div>
{% endif %}

然后把下面的CSS样式加到主题的自定义CSS区，或者产品页对应的样式文件里：

.color-swatch-wrapper {
  margin: 24px 0;
}
.swatch-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}
.swatch-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.swatch-unit {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 2px;
  cursor: pointer;
  transition: border-color .2s ease;
  text-decoration: none;
}
.swatch-unit.is-selected {
  border-color: #111;
}
.swatch-unit.is-outstock {
  opacity: .4;
  position: relative;
}
.swatch-unit.is-outstock::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 1px;
  background: #333;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.swatch-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #eee;
}
.swatch-unit:hover {
  border-color: #999;
}
.swatch-unit.is-selected:hover {
  border-color: #111;
}

进阶优化（无刷新切换） #

如果不想点击色板整页跳转，可以加一小段JS调用Shopify自带的Section渲染接口，实现和变体切换一样的无刷新体验：

document.querySelectorAll('.swatch-unit').forEach(swatch => {
  swatch.addEventListener('click', async (e) => {
    e.preventDefault();
    const targetUrl = swatch.getAttribute('href');
    // 替换成你自己产品页section的id
    const sectionId = 'main-product';
    const res = await fetch(`${targetUrl}?section_id=${sectionId}`);
    const resText = await res.text();
    const domParser = new DOMParser();
    const newDoc = domParser.parseFromString(resText, 'text/html');
    const newSection = newDoc.querySelector(`#shopify-section-${sectionId}`);
    document.querySelector(`#shopify-section-${sectionId}`).replaceWith(newSection);
    // 替换浏览器url不刷新
    history.replaceState(null, '', targetUrl);
  })
})

注意：如果你的主题有产品图片放大镜、加购按钮的JS事件绑定，替换section内容后需要重新初始化对应组件，不然功能会失效。

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