Product Card Customization

Store Design
,
1

Hi
I’m Nishant. I am looking to make a small customization to the product card I am using Ecommerce Website Templates - Free and Premium Themes for Your Online Store.

specifically, I’d like the available shoe sizes to be displayed when a user hovers over the product.

As a reference, you can check the section. On their site, clicking the “+” icon reveals the available sizes. I’d love to achieve a similar effect.

Any one can help me with this?

Looking forward to your response.

2

Hi @NishantSolanki

I am from Mageplaza - Shopify solution expert.

You can follow the solution below to achieve the desired effect:

1. Edit the Theme Code
Go to Shopify Admin → Online Store → Themes.
Click Actions → Edit Code on your active theme.
2. Modify the Product Grid Code
Locate the file that controls product listings. This is usually found in:

Sections/main-collection-product-grid.liquid

Sections/product-grid.liquid

3. Find the

  • tags inside the collection products in the above files.

    Refer to the code snippet below to properly add it to your code.

    The idea of the above code is to add a “+” button to the product item. When the cursor hovers over that button, the product size list will be displayed.

    Please let me know if it works as expected!

    Best regards