Prestige Theme: Change price color and sale badge color

[rougeon]

Hello,

I am trying to change the color of the product price in the collection pages. I found how to do it in the theme elements with the "body light text", however it changes also a lot of other text element such as text in the cart.

How can I change only the product price color?

Also, how can I change the sale badge color?

Thanks,

Melanie

[oscprofessional]

Hello @rougeon,

Please share your site url so that I will give you exact solution

[rougeon]

Dear @oscprofessional,

The site url is: https://ateliercomplice.myshopify.com/

Thanks!

[oscprofessional · Accepted solution]

@rougeon,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

.template-collection .ProductItem__PriceList.Heading span:not(.Price--highlight) {
	color: green;
}
.template-collection .ProductItem__Label.ProductItem__Label--onSale.Heading.Text--subdued {
	color: red;
}

Note:Please change color as per your requirement

[rougeon]

Thank you @oscprofessional! This worked perfectly!

[manhuynguyen]

Hi, I did the same thing but nothing happen. I'm using v4.5.5. Please help.

[oscprofessional]

Hello @manhuynguyen,

Can you please share your site url?

[manhuynguyen]

http://horad.co/ here it is. access password: 130196

[oscprofessional]

@manhuynguyen,

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

span.ProductItem__Label.Heading.Text--subdued {
    color: red;
}

[manhuynguyen]

@oscprofessional  thank you very much. it changes the color of the word "On sale". Can you also give code to change background of the "On sale" badge?

[oscprofessional]

@manhuynguyen,

Please add below css

span.ProductItem__Label.Heading.Text--subdued {
    background: black;
}

Note:You can change color as per your requirement

[manhuynguyen]

It works perfectly. Thank you very much @oscprofessional

[offcode]

Please help

[manhuynguyen]

@oscprofessional Hi, can you please give some inputs on this. I'd really appreciate it.

[offcode]

Hi. I’m trying to I change the color of the sale box on my theme. I tried the first solution mentioned at the top of this post but it didn’t work. I have the prestige theme

[oscprofessional]

Hello @offcode,

Can you please give me your site url so that I can check

[offcode]

Offcodecompany.com

[offcode]

@oscprofessional 

www.offcodecompany.com

[oscprofessional]

Hello @offcode,

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

span.ProductItem__Label.Heading.Text--subdued {
    color: white;
    background-color: red;

Note:You can change color as per your requirement. 

[Nowaz]

My Dera can You also help me. Currenty my sale tag is round and my product price colour is same as product title. I want to change the sale tag shape and product price colour. 

My theme : BROOKLYN (VERSION 16.0.8)
my website : https://kick6251.myshopify.com/
pass - rottow

I want to make this exactly same as this photo. Please help me.

[markrob]

This works great! Is there also a way to change the font color of my product title on the collection page only? Thanks!

[oscprofessional]

Hello markrob,
Please share your site url.
So that I can check and let you know the exact solution here.

[evestones]

Hello
I want to change the price color in my website but above solution is not working can you please help
https://evestones.com/

[meatking]

It works perfectly! 

How can we differentiate the badges between "on sale" and "sold out"? as both badges in same color with your provided code.

Thank you so much!

[BaberKhan]

How do I change the color of other labels i.e., items that are not sale but are new to the store? For example I have the __label:New added for new products.

[Zoubidou75]

Hey There thanks for your answer, 

Do you know how can we reduce the size of it please ? 
Thanks a lot.

[oscprofessional]

@Zoubidou75 ,

please share the screenshot and url.....

[Zoubidou75]

Thanks !

URL : Archivded

[oscprofessional]

@Zoubidou75 ,

Screenshot not visible 

[Zoubidou75]

Oops soory 

[oscprofessional]

@Zoubidou75 

span.ProductItem__Label.ProductItem__Label--onSale.Heading.Text--subdued {
    font-size: 9px;
    padding: 2px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

[Zoubidou75]

Perfect many thanks

[oscprofessional]

@Zoubidou75 .

Your most welcome.

Please accept the solution

[Zoubidou75]

Sorry im new here, How can i accept Solution please ? 

[leclercco]

Hello, I am trying to change me SALE heading at the top of my main sreen to red (it's currently black)

I can't seen to have any luck following the other posts. My URL is: https://www.leclercco.com/

Thank you!

Brenda

[offcode]

Hello,

Please help. We have the same

issue, we want to change the color of the sale box to red and white font. 

we tried the above solution and it didn’t work. Error message it couldn’t be saved

[aphro_inc]

@oscprofessional Hello, I'm trying to have the sale price be shown on website but it's not working. I tried copying the code as well that was posted in this thread.

I would like the sale price be shown in color red, and have the original price strikeout.

Is there something that I'm missing? I appreciate the feedback.

Here is my website: https://aphrodisiacinc.us/

[oscprofessional]

Hi @aphro_inc ,

share the product which is having sale price.

[tinaynica]

Hello, I have a problem with the flash tag, i want it to appear only in special prices products, because now only appears in home page, and in all the product i put in home page. 

my website it https://tinaynica.com/

password is prohsa

[oscprofessional]

Hi @tinaynica 

add tag in special products then check it on front end product page

[tinaynica]

I allready did that, but what i want is the "flash" badge ONLY appears in the product that have the label "special Prices"

[KrishiBoo]

Hello Rougen,

Your store theme looks minimal and classy. You probably like neat and eye-catching designs for your store. You can make badges to match with the vibe of your store with a few clicks. 

You can make your custom badges with ModeMagic within minutes, in any color or shape you want. It’ll take you just a few minutes to design a badge the way you like, that too in French, German, Spanish, and English.

ModeMagic is a simple app to make and add badges to your Shopify store. With a few clicks, you can design a badge to match your needs. You can even upload your own badges on ModeMagic to add to your store.

It’s easy to automate stock labelling on your products with the badges you choose. You don’t need to hustle to keep your store updated anymore. 

Give it a spin for free. Try it out for 14 days. You may end up liking it!