Solved

Can I alter the color of price and sales price in Shopify Impulse theme?

Famby
Tourist
11 0 2

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

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an 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;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 81 (81)

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @Famby 

Thanks for post.

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Famby
Tourist
11 0 2

Hi thanks for responding. Site: famby.nl

Famby
Tourist
11 0 2

Can you please help?

KetanKumar
Shopify Partner
36839 3635 11972

This is an 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;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Famby
Tourist
11 0 2

Thanks brother, you helped me a lot!

KristyC721
Tourist
6 0 2

@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
Shopify Partner
36839 3635 11972

@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.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KristyC721
Tourist
6 0 2

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 ExampleCurrent Live Sale Price ExampleThis is an example of how i want sale price to look insteadThis is an example of how i want sale price to look instead

KetanKumar
Shopify Partner
36839 3635 11972

@KristyC721 

Thanks for post

can you please share 

this page url so i will check and provide proper solution

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KristyC721
Tourist
6 0 2

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
Shopify Partner
36839 3635 11972

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
kristen1106
Tourist
4 0 1

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
Shopify Partner
36839 3635 11972

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
kristen1106
Tourist
4 0 1
Thank you.
Here is the URL: https://mutigfashion.com/
KetanKumar
Shopify Partner
36839 3635 11972

@kristen1106 

Thanks which price do you have change colors

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
kristen1106
Tourist
4 0 1

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
Shopify Partner
36839 3635 11972

@kristen1106 

Yes, is possible to custamization 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
kristen1106
Tourist
4 0 1

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

LittlesunshineN
Visitor
2 0 0

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
Excursionist
14 0 6

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

How do i change Actual Price & Selling Price.

KetanKumar
Shopify Partner
36839 3635 11972

@Starin 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Starin
Excursionist
14 0 6

IMG_4379.jpg

 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
Shopify Partner
36839 3635 11972

@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;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Starin
Excursionist
14 0 6

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

KetanKumar
Shopify Partner
36839 3635 11972

@Starin 

oh, yes please add this code  also 

.grid-product__price--original {color: #ccc;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

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
Shopify Partner
36839 3635 11972

@MaxCosta 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

@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
Shopify Partner
246 2 59

@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
Shopify Partner
36839 3635 11972

@MaxCosta 

Yes add this code

.grid-product__price {color: #EA731C;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

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

Sans titre22.png

 

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

 

Sans titre.png

KetanKumar
Shopify Partner
36839 3635 11972

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

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

MaxCosta
Shopify Partner
246 2 59

@KetanKumarcan you confirm you receipt my private message?

MaxCosta
Shopify Partner
246 2 59

@KetanKumarplease do you have any idea of a solution ?

KetanKumar
Shopify Partner
36839 3635 11972

@MaxCosta 

got it 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Shopify Partner
246 2 59

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
Shopify Partner
36839 3635 11972

@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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Starin
Excursionist
14 0 6

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
Shopify Partner
36839 3635 11972

@Starin 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Starin
Excursionist
14 0 6

What custom code?

KetanKumar
Shopify Partner
36839 3635 11972

@Starin 

change zoom js code magnify code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Starin
Excursionist
14 0 6

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

KetanKumar
Shopify Partner
36839 3635 11972

@Starin 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
tajbowness
Shopify Partner
5 0 3

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.Screen Shot 2021-11-12 at 12.49.43 pm.png

Starin
Excursionist
14 0 6

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
Shopify Partner
246 2 59

@Starinthank you I have to use this color :

#EA731C

it's orange on blank

normally it's good (maybe use bold?)

Starin
Excursionist
14 0 6

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

valeria_shadi
Tourist
6 0 3

Hello, I have the same issue with the theme Prestige.

In the Product grid, how can I make the Original price and the Sale price with two different colors? (es. Green and Red)

 

LIKE THIS

€ 400,00 € 200,00

Hope to get some help very soon! thank you