Hi all,
I’m looking for a way to change the price colour seperately to red. I cannot seem to find the right css file to get it right. Anybody has any suggestions?
Topic summary
A user seeks to change product price colors to red on their Shopify store using the Enterprise theme. Multiple solutions are provided:
Working Solutions:
- Add custom CSS via
<style>tags in theme.liquid file above the</body>tag, targeting.card--product .priceelements - Insert CSS code directly into the main.css file:
.card--product .price.price--top { color: red; }
Resolution:
The original poster confirmed the theme.liquid method worked successfully.
Follow-up Question:
A new participant asks how to modify the code to display discounted prices differently—showing the original price in black and the current/sale price in red. This remains unanswered.
Both approaches involve accessing the theme code editor through Online Store > Themes > Actions > Edit Code, then either modifying theme.liquid or main.css files.
1 Like
Hey @Cassy_013
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
Hello @Cassy_013
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > main.css and paste this at the bottom of the file:
.card--product .price.price--top {
color: red;
}
Thank you Moeed, that worked perfectly!
Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
Hello @Cassy_013
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->main.css
add this code at the end of the file and save.
.card--product .price__current {
color: red !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hi Moeed, i need this code but for discounted price, so “the price was” in black and “the current price” in red.. could you help me? Thanks!
Can you please post the code to visible. “i need this code but for discounted price, so “the price was” in black and “the current price” in red.. could you help me? Thanks!”
Looks like you have accomplished this in Enterprise theme. Thank you!
Thank you for the quick reply. Currently working on Trial version and will have full site this week. Can you still help for a trail version of Theme? Thank you!
To apply the code changes all over website, it’s better if you edit the theme file (which you can’t since you’re still on trial) although you can still apply the code in Custom CSS option but then you’ll have to apply it one by one in all the sections (where needed) and I don’t recommend doing this.
So, I would suggest is that purchase the theme so you have full access then edit the theme code.
Best,
Moeed
Purchased the Theme and access to the code file. Kindly let me know how to edit the code to accomplish “i need this code but for discounted price, so “the price was” in black and “the current price” Many thanks
1 Like
Great, now share your store URL if your theme is live OR Share your preview URL if your theme is still in draft.
Best,
Moeed
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </ body> tag
<style>
span.price__current {
color: red !important;
}
span.price__was.price__was--supercents {
color: black !important;
}
</style>
RESULT:
If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
1 Like