Dawn Theme How to Center "Compare At Price" on webpage

Technical Q&A

Topic summary

A user seeks help centering the “Compare At Price” element on their Shopify store using the Dawn theme. They provide a screenshot showing the current misaligned pricing display.

Solutions Provided:

Multiple respondents offer the same CSS fix:

  • Navigate to: Online Store → Themes → Actions → Edit Code → Assets → base.css
  • Add the following CSS code at the bottom:
.price.price--on-sale .price__sale {
  justify-content: center !important;
}

The solution targets the sale price container and uses flexbox alignment to center the compare-at-price element. One respondent confirms the fix worked successfully.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.price.price--on-sale .price__sale {
justify-content: center;
}

Screenshot :- https://prnt.sc/q6Sx-Ay7464o

1 Like