Re: Price before compare price - Dawn

rielrielx · ‎12-15-2023

Hi all,

Could yall help me with the 2 type price placement please?

I would like to have my price above compare price : link

and price before compare price in the product page : link

Thank you for your help!

webwondersco · ‎12-15-2023

@rielrielx hope you are doing well. add the below line of CSS code at the end of your base.css file.

body .price--on-sale .price__sale{
display:inline-flex;
flex-direction: row-reverse;
}
body .price--on-sale .price-item--regular{
margin:0 0 0 1rem;
}

the output of the above code will look like the attachment.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip ☕ would be greatly appreciated. :)..! Instagram

View solution in original post

Dan-From-Ryviu · ‎12-15-2023

Go to your Online store > Themes > Edit code > open theme.liquid file, add this below code after <head> and save file

<style>
.price--on-sale .price__sale {
    display: flex !important;
    flex-direction: row-reverse !important;
}

</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

webwondersco · ‎12-15-2023

@rielrielx hope you are doing well. add the below line of CSS code at the end of your base.css file.

body .price--on-sale .price__sale{
display:inline-flex;
flex-direction: row-reverse;
}
body .price--on-sale .price-item--regular{
margin:0 0 0 1rem;
}

the output of the above code will look like the attachment.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip ☕ would be greatly appreciated. :)..! Instagram

Jun_Kuan · ‎12-15-2023

For price above compare price, line 77 of component-price.css

.price--on-sale .price__sale {
display: inline-block
}

to:

.price--on-sale .price__sale {

display: flex;

flex-direction: column-reverse;

}

you seem to have fixed the product page already but let me know if you still need help

niraj_patel · ‎12-15-2023

hello @Rielrielx

You can add code by following these steps to change ATC background color

1. Go to Online Store -> Theme -> Edit code.
2. Open your component-price.css file

3. For 1st issue paste this CSS below in component-price.css file

4. For 2nd issue firstly find the class name (.price--on-sale .price__sale) and paste this CSS below in same file ---> component-price.css file

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Re: Price before compare price - Dawn

How can I place the product price above the compare price in Dawn?

Community Blog Articles