How To Center Title, Vendor, Price, Size, Quantity, Cart and Description Text on Product Page (Dawn)

[WholesomeBoy]

I want to CENTER ALIGN all text and info/buttons on the product pages. It is currently all left aligned, which comes by default. I am currently using the Dawn 8.0.0 theme.

Someone please help. It's driving me crazy.

Thanks!

[Moeed]

Hey @WholesomeBoy 
Share your Store URL and Password if enabled

[WholesomeBoy]

Hey Moeed,

Version 8.0 (the one I’m currently working on) is not live on my site, because I’m still building it. I’m currently using the older version. So, It won’t be exactly the same, because I’ve successfully aligned some elements on my current site on my product page, but not all.

Website: https://www.wholesomeboy.co/

[PageFly-Richard · Accepted solution]

Hi @WholesomeBoy ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

.product__info-container,
.product__info-container .product__text ,
.product__info-container .product__title,
.product__info-container .price {
    text-align: center !important;
}
.product-form__input,
.product-form__input .quantity,
.product-form__buttons,
.share-button__button {
    margin: 0 auto !important;
}
.accordion .summary__title {
    justify-content: center !important;
}

I hope it would help you
Best regards,

Richard | PageFly

[WholesomeBoy]

Thank you, Richard! You're awesome!

[BeyzaNisa]

Hi Richard,

I just tried out your code and it worked great. With the new dawn update there is just one issue: The color swatch and share button are not centered yet (see picture). Can you help me with the correct code to fix this?

Thanks, 
Nisa