How to swap the positions of these two prices?

Store Design
, ,

Topic summary

A user seeks to swap the display positions of two prices on their Shopify product page (original price and sale price).

Solutions Provided:

  • CSS-based approach: Add custom CSS to component-price.css using display: flex and flex-direction: row-reverse on the .price--on-sale .price__sale selector to reverse the price order.

  • Alternative method: Insert custom <style> code in theme.liquid file above the </body> tag.

Status: The original poster confirmed one solution worked successfully. Both approaches include visual examples showing the reversed price positions. The discussion appears resolved with working CSS solutions that don’t require theme-specific modifications.

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

How to swap the positions of these two prices?

PixPin_2025-01-12_15-42-00.png

1 Like
2

Hi @CRART - could you share which Shopify Theme you are using, and a link to your store? :slightly_smiling_face:

3

Hey @CRART

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1737007343689.png
Moeed_0-1737007343689.png472×566 17.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

sense,crartcase.com.thanks

5

thanks

1 Like
6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

7

Hello @CRART
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> component-price.css
add this code at the end of the file and save.

.price--on-sale .price__sale {
display: flex;
flex-direction: row-reverse;
}

result

147.png
147.png760×603 190 KB

If this was helpful, hit the like button and accept the solution.
Thanks