Shopify themes, liquid, logos, and UX
Hello,
I am trying to change the color of the product price in the collection pages. I found how to do it in the theme elements with the "body light text", however it changes also a lot of other text element such as text in the cart.
How can I change only the product price color?
Also, how can I change the sale badge color?
Thanks,
Melanie
Solved! Go to the solution
This is an accepted solution.
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file
.template-collection .ProductItem__PriceList.Heading span:not(.Price--highlight) { color: green; } .template-collection .ProductItem__Label.ProductItem__Label--onSale.Heading.Text--subdued { color: red; }
Note:Please change color as per your requirement
Hello @rougeon,
Please share your site url so that I will give you exact solution
This is an accepted solution.
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file
.template-collection .ProductItem__PriceList.Heading span:not(.Price--highlight) { color: green; } .template-collection .ProductItem__Label.ProductItem__Label--onSale.Heading.Text--subdued { color: red; }
Note:Please change color as per your requirement
Hi, I did the same thing but nothing happen. I'm using v4.5.5. Please help.
Hello @manhuynguyen,
Can you please share your site url?
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
span.ProductItem__Label.Heading.Text--subdued { color: red; }
@oscprofessional thank you very much. it changes the color of the word "On sale". Can you also give code to change background of the "On sale" badge?
Please add below css
span.ProductItem__Label.Heading.Text--subdued { background: black; }
Note:You can change color as per your requirement
Please help
@oscprofessional Hi, can you please give some inputs on this. I'd really appreciate it.
Hi. I’m trying to I change the color of the sale box on my theme. I tried the first solution mentioned at the top of this post but it didn’t work. I have the prestige theme
Hello @offcode,
Can you please give me your site url so that I can check
Offcodecompany.com
Hello @offcode,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
span.ProductItem__Label.Heading.Text--subdued { color: white; background-color: red;
Note:You can change color as per your requirement.
My Dera can You also help me. Currenty my sale tag is round and my product price colour is same as product title. I want to change the sale tag shape and product price colour.
My theme : BROOKLYN (VERSION 16.0.8)
my website : https://kick6251.myshopify.com/
pass - rottow
This works great! Is there also a way to change the font color of my product title on the collection page only? Thanks!
Hello markrob,
Please share your site url.
So that I can check and let you know the exact solution here.
Hello
I want to change the price color in my website but above solution is not working can you please help
https://evestones.com/
It works perfectly!
How can we differentiate the badges between "on sale" and "sold out"? as both badges in same color with your provided code.
Thank you so much!
How do I change the color of other labels i.e., items that are not sale but are new to the store? For example I have the __label:New added for new products.
Hey There thanks for your answer,
Do you know how can we reduce the size of it please ?
Thanks a lot.
please share the screenshot and url.....
Thanks !
URL : Archivded
Screenshot not visible
Oops soory
span.ProductItem__Label.ProductItem__Label--onSale.Heading.Text--subdued {
font-size: 9px;
padding: 2px;
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
Perfect many thanks
Your most welcome.
Please accept the solution
Sorry im new here, How can i accept Solution please ?
Hello, I am trying to change me SALE heading at the top of my main sreen to red (it's currently black)
I can't seen to have any luck following the other posts. My URL is: https://www.leclercco.com/
Thank you!
Brenda
Hello,
Please help. We have the same
issue, we want to change the color of the sale box to red and white font.
we tried the above solution and it didn’t work. Error message it couldn’t be saved
@oscprofessional Hello, I'm trying to have the sale price be shown on website but it's not working. I tried copying the code as well that was posted in this thread.
I would like the sale price be shown in color red, and have the original price strikeout.
Is there something that I'm missing? I appreciate the feedback.
Here is my website: https://aphrodisiacinc.us/
Hi @aphro_inc ,
share the product which is having sale price.
Hello, I have a problem with the flash tag, i want it to appear only in special prices products, because now only appears in home page, and in all the product i put in home page.
my website it https://tinaynica.com/
password is prohsa
Hi @tinaynica
add tag in special products then check it on front end product page
I allready did that, but what i want is the "flash" badge ONLY appears in the product that have the label "special Prices"
Hello Rougen,
Your store theme looks minimal and classy. You probably like neat and eye-catching designs for your store. You can make badges to match with the vibe of your store with a few clicks.
You can make your custom badges with ModeMagic within minutes, in any color or shape you want. It’ll take you just a few minutes to design a badge the way you like, that too in French, German, Spanish, and English.
ModeMagic is a simple app to make and add badges to your Shopify store. With a few clicks, you can design a badge to match your needs. You can even upload your own badges on ModeMagic to add to your store.
It’s easy to automate stock labelling on your products with the badges you choose. You don’t need to hustle to keep your store updated anymore.
Give it a spin for free. Try it out for 14 days. You may end up liking it!
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