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
