How to show product available size on hover on the collection page

Shopify Discussion
,
1

Hello Everybody

Please help me

To display the available sizes of the products when a customer hovers over the product image on the collection page in the Prestige theme

Link:- www.nainpreet.com

2

Hi @jaygupta-tech

This is actually something I’ve implemented on a few sites before.

The exact code needed can vary a bit depending on the specific customizations and configuration of your Prestige theme.

The class names, file structure, and existing code blocks may differ.

That said, here are the steps to display available product sizes on hover for the collection page in the Prestige Shopify theme:

  1. Open your Shopify admin and go to Online Store > Themes.

  2. Find the Prestige theme you are currently using and click Actions > Edit Code.

  3. Open the snippets folder and locate the file named product-item.liquid. Click it to open the file.

  4. Look for the following code block:


{%- if show_vendor -%}

{{ product.vendor }}

{%- endif -%}

## 
{{ product.title }}

{%- if show_price_on_hover == nil or show_price_on_hover -%}
{%- render 'product-item-price', product: product, show_vendor: false -%}
{%- endif -%}
  1. Replace the comment <!-- code to display sizes will go here --> with the following code snippet:

{%- for variant in product.variants -%}
{%- if variant.available -%}
{{ variant.title }}
{%- endif -%}
{%- endfor -%}

This will loop through the product variants and display the size if that variant is available.

  1. Next, open the assets folder and locate the theme.scss.liquid file. Click to open it.

  2. Scroll to the very bottom of the file and paste the following CSS:

.ProductItem__Sizes {
display: none;
margin-top: 5px;
}

.ProductItem:hover .ProductItem__Sizes {
display: block;
}

.ProductItem__Size {
display: inline-block;
margin-right: 5px;
padding: 2px 5px;
background: #ddd;
font-size: 11px;
}

This CSS will hide the sizes by default and only show them on hover. It also styles the size labels.

  1. Click Save in the top right to save all your changes.

  2. The available sizes should now display under the product title when you hover over a product image on the collection pages.

Let me know if you have any other questions!

2 Likes
3

Hello @Xipirons
Thank you very much
I am really happy now before I was too stress
I pray to :innocent: God that you always be happy :slightly_smiling_face:

4

Hello @Xipirons
Hope you are good I need your help please

I want to show the available product sizes on hover but only specific collection page

I want to show the hovering on this landing page only
https://nainpreet.com/collections/ready-to-ship

5

Could you help us to achieve this?

6

Hi, we would like to have availabale sizes as an overlay on images on collection page - could you do this for us?