Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
Great – thanks for the Update @gadjetsgalore!
Could you mark the post as the solution? Thank you!
Mario
@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
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.
@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
Hi Mario,
I revisited the code today and it works. Thank you very much for your detailed explanation!
This is an accepted solution.
Great – thanks for the Update @gadjetsgalore!
Could you mark the post as the solution? Thank you!
Mario
Accepted as solution! Worked great for me
Thank you @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;
}
@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
Thank you Mario! This code worked great. What do I need to change in the code for the price to be gray?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024