How can I add a hover over image action in the studio theme?

Technical Q&A

Topic summary

Adding a hover action on product images in the Shopify Studio theme to show interactive controls (Add to Cart, size, color).

  • Initial guidance: Edit the card-product.liquid snippet (around line 82) to insert an Add to Cart button and add CSS in base.css to reveal the button on hover. A screenshot and code snippets (HTML/CSS) were provided and are central to implementation.

  • Result: The hover Add to Cart button works, but it doesn’t provide the desired half-overlay with size and color options.

  • Limitation: Studio theme doesn’t natively support variant selection (size/color) and Add to Cart directly from product cards. Achieving this requires significant customization in Liquid (Shopify’s templating language) and JavaScript (JS).

  • Recommended paths: 1) Hire a professional developer for custom Liquid/JS work. 2) Install a third-party app from the Shopify app collection for collection page add-to-cart/variant selection (link provided).

  • Status: Partially solved (hover Add to Cart). Full variant-selection overlay remains open; no in-thread code solution provided for the advanced requirement.

Summarized with AI on February 21. AI used: gpt-5.
1

Hi there,

I’m trying to add a hover over image action in the studio theme, but very new to the liquid coding thing. I would like to add an add to cart/size option/color option button when mouse hover over image. What is the best way to do this?

Thank you

2

Hi @amarquis30 ,

Please follow the steps below:

  • Step 1: Go to snippets > card-product.liquid file, in line 82 and add code:

Screenshot.png
Screenshot.png1103×549 47.3 KB

Code:

Add to cart
  • Step 2: Go to Assets > base.css and paste this at the bottom of the file:
.card .button--cart {
	width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 999;
    left: 0;
    opacity: 0;
    transition: all .5s ease;
    text-decoration: none !important;
}
.card:hover .button--cart,
.card:focus .button--cart {
    opacity: 1 !important;
}

Hope it helps!

3

Hi

Thank you for your help, this code did help a bit. It didn’t solve the whole problem thought since i’m looking for a solution where a box appears halfway when I hover over image and offers size and colour options in addition to the add to cart button.

4

Hi @amarquis30 ,

You want to add option choose variant and add to cart directly at product item. it will be a complicated requirement as Studio Theme doesn’t support this, you need to change more about Liquid and JS code. It will be difficult for someone to guide you through it in detail, you can only hire a professional for this.

Or you can install some app for it, refer https://apps.shopify.com/collections-add-to-cart

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.