Hello:
I would like the at compared price sections on my shopify page to mirror the picture. How can I do this?
Topic summary
A user seeks to reposition the “compare at price” (original price) and sale price on their Shopify product page, wanting the original price to appear on the left and the sale price on the right, opposite of the default layout.
Solutions Provided:
- suyash1 offers CSS code to swap the price positions using flexbox order properties in the base.css file
- The user also wants to display a “30% off” discount label
- suyash1 notes this requires custom coding and offers to implement it via collaborator access if the user sends their email
- LizHoang provides an alternative CSS solution through Shopify’s Custom CSS settings, including styling for the discount badge with a light blue border and white background
Current Status:
The discussion remains open. The original poster confirmed they are not familiar with coding, so implementation likely depends on accepting external help or using one of the provided CSS snippets.
@bnbrown88 - you want to switch price places? if yes then please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css
.price--on-sale .price__sale {display: flex;}
span.price-item.price-item--sale.price-item--last{order: -1;}
I also want to display 30% off
@bnbrown88 - it will need code editing, are you familiar with coding?
No.
I am not
@bnbrown88 - if you can send me collab code on my email below, then I can send request and can do it on your website
Hi @bnbrown88
You can follow the instruction here :
-
Go to Shopify > Online store > theme > customize
-
Click to Settings > Custom CSS > Paste this code to the section and save.
s.price-item.price-item--regular {
font-size: 1.8rem !important;
}
span.price-item.price-item--sale.price-item--last + span.off {
background: white;
color: black;
border: 2px solid lightblue;
border-radius: 6px;
}
Here is the result :
