I want to show compare at price before regular price

Store Design
, , , ,

Topic summary

A user seeks to reorder product pricing display on their store, specifically wanting the compare-at (sale) price to appear before the regular price—a reversal of the default layout.

Current Status:

  • User has been searching for a solution for 3 months without success
  • Attached screenshot shows current product page design

Proposed Solutions:

  1. Liquid Template Approach (Guleria):

    • Locate the price.liquid file under theme snippets
    • Switch the position of the code elements directly in the template

  2. CSS Flexbox Method (PageFly-Richard):

    • Navigate to: Online Store → Theme → Edit code → Assets → base.css
    • Add CSS to reverse display order:
    .price__sale {
    display: flex !important;
    flex-direction: row !important;
}

Both solutions involve theme customization—one through template editing, the other through CSS styling. The discussion remains open with no confirmation of which approach the user implemented.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

I want to show compare at price before the regular price I have been searching for this for the last 3 months but I’m not able to get a proper solution. I can have attached an image of current design of my store product page

Screenshot_20230813_134508_Photo Editor.jpg
Screenshot_20230813_134508_Photo Editor.jpg658×1451 94.3 KB

2

Hello @swayurindia ,

Not sure what type of answer you are looking for.
It’s straightforward switch the code position.
You can find the code file price.liquid under snippets.

Thanks

3

Hi @swayurindia

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

.price__sale {
    display: flex !important;
    flex-direction: row !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly