How to alter price and sales color on Impulse theme?

[Famby]

Hello, my current price and sales price colors are both the same, and I would like to create a distinction between the two. I understand it has to deal with the code, how can I change the current price to black, and sales price to red?

Theme: Impulse

[KetanKumar]

Hello, @Famby 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

[Famby]

Hi thanks for responding. Site: famby.nl

[Famby]

Can you please help?

[KetanKumar · Accepted solution]

@Famby 

Thanks for URL.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.grid-product__price {
color: #ff0000;
}
.grid-product__price--original {
color: #000;
}

[Famby]

Thanks brother, you helped me a lot!

[KristyC721]

@KetanKumar  I am also using the theme Impulse by Archetype and had the same issue we want resolved. I added the code you suggested and it worked but it ended up "also changing" my regular priced items (non-sale items) to be red as well and we want them to remain their original black color. 

I don't want any of my products not on sale to be affected by these code changes.

End goal is to have: Regular non-sale products have price that remains original black color and current sale items have the strike through price in grey with new sale price in red.

Let me know if you have a solution. Thank you in advance for your time, I appreciate any help I can get. 

[KetanKumar]

@KristyC721 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[KristyC721]

Thanks @KetanKumar 

My site URL is www.kkgivingtree.com

I'm going to upload 2 images below. One showing my current sale price layout and then the next one showing an example of the layout I want instead. I prefer the strike-through price to be grey and show sale price in red with "now (sale price)". Let me know if possible, thanks!!

Current Live Sale Price ExampleThis is an example of how i want sale price to look instead

[KetanKumar]

@KristyC721 

Thanks for post

can you please share 

this page url so i will check and provide proper solution

[KristyC721]

Sure @KetanKumar !

Our "clearance sale" page with that example from the picture I sent is here: https://www.kkgivingtree.com/collections/clearance-sale and the item from the picture will be the 6th item on that page but "all" items on that page are perfect examples.

Also, please note that the example in picture was from the "collection page" layout but the issue also affects the price layout on the individual product pages as well, as shown here: https://www.kkgivingtree.com/collections/clearance-sale/products/merrymaker-top-bloomer-set

[KetanKumar]

Hello, @KristyC721 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

[kristen1106]

Hi @KetanKumar , I'm using the impulse theme as well, and having the same issue about the sale price and original price's colour. 

The non-sale prices' colour will be changed to red at the same time if  I used the code you provided up there. 

My purpose is:  sale products -> original price keep black colour, sale price is changed to red colour

                         non-sale products -> no colour change on price, keep black

Could you please provide me any help that can solve this problem. Thank you so much. 

[KetanKumar]

Hello, @kristen1106 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[kristen1106]

Thank you.
Here is the URL: https://mutigfashion.com/

[KetanKumar]

@kristen1106 

Thanks which price do you have change colors

[kristen1106]

I need to change all on SALE products' price. As the above codes affects my other non-sale products' price, I have change the color back to default. 

[KetanKumar]

@kristen1106 

Yes, is possible to custamization 

[kristen1106]

That would be great! Could you please send me some customise code can solve this problem?

[LittlesunshineN]

Hi there I managed to change the colour on the collection section but I cant make it work in the product page. 

I need to make the sale price bolder and using #EE6B7A

Could you help me?

www.littlesunshinenoosa.com.au

[Starin]

Same problem. Url: https://starin.in/collections/dresses-jumpsuit/products/old-rose-romper 

How do i change Actual Price & Selling Price.

[KetanKumar]

@Starin 

if possible to share your idea how do you have like?

[Starin]

 I want the actual price color to be bit lighter then selling price. And can we remove 'save' from 'save 30%' . i just want it be only '30%'

[KetanKumar]

@Starin 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product__price--compare {color: #ccc;}

[Starin]

But it didn't change on  https://starin.in/collections/all 

[KetanKumar]

@Starin 

oh, yes please add this code  also 

.grid-product__price--original {color: #ccc;}

[MaxCosta]

Hello everybody!

Same problem, I added this code to theme.css :

.grid-product__price {
color: #EA731C;
}
.grid-product__price--original {
color: #EA731C;
}

Unfortunately, it doesn't work for me. The color of the prices remains unchanged.

My website : https://a852kxbbwvis7di3-47455862950.shopifypreview.com

Thank you in advance

[KetanKumar]

@MaxCosta 

sorry, i can't see the sale product on the collection page and product page how can i guide you?

[MaxCosta]

@KetanKumar Thank you for your answer. Yes, because I do not want to apply the color for a reduction but for the displayed price.

Exactly like on this site: https://www.eliou-eliou.com/

[MaxCosta]

@KetanKumar The color of the displayed price works on mobile! but on computer it shows me the price in black 

thank you in advance

[KetanKumar]

@MaxCosta 

Yes add this code

.grid-product__price {color: #EA731C;}

[MaxCosta]

@KetanKumar I don't understand why, but the color has changed on mobile:

but look, on dekstop it always appears in black ...

[KetanKumar]

@MaxCosta 

oh i think something is wrong if possible to add me staff so i will check this all code if confident details so pleas sent pm

[MaxCosta]

@KetanKumar I have already sent you all the login details by private message 🙂 

[MaxCosta]

@KetanKumarcan you confirm you receipt my private message?

[MaxCosta]

@KetanKumarplease do you have any idea of a solution ?

[KetanKumar]

@MaxCosta 

got it 

yes i have checked all code  your add wrong code can you please closed file so i will checked update

[MaxCosta]

I was able to solve several problems. I only have 1 or 2 things left to do. What do you mean by closing the file?

[KetanKumar]

@MaxCosta 

yes please add this code for the menu issue

.site-nav--has-dropdown.is-focused>a, .site-nav--has-dropdown:hover>a, 
.site-nav__dropdown, .site-nav__dropdown a {
    background: transparent !important;
}

[Starin]

Not able to open the product image. If i try to click on that “zoom in icon” it doesn’t open up the image and instead zoom in too much.

Here’s the link to the page:https://starin.in/products/beige-floral-dress

Here’s how i want it to be done:https://www.clozila.com/collections/tops/products/iri2-st1335-id-53032

[KetanKumar]

@Starin 

thanks for update i have check it can done some custom code 

[Starin]

What custom code?

[KetanKumar]

@Starin 

change zoom js code magnify code 

[Starin]

Can you help me out on this? What code is it?

[KetanKumar]

@Starin 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

[tajbowness]

Hey! I see your still active on this thread and I was hoping you'd be able to help me as well, I'm using a Shopify theme forest store template which isn't made by shopify so the solutions you provided don't work with my template. I can no longer contact support from the creators of the template, so i'm stuck. The color of the price currently is red and I'd like it to be black, I'll provide an image below.

[Starin]

Can you please use any other colour code which is little bit darker thn this because the one i used is nearly invisible on website. Thank You

[MaxCosta]

@Starinthank you I have to use this color :

#EA731C

it's orange on blank

normally it's good (maybe use bold?)

[Starin]

Not able to open the product image. If i try to click on that “zoom in icon” it doesn’t open up the image and instead zoom in too much.

Here’s the link to the page:https://starin.in/products/beige-floral-dress

Here’s how i want it to be done:https://www.clozila.com/collections/tops/products/iri2-st1335-id-53032

[Vale4]

Hi, I have tried this and I don't have the section /theme.scss.liquid   , i have the diamond vip pets theme and even tho I put the color changing code in the theme.liquid and component-price.css, my prices remain yellow, how do I fix it?

https://kumapaws.com/

In need the regular price