Shopify Template - Color Swatches using links not variants

0
votes

I'm currently working on a Shopify project and I need to add color swatches on the product pages. I already did it in other projects using the product variants. But in this case the colors are different products. I found some examples on shopify:

In those examples when you click on a color you want, it changes the page. In the code it's a simple html link to the other products.

These brands are maybe using an app but I'm not sure.

Thanks.

2
shopifyliquidshopify-template

2 Answers

0
votes

I did that with an App for a swim suit company. Due to the way their navigation worked, it was clear they had a product per color. Not a color per variant. The App I provided them was for curated links. So they could connect all the same products with the different colors, and easily provide clickable links to each, making for a super easy way to manage inventory.

0
votes

I did some test and I came up with an idea. I still need to work on it but I think maybe it could be a solution.

I am using tags to linked the products together. I need to test with more product how it's working but it could be a good start.

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