How can I center the buy button on my ecommerce site?

Store Design
,

Topic summary

A store owner needs help centering their buy button, which is currently left-aligned on their product pages.

Proposed Solutions:
Multiple community members provided nearly identical CSS-based fixes:

  • Navigate to: Online Store → Themes → Edit code → Assets → base.css
  • Add the following CSS at the bottom of the file:
.product-form__buttons {
  margin: 0 auto;
}

Some responses suggested alternative approaches using flexbox:

.product-form__controls-group {
  display: flex;
  justify-content: center;
}

Status: The discussion remains open with no confirmation from the original poster about which solution worked. All suggested fixes target the same CSS file and element, differing only slightly in implementation approach.

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

Hello! My store has a left-aligned buy button, and I don’t know how to fix. I want it to be centered. Thanks in advance! My store is clubevince.com.

ClubEvince_0-1683158165735.png
ClubEvince_0-1683158165735.png400×243 89 KB

Bigger picture:

ClubEvince_1-1683158444895.png
ClubEvince_1-1683158444895.png1892×847 315 KB

2 Likes
2

Hi @ClubEvince ,

Please follow the instructions below.

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the base.css file
  3. At very end of the code, add the code below
product-form .product-form__buttons {
    margin: auto;
}
3

Hello @ClubEvince ,

You can try to follow these steps:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Sections → product-template.liquid file
  • Add the following CSS code:
.product-form__controls-group {
  display: flex;
  justify-content: center;
}
  • Save and preview

Hope this can help you out. Let us know if you need any further support.

Ali Reviews team.

4

You can solve it by adding CSS at the bottom of base.css file in store admin > Sale channels > Online store > Themes > Edit code > Assets >

.product-form__buttons { margin: 0 auto; }
5

Hi @ClubEvince

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:
.product-form__buttons {margin: 0 auto !important;}

Regards,

San

6

Hello @ClubEvince

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.product-form__buttons {
    margin: 0 auto;
}