Create collection based on colour variant value

[rvandyck]

We have 4 products and each product comes in 2 different colours (black, and silver). Each product is set up as one product, with 2 colour variants. We are using the theme Narrative.

This is what we are trying to achieve:
We would like to create collections based on their colour, so there will be the "Black Collection" and "Silver Collection". When you click on the Black Collection, all 4 different products will be shown on the next page, showing pictures of the assigned black variants. By clicking on the black product, you will be taken to that product page and the black variant will be shown first, not the default image for that product.

Can this be customized in the code? The closest answer I have found is on this link, but the code doesn't seem to work for me: https://sections.design/blogs/shopify/different-product-images-on-collections

Thanks in advance,
Rob

[Lixon_Louis]

@rvandyck  this might help you https://community.shopify.com/c/Shopify-Discussion/Create-a-collection-by-color/td-p/381588

[rvandyck]

Thanks for the suggestion. Unfortunately this does not work, as it will show the default image for each product (which is not necessarily the correct colour that needs to be displayed on the collection page) for all collections.

Product 1: comes in black and silver
Product 2: comes in black and silver
Product 3: comes in black and silver
Product 4: comes in black and silver

To create a collection with all of the black variants we have in our shop, it will need to display the variant images, but smart collections by default will display the main product image for each. So technically, by clicking either the Black Collection or Silver Collection the shown images will be the exact same when using the smart collections feature.

[Nancy_Drake]

Hi @rvandyck 

You need to edit the theme codes to show the variant image matching with the collection title. I found these example codes to show the variant image in the variables loop.

{%- assign featured_image = product.featured_image  -%}
{%- assign product_url = product.url -%}

{%- if custom_option_name != blank and custom_option_value != blank -%}
  {%- assign custom_option_name = custom_option_name | downcase | strip -%}
  {%- assign custom_option_value = custom_option_value | downcase | strip -%}

  {%- for product_option in product.options_with_values -%}
    {%- assign option_name = product_option.name | handle -%}
    {%- if option_name == custom_option_name -%}
      {%- assign option_values = product_option.values | join: ',' | downcase | split: ',' -%}
      {%- for option_value in option_values -%}
        {%- if option_value == custom_option_value -%}
          {%- assign custom_variant = product.variants[forloop.index0] -%}
          {%- if custom_variant.featured_image -%}
            {%- assign featured_image = custom_variant.featured_image -%}
            {%- assign product_url = custom_variant.url -%}
          {%- endif -%}
          {% break %}
        {%- endif -%}
      {%- endfor -%}
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

Another option is using a Shopify app. You can try the Merchandising tool in the Collection filter & Search bar to exclude other option (Silver, White, etc) from the Black collection. It will look like this https://usf-vertical.myshopify.com/collections/red-shirts

[rvandyck]

Which page would I be adding this to specifically? collection-template.liquid ?

[blowerband]

What about having each color its own product instead of a variant?  Then you could make color collections?