Display an add to cart button on hover of featured collection product cards

Store Design
, ,
1

123.png
123.png1920×1040 304 KB

Hi, I’m trying to achieve the same hover effect on my Shopify store featured collection to display an add to cart button like this website: https://koh.com/.

This is my store, and when you hover on the featured collection cards it just zooms in: https://environmentalpartners.com.au/

Is it possible to get the same thing done on my store?

Looking for some help here.

Thanks and regards,

Jimmy

1 Like
2

Hi Jimmy,

Yes, it’s definitely possible to replicate the hover effect like the one on Koh.com for your store.

3

Mustafa_Ali_0-1744346733562.png
Mustafa_Ali_0-1744346733562.png1277×445 83 KB

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

4

@environmentalPa
I think you are using dawn theme, at first you need to show the add to cart in dawn theme

Arif_Shopidevs_0-1744347302896.png
Arif_Shopidevs_0-1744347302896.png861×626 87.2 KB

after this CSS

.product-card-wrapper .quick-add {
  display: none; /* Hide button initially */
}

.product-card-wrapper:hover .quick-add {
  display: block; /* Show button on hover */
}

How to Add This to Shopify YourYour Theme:

  1. Go to Shopify Admin → Online Store → Themes.
  2. Click “Customize” on your theme.
  3. In the theme editor, go to “Theme settings” (bottom left).
  4. Scroll down and click “Custom CSS”.
  5. Paste the above CSS code and save changes.

Alternative (Edit Theme CSS Directly):

  1. Go to “Online Store” → “Themes”.
  2. Click “Actions” → “Edit code”.
  3. Open base.css inside the assets folder.
  4. Paste the CSS at the bottom and Save.
5

Hey Jimmy,

I saw your question got resolved—love to see it! I also checked out your store, and honestly… I’m impressed. Clean layout, persuasive copy, and a vibe that really hits. Are you secretly a copywriter? Because your Website Content nailed that “add to cart” energy.

Real talk— your site’s in great shape. But one thing caught my eye…

I signed up for your newsletter (the one tucked under the footer), but no emails came through.

So I put together 5 powerful marketing strategies + a full store audit just for you. These are proven methods top brands in your niche are using to grow fast—and it looks like you’re not using them yet.

Want me to send it your way? Just reply “Yes” and it’s yours.

To your success,
Temez_4D
(Shopify Partner, forever poking around where growth happens)

6

Hi @environmentalPa ,

You can go to each section and enable these options, then I will guide you to change it:

Screenshot.png
Screenshot.png778×1442 62.9 KB

7

Hello Namphan,

I have done that now thanks. I thought it would reveal the add to cart button immediately from here, but seems like that’s not the case.

Looking forward to your response thanks.

Regards.

8

Hi @environmentalPa ,

1: For zoom: Please go to Actions > Edit code > Assets > component-card.css file and paste this at the bottom of the file:

@media screen and (min-width: 990px) {
    .card-wrapper:hover .media.media--hover-effect>img+img {
        transform: scale(1) !important;
    }
}

2: For button: I checked and didn’t find it, did you enable it?