One of my client recently wanted to display size variants of a product in the collection page. Just like below.

abs

So i added the following codes to the product-grid-item.liquid ( it might be different according to your theme. Just find the liquid file that is being loaded for products in the collection page ).

 

If you want to style it you can add the following css codes to your themes css file.

This will display the size variants in your shopify collection page right under the products or wherever you want.  The available variants will be linked to product page. Also it displays the stock as title.

Feel free to check it working on this website

About the author
1 Comment
  1. How would you go about making these options clickable to add to card ( like a quick buy)

Leave Comment

Your email address will not be published. Required fields are marked *

clear formSubmit