时间戳

首页 > 解决方案 > Shopify 模板 - 使用链接而不是变体的色板

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

问题描述

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

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

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

谢谢。

标签： shopifyliquidshopify-template

解决方案

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

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

<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>

推荐阅读