How do i have multiple colour variants of a product but be able to separately display that product

[Digdeepactive]

 How do i have multiple color variants of a product but be able to separately display that product variant separately on a collection page. 

For example i own a Active wear business and say i have 3 color ways of a certain product, right now to display that product variant i post them as separate products. This means customers have to go back to select the other color rather than the color swatch appear as an option to select another color. I know how to create 1 product with different variants but i do not know to display all of them separately on a collection page and that product once you click on it shows all the other colors of that product within that product page and still be able to automatically track the quantity.

I hope someone can help

Thank you 

[Guleria]

Hello @Digdeepactive ,

There is app available for it.
And if you want to go with custom code you can follow this code

{% for product in collection.products %}
 {% if product.variants.size < 2 %}
    Call your theme product loop
 {% else %}
   Call the custom loop ( just copy the defult  one and use here )
 {% endif %}
{% endfor %}

Make the changes you want to do in custom loop and t will done.

Thanks

[Digdeepactive]

What is the app?

[Guleria]

Here you can check https://apps.shopify.com/show-variants-on-collection-page

[EmilyLoftman]

Hi, I am having a similar issue. I use the theme Taste. Where should I put the code? 
If you'd like to work on this for me you can email me emily@fredapower.com 

[MRamzan]

Here is the solution without using any App:

For all the themes here is the playlist:

https://www.youtube.com/playlist?list=PLB3Vs7gvGQUd81oa8gQvbfOc0nt1sgN62

Just like this: