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

Store Design
, ,

Topic summary

A user wants to add a hover border effect to add-to-cart buttons in their hero collection section. They note that product detail pages (PDP) already have this behavior but need help replicating it for the main collection.

Proposed Solution:
GemPages support team provided step-by-step instructions:

  • Navigate to Online Store → Theme → Edit code
  • Open the theme.liquid file
  • Insert custom CSS/markup code before the closing </body> tag

The response included a screenshot reference and code snippet (text appears reversed/encoded in the original post).

Follow-up Question:
Another user (Ced74) asked how to apply the same effect to “buy now” buttons, indicating broader interest in this customization technique.

The discussion remains open with the follow-up question unanswered.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

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.

2

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:

GemPages_0-1669618959296.png
GemPages_0-1669618959296.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before :

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

3

How can I do this for just my buy now buttons?