What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: How to change compare to price to red

Solved

How can I change the compare to price color on Venture theme?

gadjetsgalore
Tourist
11 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.

Accepted Solution (1)
r8r
Shopify Partner
2555 327 941

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

View solution in original post

Replies 10 (10)

r8r
Shopify Partner
2555 327 941

@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
gadjetsgalore
Tourist
11 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.

 

 

r8r
Shopify Partner
2555 327 941

@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
gadjetsgalore
Tourist
11 0 5

Hi Mario,

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

r8r
Shopify Partner
2555 327 941

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

Accepted as solution! Worked great for me

r8r
Shopify Partner
2555 327 941

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
gadjetsgalore
Tourist
11 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;
}

r8r
Shopify Partner
2555 327 941

@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
gadjetsgalore
Tourist
11 0 5

Thank you Mario! This code worked great. What do I need to change in the code for the price to be gray?