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

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!

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.

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.

www.vsteals.com

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

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!

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

I’d love to do this on my site that uses the Dawn theme. But I can’t find that option to add Variant Picker?

Hi there :raising_hands:

If you’d like customers to see and interact with size options directly from the collection page, one approach is to customize the product card code in Horizon and render the variant picker within the collection grid. However, this typically requires theme modifications and may need additional work to ensure variant selection and add-to-cart functionality work correctly.

If you’re looking for a no-code solution, you may want to take a look at Easify Custom Product Options.

With Easify Custom Product Options, you can display option buttons, color swatches, image swatches, dropdowns, and other option types directly on Collection Pages as well as Product Pages.

  • This is the result:

  • This is the app setup:

Simply go to Settings → Advanced Settings → Other Pages and enable Show options on Collection page.

Once enabled, customers can view and select available options directly from the collection page without opening each product, creating a smoother browsing experience and reducing clicks.

If you prefer to stay entirely within the Horizon theme, it would require custom theme development, but if your goal is simply to display variants on collection pages, a dedicated option solution is usually much quicker to implement. :heart: