Prestige Theme: Change price color and sale badge color

Store Design
1

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?

Capture d’écran 2020-02-25 à 12.47.25.png
Capture d’écran 2020-02-25 à 12.47.25.png2290×1154 183 KB

Thanks,

Melanie

2

Hello @rougeon ,

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

1 Like
3

Dear @oscprofessional ,

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

Thanks!

1 Like
4

@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

1 Like
5

Thank you @oscprofessional ! This worked perfectly!

1 Like
6

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

1 Like
7

Hello @manhuynguyen ,

Can you please share your site url?

1 Like
8

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

1 Like
9

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

1 Like
10

Please help

1 Like
11

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

1 Like
12

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

1 Like
13

@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;
}
2 Likes
14

Hello @offcode ,

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

1 Like
15

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

1 Like
16

@manhuynguyen ,

Please add below css

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

Note:You can change color as per your requirement

2 Likes
17

It works perfectly. Thank you very much @oscprofessional

1 Like
18
1 Like
19

@oscprofessional

www.offcodecompany.com

1 Like
20

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.

1 Like