all-colors-variants-on-product-page

all-colors-variants-on-product-page.liquid

<!-- How to handle multiple Color variants on Shopify: Show all colors on the product detail page
Details at https://eushopa.com/ -->
  {%- assign product_tags = product.tags | join: ', ' -%}
  {%- if product_tags contains 'group-' -%}
  <div class="swatch_options">
    <div class="swatch clearfix">
      {%- for tag in product.tags -%}
      {%- if tag contains 'group-' -%}
      {% assign collection_handle = tag | downcase | replace: ".", "-"  %}
      {%- if collections[collection_handle].products.size > 1 -%}
        <div class="option_title">Color</div>

        {%- for product_object in collections[collection_handle].products -%}
          <a href="{{ product_object.url | within: collection }}" title="{{ product.title }}"><img src="{{ product_object.featured_image | product_img_url: '100px' }}" class="image-group"></a>
        {%- endfor -%}
      {%- endif -%}
      {%- break -%}
      {%- endif -%}
      {%- endfor -%}
    </div>
  </div>
  {%- endif -%}
  
<style>
.image-group {
  width: 100px;
  height: auto;
  margin: 5px;
}
</style>