I want to show sale price before regular price on whole website
Topic summary
A user wants to display the sale price before the regular price across their entire Shopify website.
Solutions Provided:
-
Dan-From-Ryviu suggested adding CSS code to the base.css file using flexbox (
flex-direction: row-reverse) to reverse the price display order. -
PageFly-Noah recommended inserting custom CSS code into the theme.liquid file above the
</head>tag, providing step-by-step instructions for accessing the theme code editor.
Issue & Resolution:
The user reported that the initial solution didn’t display properly on mobile view. PageFly-Noah provided updated code with reduced font size to fix the mobile display issue and shared a screenshot showing the corrected mobile appearance.
Status: The discussion appears resolved with the mobile-optimized CSS solution, though final confirmation from the user is pending.
Please add this CSS code at the bottom of your base.css file
.price--on-sale .price__sale {
display: inline-flex !important;
flex-direction: row-reverse !important;
}
.price-item--sale.price-item--last { margin-right: 4px !important; }
Hi @swayurindia
This is Noah from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Noah | PageFly
Are you sure about this code?
@swayurindia Yes please copy and follow my steps to add it.
It is not getting properly shown on mobile view.
Please help me to replace the code above with this code
on mobile i reduced the font size to make it show properly
Can you please share me preview/screenshot of how will it now look like on
mobile view?
