Get the prices to stack on top instead of side by side

Topic summary

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:

  • Add CSS code to the base.css file that forces prices to display as block elements, making them stack vertically
  • Alternatively, insert a <br> tag in the product template file after the “Compare At” price section

Outcome:
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.

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

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 :victory_hand:t2: :smiling_face:

  • :victory_hand:t2:

@Sebastian2630

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 :slightly_smiling_face:

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 :victory_hand:t2: :sun_with_face:

1 Like

no problem don’t hesitate to reach out me if you still not able to do this.

thanks

thanks alot mate worked ! :slightly_smiling_face:

1 Like