How to display variants on collections page?

Store Design
1

Hi! We want to display colour and size variations on our collections page for different products so that customers can know about the variations available without having to open the specific product page. However, we do not want to list variations as different products but show that size/colour variations are available for the products.

2

You’ll have to output the options and their values:

{% for option in product.options_with_values %}
  {{ option.name }}:
  {% for value in option.values %}
    {{ value }}
  {% endfor %}
  -
{% endfor %}
// output Size: S, M, L, XL - Color: Red, Green, Blue
3

Hey, @shopeve

There is an app called Variable Products & Variants by ZubrCommerce that I think will suit your needs. With this app, you can use conditions to show variants with specified option values. This app shows these variants on collection pages just like products. The app comes with a 30-day free trial and is then $9/month.

If there is anything else I can help you with, please let me know.

4

Hi, thank you for your response! I’m a little confused about where to add this code.

5

Hi! Have you found a solution to this issue? Im currently facing the same one. Please let me know i would greatly appreciate it :slightly_smiling_face: