How do I display size variants on hover

Store Design
, , , ,
1

Hi, Shopify referred me to here how do I display size variants on hover?

2

Hi @mazeclothing

Hi there,

I get why you’d want to display size variants on hover—it’s a fantastic way to make your product page more user-friendly and visually appealing. Let me walk you through the steps to achieve this.

1. Use a Theme That Supports Hover Features

First, check if your Shopify theme supports hover-based interactions. Some premium themes, like Debutify or Warehouse, have built-in options for variant previews on hover. If your theme doesn’t have this, no worries—there’s a way to customize it!

2. Customize Your Theme Code

If you’re comfortable tweaking code, here’s how you can do it:

  • Go to Online Store > Themes, and click Actions > Edit Code: https://prnt.sc/DVzk-BYGniPf
  • Find the product-card.liquid or similar file where your product grid is located.
  • Add a script or HTML snippet that displays size variants. For example, you can use {{ variant.title }} to pull the size variants dynamically.
  • Add CSS to style the hover effect. For example:

.product-card:hover .variant-sizes {

display: block;

}

  • Save and preview the changes.

3. Use a Third-Party App

If coding feels too tricky, there are apps that can do this for you. Here are some great options:

  • Variant Image Automator (automatically swaps images based on variants)
  • Product Options by Bold
  • Globo Color Swatch, Variant Image

These apps usually come with hover features and don’t require coding.

4. Test Your Changes

Finally, test your product pages on both desktop and mobile to make sure everything looks and works as expected. Hover effects may behave differently on touch devices, so keep that in mind.

If you need any other assistance, I am willing to help.
Best regards,
Daisy.