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

Store Design
1

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.

2

@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

3

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.

4

@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
Screenshot 2021-09-14 at 13.02.56.jpg929×248 98.5 KB

Mario

5

Hi Mario,

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

1 Like
6

Great – thanks for the Update @gadjetsgalore !

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

Mario

7

Accepted as solution! Worked great for me

1 Like
8

Thank you @gadjetsgalore !

9

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;
}

10

@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

11

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