Hello need help with changing the collection sale price color to red on IMPULSE THEME

Store Design
1

Hello need help with changing the collection sale price color to red on IMPULSE THEME

2

Just put the following at the end of the theme.css file.

.grid-product__price {

color:red;

}

Note: you can change the text “red” to any color code as well.

3

aezir_0-1652452847808.png
aezir_0-1652452847808.png421Ă—205 2.53 KB

Bro it does not work

4

can you share your store url so and screenshot as well where you need to change the color to red? if store has frontend password, lease share password as well or disable password.

5

https://bbabilon.com/

aezir_0-1652453477821.png
aezir_0-1652453477821.png1630Ă—789 44.5 KB

6

First of all undo the changes you made because there is some syntax error in that code.
and after that just paste the exact code from below to your theme.css.liquid at the end of the file. It should work fine now.

div.grid-product__meta > div.grid-product__price > span.money {
color: red;
}

7

No idea how to undo or get the file back to original

8

Just remove this line of code.

Artzen_tech_0-1652454213460.png
Artzen_tech_0-1652454213460.png803Ă—367 5.03 KB

9

Okay the collection sale price is red, help me now to get back the product sale price in red

10

For the product page to make the sale price red you need to put the below code at end of the file.

span.product__price.on-sale > span {
color: red;
}

Note: You can make these color changes from the customize section as well, but if you don’t know how to do this then making changes in code is fine.

11

Thank you for your help, it worked. Tried to change the colors from the customize section, when I did that the theme change compare at price and sale price in the chosen color, can’t understand why such a expensive theme doesn’t have this setting.

aezir_0-1652455067869.png
aezir_0-1652455067869.png328Ă—670 22.9 KB

12

You’re welcome!!

it’s ok if the theme doesn’t have this, you are able to achieve it with code. But if you want this option in the customize section you can either hire a developer or ask the theme support about this.

13

Hello, it’s me again, how to make the headline with small words on product and collection page, there is no option in customize settings.

aezir_0-1652461305393.png
aezir_0-1652461305393.png961Ă—400 17.7 KB

14

There must be an option in the customize for this, but if there is not. then you can use the following code. Add this code in the same file at the bottom where you have added the above code.

/* For product page heading */

h1.h2.product-single__title {
font-size: 15px;
}

/* for collection page each product heading */

.grid-product__title.grid-product__title–body {
font-size: 15px;
}

Note: you can change the number in font size to make the size what you want.

15

My idea is the words to not be with capital letters

16

To make all letters small use the following.

/* For product page heading */

h1.h2.product-single__title {
text-transform: lowercase;
}

/* for collection page each product heading */

.grid-product__title.grid-product__title–body {
text-transform: lowercase;
}

To make first letter capital and rest small of a word use the following.

/* For product page heading */

h1.h2.product-single__title {
text-transform: capitalize;
}

/* for collection page each product heading */

.grid-product__title.grid-product__title–body {
text-transform: capitalize;
}

17

Thanks !!!