How can I add a border to the add-to-cart button on hover?

[MaBa]

Hi community,

I would like to visualize a border around the add-to-cart button of the hero collection on hover.

Add-to-cart buttons of both Product page (PDP) and all products page (PHP) have this behaviour and I dont know how to replicate it to the main collection.

My website is www.womanly.se

Thanks a lot.

[GemPages · Accepted solution]

Hello @MaBa 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you:

1. Go to Online Store -> Theme -> Edit code:

2. Open your theme.liquid theme file

3. Paste the below code before </body>:

<style>
    ul.product-grid .quick-add__submit:hover::after{
      --border-offset: 1.3px;
      box-shadow: #f37fb9 0px 0px 0px 2.3px, red 0px 0px 0px 2px 
        !important;
    }
</style>

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.