Compare Price

Solved
dmwwebartisan
Shopify Partner
9136 2117 2885

@GlobalMarttec 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

#ProductSection-16325106332f71c56a .sale-tag {
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    padding: 0 8px;
    border-radius: 3px;
    vertical-align: text-bottom;
    color: red !important;
    border: 2px solid red !important;
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
GlobalMarttec
Tourist
10 0 1

@dmwwebartisan 

I tried your coding but that helped only turn the saving amount in red on the featured product on home page which is $32, as you see in the screenshot

GlobalMarttec_0-1632576241663.png

 

while the color remained grey in the product page :

GlobalMarttec_1-1632576283330.png

 

and i would like to have the compared price $62 in red color to be seen on both featured product on home page and the product page.

Regards

 

0 Likes
suyash1
Shopify Partner
3448 381 560

@GlobalMarttec - for product page use the following css 

.product-meta .sale-tag {
    position: relative;
    top: 2px;    display: inline-block;
    text-transform: uppercase;    font-size: 13px;
    font-weight: 700;    padding: 0 8px;
    border-radius: 3px;    vertical-align: text-bottom;
    color: red!important;    border: 2px solid red!important;
}

 

suyash1_0-1632588811633.png

 

 

 

 

Need training? I can train you to learn shopify.

You are welcome to contact me, my email - suyash.patankar@gmail.com
0 Likes
GlobalMarttec
Tourist
10 0 1

@suyash1 

I just copied the coding you provided but nothing changed than what is shown on the previous screenshots. 

0 Likes
suyash1
Shopify Partner
3448 381 560

@GlobalMarttec - product page showing red, it is changed

 

suyash1_0-1632632390785.png

 

Need training? I can train you to learn shopify.

You are welcome to contact me, my email - suyash.patankar@gmail.com
0 Likes
GlobalMarttec
Tourist
10 0 1

@suyash1 

I need the original price $62 to be in red color. That is my concern. Could it be done? Also i need the original price to be seen on the featured product page if it could be done as well.

0 Likes
suyash1
Shopify Partner
3448 381 560

This is an accepted solution.

@GlobalMarttec - add this css ,o to put original price on home page, we will need to edit the code for homepage section, it can be done

#productPrice-product-template small s{color: red !important;}

 

suyash1_0-1632634086097.png

 

 

Need training? I can train you to learn shopify.

You are welcome to contact me, my email - suyash.patankar@gmail.com
r8r
Shopify Expert
2094 245 714

This is an accepted solution.

@suyash1 You should avoid using !important for such trivial means.

And yeah, as I’ve mentioned, @GlobalMarttec, if you change the template (it’s really just a minor change), you can easily achieve what you want. I just don’t feel that this ping pong here is very efficient. You should give collaborator access fo an expert who can add the bit of code, that adds a class to your theme, depending on whether there’s a compare-to-price higher than the actual price set on the product. That way you can switch the colors in your CSS depending on whether that class is applied.

Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte