I would like to move the new price (red) under the old one, is this possible?
Thank you!
URL: https://suq5b8csct01fyzg-61270851797.shopifypreview.com/collections/rappid-test
Im using the Trade theme.
Topic summary
A user wants to reposition the sale price (displayed in red) to appear directly below the original price on their collection page, rather than beside it.
Solution Provided:
- Navigate to Online Store → Themes → Edit Code
- Locate the
component-price.cssfile in the assets folder - Add CSS code to change the price display from inline to block format
Issue & Resolution:
The initial CSS snippet successfully moved the price on the home page but failed on the collection page. A revised CSS rule with !important flag was provided to ensure the styling applies across both pages.
Technical Details:
The user is working with Shopify’s Trade theme and requires custom CSS to modify the product price layout on collection pages.
Try this
-
Go to ‘Online Store’ → Themes
-
From your active theme → click on the 3 dots (…) → Edit Code
-
Inside the assets folder , locate the file ‘component-price.css’
-
At the end of the file paste this code
.price-item.price-item--sale{
display: block;
}
1 Like
Thank you, it worked on my “home page” but not in the collection page, can you help me there?
Replace the code I gave you with this one
.price-item.price-item--sale.price-item--last{
display: block !important;
}
1 Like