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

Solved

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

jaygupta-tech
Shopify Partner
46 0 8

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

Accepted Solution (1)

Xipirons
Shopify Partner
136 25 32

This is an accepted solution.

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:

 

<div class="ProductItem__Info ProductItem__Info--{{ settings.product_info_alignment }}">
{%- if show_vendor -%}
<p class="ProductItem__Vendor Heading">{{ product.vendor }}</p>
{%- endif -%}

<h2 class="ProductItem__Title Heading">
<a href="{{ product.url | within: collection }}">{{ product.title }}</a>
</h2>

<!-- code to display sizes will go here -->

{%- if show_price_on_hover == nil or show_price_on_hover -%}
{%- render 'product-item-price', product: product, show_vendor: false -%}
{%- endif -%}
</div>



5. Replace the comment `<!-- code to display sizes will go here -->` with the following code snippet:

 

<div class="ProductItem__Sizes">
{%- for variant in product.variants -%}
{%- if variant.available -%}
<span class="ProductItem__Size">{{ variant.title }}</span>
{%- endif -%}
{%- endfor -%}
</div>



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

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

7. 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.

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

9. 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!

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

View solution in original post

Replies 3 (3)

Xipirons
Shopify Partner
136 25 32

This is an accepted solution.

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:

 

<div class="ProductItem__Info ProductItem__Info--{{ settings.product_info_alignment }}">
{%- if show_vendor -%}
<p class="ProductItem__Vendor Heading">{{ product.vendor }}</p>
{%- endif -%}

<h2 class="ProductItem__Title Heading">
<a href="{{ product.url | within: collection }}">{{ product.title }}</a>
</h2>

<!-- code to display sizes will go here -->

{%- if show_price_on_hover == nil or show_price_on_hover -%}
{%- render 'product-item-price', product: product, show_vendor: false -%}
{%- endif -%}
</div>



5. Replace the comment `<!-- code to display sizes will go here -->` with the following code snippet:

 

<div class="ProductItem__Sizes">
{%- for variant in product.variants -%}
{%- if variant.available -%}
<span class="ProductItem__Size">{{ variant.title }}</span>
{%- endif -%}
{%- endfor -%}
</div>



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

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

7. 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.

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

9. 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!

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

jaygupta-tech
Shopify Partner
46 0 8

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

jaygupta-tech
Shopify Partner
46 0 8

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