how to add the size option in product card right top bar.

[ErSanjay]

Hi everyone,

I'm working on improving the layout of our product cards on our Shopify store, and I want to add size options to the top right corner of each card.

I’ve implemented a feature that dynamically displays the available size options based on the product variants, ensuring that sizes labeled as "Material" are excluded.

[asisnaira]

---

@ErSanjaynjmc wrote:

Hi everyone,

I'm working on improving the layout of our product cards on our Shopify store, and I want to add size options to the top right corner of each card.

I’ve implemented a feature that dynamically displays the available size options based on the product variants, ensuring that sizes labeled as "Material" are excluded.

---

To add size options to the top right corner of your product cards in Shopify, you can modify your theme's code. First, access your Shopify admin and go to Online Store > Themes. Click on Actions > Edit code for your active theme. Locate the product card template, typically found in Sections or Snippets.

Within the product card code, you can add a new <div> element positioned at the top right corner using CSS for styling. Use Liquid code to loop through the product variants and display the available sizes, ensuring you filter out any variants labeled as "Material." Hope! it would be helpful.