Need help customising my add to cart button that pops up on hover

Store Design
, , , ,

Topic summary

Main issue: Customize the collection page “Quick add/Add to cart” hover button to appear as an outline button, similar to the referenced site. The request targets the product card hover state.

Updates:

  • One reply states the current behavior is working as expected and shares a screencast demonstrating it.
  • Another reply provides a CSS-based solution to replicate the outlined hover style.

Proposed solution (CSS; central to the thread):

  • Add CSS in base.css or theme.css.
  • Adjust action visibility and styles:
    • .m-product-card__media .m-product-card__action: unset transform, start with opacity: 0, fade in on hover with a transition.
    • button.m-add-to-cart: semi-transparent white background (#ffffff99), 1px solid black border, no shadow, black text; on hover use white background.

Status/outcome: No confirmation from the requester that the change solved the issue. Discussion appears open, pending feedback. Screencast and code snippet are key artifacts.

Summarized with AI on December 15. AI used: gpt-5.
1

I Need help customising my add to cart button /Quick add button that pops up on hover on the collection page to be an outline button.

My store: https://arabiancreed.com/collections/arabian-collection

Please refer to https://dossier.co/collections/all-perfumes (Just hover on a product card to see what I am trying to achieve) Thank you

2

Hello @Ked , working as expected
https://www.awesomescreenshot.com/video/33399974?key=4be25546c05dc357f0822cc86529b521

3

Hi @Ked

You can achieve the same popup layout by adding this CSS
Go to Shopify Admin > Themes > Edit code
Find base.css or theme.css

past that CSS code their

.m-product-card__media .m-product-card__action { transform: unset !important; opacity: 0; }
.m-product-card__media button.m-add-to-cart { background: #ffffff99; border: 1px solid black; box-shadow: none !important; color: black; }
.m-product-card__media button.m-add-to-cart:hover { background: white; }
.m-product-card__media:hover .m-product-card__action { opacity: 1; transition: all var(--m-duration-default, .25s) ease; }

If This Solution Word Kindly Like this And Mark it as a Solution or Buy Me a Coffee