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

Store Design
,
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;
}