Colour and highlight sales with % discount - Pipeline theme

[manekakknowle]

Hi there can someone assist please. I am using the pipeline theme and I would like to highlight the discount sale prices and % saved on my homepage and product page of the website. Like so:

how can I do this?

[Rahul_dhiman]

HEllo @manekakknowle
Go to online store ---------> themes --------------> actions ------> edit code-------> theme.CSS -------> line number 18315
and search this code

.product__badge {
    font-family: var(--FONT-STACK-ACCENT);
    font-style: var(--FONT-STYLE-ACCENT);
    font-weight: var(--FONT-WEIGHT-ACCENT);
    font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
    text-transform: var(--FONT-ACCENT-TRANSFORM);
    letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
    font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
    line-height: var(--leading-relaxed);
    position: absolute;
    right: calc(var(--inner) / 2);
    top: calc(var(--inner) / 2);
    max-width: calc(100% - var(--inner));
    padding: 5px 10px;
    background: var(--COLOR-BADGE);
    color: var(--COLOR-BADGE-TEXT);
    z-index: 400;
    transition: opacity .5s cubic-bezier(.215,.61,.355,1);
}

and replace with this

.product__badge {
    font-family: var(--FONT-STACK-ACCENT);
    font-style: var(--FONT-STYLE-ACCENT);
    font-weight: var(--FONT-WEIGHT-ACCENT);
    font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
    text-transform: var(--FONT-ACCENT-TRANSFORM);
    letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
    font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
    line-height: var(--leading-relaxed);
    position: absolute;
    right: calc(var(--inner) / 2);
    top: calc(var(--inner) / 2);
    max-width: calc(100% - var(--inner));
    padding: 5px 10px;
    background: #db3636;
    color: #ffffff;
    z-index: 400;
    transition: opacity .5s cubic-bezier(.215,.61,.355,1);
}

If this was helpful, hit the like button and mark the job as completed.
Thanks

[manekakknowle]

Thank you Rahul! Product badge does not come on that line, see below:

[manekakknowle]

Also the hex code to highlight the discount is this: #C31942

[manekakknowle]

ok I found it -its line 19825

[manekakknowle]

It is just highlighting the ‘sold out’ what about the discount - you can see the discounted price is still black.

[Rahul_dhiman]

please provide me the URL of youe website.so that i can check.

[manekakknowle]

https://yves-rocher.co.ke

[oswenkoln]

was it resolved?

[oswenkoln]

I am also trying to do this.

[oswenkoln]

did you find a solution?