Switch 'Was Price' and 'New Price' Position in Dawn Theme so 'New Price' Comes First

Topic summary

Goal: Show the current (new) price before the compare-at (was) price across product and collection pages in Shopify’s Dawn theme.

Key steps and fixes:

  • Initial CSS suggestion targeting .price-list.price-list–centered didn’t change anything, partly due to edits being made on the live theme instead of the preview theme. A preview link was later shared to ensure changes apply to the correct theme.
  • Working approach: add CSS (in Theme settings > Custom CSS or theme.liquid) targeting the sale price container:
    • Desktop: .price.price–on-sale .price__sale { display: flex; flex-direction: row-reverse; gap: 10px; }
  • Mobile behavior: Side-by-side on small screens was discouraged due to limited space. A media query was provided to stack prices vertically and keep them centered:
    • @media (max-width: 768px) { .price.price–on-sale .price__sale { flex-direction: column-reverse; gap: 0; justify-content: center; } }

Outstanding issues:

  • On collection pages, the sale price block alignment remained right-aligned instead of centered; no definitive fix was posted.
  • Other members asked for the final solution; outcome not publicly confirmed.

Status: Partially resolved (order switch works); alignment/side-by-side on mobile remains open.

Summarized with AI on December 12. AI used: gpt-5.

Hey @babystore123 ,

I still don’t see it. Can you check if you added it on the correct theme?

Please also send me a screenshot of how you added it.