Skip to content

Instantly share code, notes, and snippets.

@mariusa
Last active January 27, 2023 08:10
Show Gist options
  • Save mariusa/0841b0e973ee6fa7937e202f6b2a9560 to your computer and use it in GitHub Desktop.
Save mariusa/0841b0e973ee6fa7937e202f6b2a9560 to your computer and use it in GitHub Desktop.
all-colors-variants-on-product-page
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment