How to change compare to price to red

Solved
gadjetsgalore
Tourist
10 0 5

Hello, I am looking to change the compare to price to red on my shopify store. I have tried looking at other solutions but I think because our store codes are different, they don't work for me. I am using the venture theme.

0 Likes
r8r
Shopify Expert
2067 242 710

@gadjetsgalore - if you don’t share your URL, we can only go by a vanilla Venture implementation. You can add the following CSS code - f.ex. to the end of your /assets/theme.(s)css(.liquid)-file:

 

 /* product details */
.product-single__price--compare.product-single__price--compare {
  color: #f00;
}

/* card */
.product-card__regular-price.product-card__regular-price {
  color: #f00;
}

 


Hope this helps … 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
0 Likes
gadjetsgalore
Tourist
10 0 5

https://www.sportsoutletexpress.com/ is my url

 

I copied and pasted the code at the bottom of my  /assets/theme.(s)css(.liquid)-file:, and clicked preview and the compare to price was still gray. Please let me know if I can provide anything else you need to know.

 

 

0 Likes
r8r
Shopify Expert
2067 242 710

@gadjetsgalore – did you save the file?

I checked the built css-source file at https://cdn.shopify.com/s/files/1/1363/4521/t/14/assets/theme.scss.css?v=2490729944409828148 and it does not contain the code above:

Screenshot 2021-09-14 at 13.02.56.jpg

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
0 Likes
gadjetsgalore
Tourist
10 0 5

Hi Mario,

I revisited the code today and it works. Thank you very much for your detailed explanation! 

r8r
Shopify Expert
2067 242 710

This is an accepted solution.

Great – thanks for the Update @gadjetsgalore!

Could you mark the post as the solution? Thank you!

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
0 Likes
gadjetsgalore
Tourist
10 0 5

Accepted as solution! Worked great for me

r8r
Shopify Expert
2067 242 710

Thank you @gadjetsgalore !

★ 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
0 Likes
gadjetsgalore
Tourist
10 0 5

Hi Mario

if I want to switch the red to the current price and leave the compare to price gray, what do I have to change in my code?

/* product details */
.product-single__price--compare.product-single__price--compare {
color: #f00;
}

/* card */
.product-card__regular-price.product-card__regular-price {
color: #f00;
}

0 Likes
r8r
Shopify Expert
2067 242 710

@gadjetsgalore – there you go …

 /* product details */
.product-single__price--compare.product-single__price--compare {
  color: #666;
}
.product-single__price.product-single__price {
  color: #f00;
}

/* card */
.product-card__regular-price.product-card__regular-price {
  color: #666;
}
.product-card__price.product-card__price {
  color: #f00;
}

However, the regular price will ALWAYS be red, not just for the items on sale. If you want that changed, the theme needs to be modified a little.

Hope this helps,
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
0 Likes