Hi everyone
How to price move to next line below
Thanks
Topic summary
Main issue: Make the sale price appear on a new line under the original price on Shopify.
What was done:
- In Shopify Admin > Online store > Themes > Actions > Edit code, the Assets/base.css file was edited.
- A CSS rule was added to set the sale price container to display: grid (a layout mode that stacks items on separate lines), which fixed the Product page.
- A second CSS rule targeting collection listings was added to apply the same display: grid behavior, fixing the Collections page as well.
Key snippets (conceptually):
- Target the sale price element (.price__sale) within the product page container and set display: grid !important.
- Target the sale price on collection cards (.price.price–on-sale .price__sale) and set display: grid !important.
Outcomes:
- Original poster confirmed both Product and Collections pages now work.
- Another user reported the same steps solved their issue.
Current status / open item:
- A new participant wants both the new price and the % off moved to a new line (shared preview link and screenshot). No solution provided yet; guidance pending.
Notes:
- Screenshots were used to illustrate the layout and code location.
1 Like
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here.
Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset >base.css and paste this at the bottom of the file:
.product__info-wrapper.grid__item .price__sale {
display: grid!important;
}
Hi ZestardTech
The products page is working now.
But Collections page not working.
How can it work on Collections page?
Thank you very much
1 Like
Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset >base.css and paste this at the bottom of the file:
.price.price--on-sale .price__sale {
display: grid!important;
}
Hi ZestardTech
This question has been resolved.
Products page and Collections page both working now.
Appreciate 
1 Like
Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
1 Like
I wanted the same thing too, so I followed these steps:
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset >base.css and paste this at the bottom of the file:
and my concern was solved.
1 Like
Hi .@MZinger
I’m glad your concern was solved.
Because same question can refer to same step.
Appreciate
Hello, I have a very similar issue, but instead I want to move both the new price and the %off in a new line (store:https://qexaaphhkuw678c4-78669414739.shopifypreview.com 
see picture below:
