Compare Price

Solved
GlobalMarttec
Tourist
10 0 1

I am using the Supply Theme but the  compare price is not shown! It shows how much is saved instead! can anyone help please?

Replies 17 (17)
dmwwebartisan
Shopify Partner
9789 2229 3065

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

 

suyash1
Shopify Partner
3708 407 610

@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

 

 

 

 

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
GlobalMarttec
Tourist
10 0 1

@suyash1 

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

suyash1
Shopify Partner
3708 407 610

@GlobalMarttec - product page showing red, it is changed

 

suyash1_0-1632632390785.png

 

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
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.

suyash1
Shopify Partner
3708 407 610

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

 

 

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30

View solution in original post

r8r
Shopify Expert
2215 284 754

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

View solution in original post