Shopify 模板 - 使用链接而不是变体的色板

Question

我目前正在处理 Shopify 项目，我需要在产品页面上添加 color swatches。我已经在使用product variants 的其他项目中做到了。但在这种情况下，颜色是不同的产品。我在 shopify 上找到了一些示例：

• Fashion Nova。
• doyoueven。

在这些示例中，当您单击所需颜色时，它会更改页面。在代码中，它是一个指向其他产品的简单 html 链接。

这些品牌可能正在使用应用程序，但我不确定。

谢谢。

Answer 1

我用一个应用程序为一家泳装公司做到了这一点。由于他们的导航工作方式，很明显他们每种颜色都有一个产品。不是每个变体的颜色。我为他们提供的应用程序用于策划链接。因此，他们可以将所有相同的产品与不同的颜色连接起来，并轻松地为每个产品提供可点击的链接，从而为管理库存提供了一种超级简单的方法。

Answer 2

我做了一些测试，我想出了一个主意。我仍然需要努力，但我认为这可能是一个解决方案。

我正在使用标签将产品链接在一起。我需要用更多产品测试它的工作原理，但这可能是一个好的开始。

<div class="swatches">
  <label>Colors</label>
  <br />
  <div class="related-colors">
    {% for relatedProduct in collections.all.products %}
      {% if product.tags contains relatedProduct.handle %} 
          {% for tag in relatedProduct.tags %}
              {% if tag contains 'color-' %}
                  {% assign color = tag | replace: 'color-', '' %}
                  <a href="{{ relatedProduct.url }}">
                    <div class="color-swatches" style="background-color: {{color}}"></div>
                  </a>
              {% endif %}
          {% endfor %}
      {% endif %}
    {% endfor %}
  </div>
</div>



<style>
  .swatches{
    width:100%;
    padding-left:5px;
  }
  .color-swatches 
  {
    margin-top:10px;
    display: inline-block;
    margin-right: 0px;
    margin-bottom: 10px;
    width: 30px;
    height: 30px;
    border: 1px solid #dedede;
    border-radius: 30px;
  }
</style>