How to change compare to price to red

[gadjetsgalore]

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.

[r8r]

@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

[gadjetsgalore]

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]

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

Mario

[gadjetsgalore]

Hi Mario,

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

[r8r · Accepted solution]

Great – thanks for the Update @gadjetsgalore!

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

Mario

[gadjetsgalore]

Accepted as solution! Worked great for me

[r8r]

Thank you @gadjetsgalore !

[gadjetsgalore]

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]

@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

[gadjetsgalore]

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