How to show size variants on collection page (Horizon theme)

[andreivasu]

Hello Shopify Community,

I'm working with the Horizon theme and need assistance with displaying size variants directly on the collection page. Currently, only the product images and titles are visible, but I want to show the available size options for each product directly on the collection page.

Does anyone know how I can modify the theme to display size variants (or any variants) next to each product on the collection page?

Any help or guidance would be greatly appreciated. Thanks in advance! 

[devcoders]

Hello @andreivasu 
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

[andreivasu]

www.vsteals.com

[BerkOnur]

Third-party apps make it easy to separate variants. I own the app, which helps merchants display product variants as separate items on collection pages. You can fully customize the settings per collection, show or hide specific variants, filter them, or separate them by specific options. For example, you can create a “Gold” collection and display only gold-related variants.

We support all of Shopify’s 10 new themes, including Horizon.

[jakeclifford · Accepted solution]

Hi @andreivasu,

To do this you need to add a variant picker block to your collection section product card.

1. click on your collection section, you will see there is a group that contains the product title.

2. Hover and click the plus icon above the product title to add a new block, search for variant picker

3. This should then automatically add the variants to the collection grid above the product title

If that helped solved your problem i'd appreciate it if you liked and set this message set this to the accepted solution.

Feel free to reach out if you have any more questions,
Jake 

[andreivasu]

Thanks! can you also help me allign the variants so it doesnt look messy? also it would be great if i can put the text and the variant on the same row, thanks!

[andreivasu]

[jakeclifford]

Hi @andreivasu,

This one will likely take a bit of custom code to fix, feel free to contact me directly if you want help with that.

Or maybe a good idea to start a new thread as someone might have another solution and I may add an answer there later. 

Thanks,
Jake