Dawn Theme - How to center price in product page ?

Store Design

Topic summary

Goal: center only the product title, subtitle, and price on the product page in Shopify’s Dawn theme (v2.0), without affecting other elements or collection pages.

Key steps and fixes:

  • Initial CSS changes (text-align:center, align-items:center) in component-price.css didn’t center the price.
  • Adding CSS in Assets > base.scss.liquid to target title, subtitle, and price worked after using !important on the price rule.
  • Side effect: the price became centered on collection pages. The fix was to scope the CSS to the product page container (using a specific #ProductInfo-template… selector) and avoid globally targeting .price dl.

Recent update (for Dawn v15+):

  • Alternative CSS: .product__price, .price { text-align: center !important; display: block; margin: 0 auto; } to ensure proper centering in newer theme versions.

Notes:

  • CSS selectors and !important are key technical terms (CSS rules and priority overriding).
  • Screenshots were shared but not essential to the solution.

Outcome: The product-page price centering was achieved; additional guidance provided to prevent collection-page impact and for newer Dawn versions. Discussion appears resolved.

Summarized with AI on December 15. AI used: gpt-5.
1

Hello,

I have been trying to center the price in product page in Dawn Theme but I didn’t find a way.

I was able to center the Product Title and subtitle (in section-main-product.css).

I tried to center the price in component-price.css.

I tried both :

  • text-align: center

  • align-items: center; (instead of flex-start)

Do you have any idea please ?

More information:

  • I don’t want to center everything (description, etc…). I only want to center product title, subtitle and price.

  • I use the Dawn theme 2.0. I didn’t upgrade since I made a lot of in-code edits

Here below a snapshot of the code html code of the product page.

Thanks for your help !

Capture d’écran 2022-05-05 à 19.23.46.png
Capture d’écran 2022-05-05 à 19.23.46.png444×420 11.9 KB

Capture d’écran 2022-05-05 à 19.28.11.png
Capture d’écran 2022-05-05 à 19.28.11.png1380×630 129 KB

2

@Amal_djebali ,

Welcome to the Shopify Community! Please share your store URL, so that I can check your issue and will back to you with a proper solution. Have a Good Day!..

1 Like
3

Hello @oscprofessional ,

Thank you for your answer.

Here is a link for the product page: https://pohesia.com/products/boucles-oreilles-pendentif-poire-tuileries-dore

Have a good day,

4

@Amal_djebali ,

.product__info-container h1.product__title, p.product__text, .price.price--large, .price dl {
    text-align: center;
    margin: 0 auto;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

2 Likes
5

@oscprofessional

Thanks for your quick answer.

I just tried. Everything was centered but not the price.

See below a snapshot.

I will keep the code you propose for few minutes, so you can check it Live.

Amal_djebali_0-1651826319126.png
Amal_djebali_0-1651826319126.png1142×1074 76 KB

Thank you!

6

@oscprofessional

I just added !important.

And it works perfectly !

Thanks a lot for the solution.

7

@Amal_djebali ,

Okay!

If my post is useful then please like my all post!

also ask further help.

Visit our Website for more details : oscprofessionals.com

1 Like
8

@oscprofessional

I just have one issue now.

The price is also centred in the collection page.

Can I get it back to align:right and still keep it centred in the product page?

Thanks again!

9

@Amal_djebali ,

Update this css please

.product__info-container h1.product__title, p.product__text, .price.price--large {
    text-align: center;
}

And add tis css pls

#ProductInfo-template--15012729094255__main .price dl {
    margin: 0 auto;
}
1 Like
10

This should works on Dawn 15 and upper:
Add this code to bottom of css file:
/* Centering the product price /
.product__price, .price {
text-align: center !important; / Centers the price /
display: block; / Ensures it takes full width /
margin: 0 auto; / Centers the block */
}