How to change position of buy button on products from collection page

Store Design
,

Topic summary

A user wants to reposition their “buy now” button to appear centered over product images on hover, rather than in its default location. They already implemented a basic hover effect that shows/hides the button.

Solution provided:

  • Add CSS positioning properties to center the button: position: absolute, top: 40%, left: 50%, and transform: translate(-50%, -40%)
  • This creates the desired centered overlay effect when hovering over product images

Additional request:
The user also asked how to change the button text itself, which can be modified through:

  • Store Admin → Sales Channels → Online Store → Themes → Edit Default Theme Content

Status: Resolved - the CSS solution successfully achieved the centered button positioning.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello

I am looking to change the position of the buy now button on my products. I already have a hover effect on it and wish for the button to be in the middle of the product image so when you hover over the product the buy button appears in the middle of the products image.

CAVinhus_0-1750667353429.png
CAVinhus_0-1750667353429.png1384×888 126 KB

The code I used for the hover effect is:

.product-card-wrapper .quick-add {
display: none; /* Hide button initially /
}
.product-card-wrapper:hover .quick-add {
display: block; / Show button on hover /
}
.product-card {
/ Other styles /
text-align: center; / Centers the button */
}

2

Hi @CAVinhus

Could you share the link to your page?

3

https://cavinhus.dk/

pass: auskay

4

Please update this code from this

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

To this

.product-card-wrapper:hover .quick-add {
    display: block;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 100%;
}
5

Thank you so much this worked! Do you also know how I changed the text on the button?

1 Like
6

You can change text from your store admin > Sales channels > Online Store > Themes > click “…” in Current theme > Edit default theme content, search and change that text.