Is it possible to get the prices to stack on top of eachother on picture 2 like on picture 1.
Picture 1 is before you click on the product.
Thanks for the help
![]()
A user wants to change the price display layout on their product pages so that the original and sale prices stack vertically (as shown on collection pages) instead of appearing side by side.
Solution Provided:
Two approaches were suggested:
base.css file that forces prices to display as block elements, making them stack vertically<br> tag in the product template file after the “Compare At” price sectionOutcome:
The CSS solution was implemented successfully. The user confirmed it worked after applying the provided code snippet to their theme’s base.css file.
Screenshots were shared showing the before/after states, demonstrating the desired vertical price stacking effect.
Is it possible to get the prices to stack on top of eachother on picture 2 like on picture 1.
Picture 1 is before you click on the product.
Thanks for the help
![]()
this can be done by adding the below CSS code into your base.css file
Online Store > Edit Code > Assets > base.css file paste it at the end
.price--on-sale .price__sale > span + span {
display: block !important;
}
Result:
Yes, it’s fairly straightforward if you know how to edit the theme code. You should just need to add a
tag after the “Compare At” section in Sections > product_template.liquid. The exact steps will depend on the theme you are using and the structure of the pages and code within that theme.
Is it possible to make it look like the first picture so it looks like this
499,00 dkk
399,00 dkk
Like the first picture i postet thanks alot ![]()
it is shown same like you are asking to do. see my attached screenshot
Oh thanks i see iam on the phone atm. On the way home ill try when i get there and update you right away thanks alot for the help
![]()
no problem don’t hesitate to reach out me if you still not able to do this.
thanks
thanks alot mate worked ! ![]()