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?
User | RANK |
---|---|
71 | |
71 | |
65 | |
53 | |
52 |
As a business owner, have you ever wondered when your customer's first impression of yo...
By Skye Jun 6, 2023We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023