Shopify themes, liquid, logos, and UX
Hi! I would like to change the shape of product badges (new, sale, all of them) to be a circle in the top left corner and not the rectangle currently. Also want them filled in instead of outlined. Have tried targeting with different .css and nothing is quite right so far. Any help is greatly appreciated!!
Example photo below
Fill in color: #FF31F0
Text color: #FFFDF5
URL: https://afca7f-2.myshopify.com/
Solved! Go to the solution
This is an accepted solution.
Hi @blakelyhi ,
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above </body> tag
<style>
.product-badge {
height: 4rem!important;
width: 4rem!important;
border-radius: 50%!important;
justify-content: center!important;
background: #FF31F0!important;
color: #FFFDF5!important;
font-size: 0.9rem!important;
font-weight: 700!important;
}
</style>
Result:
If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
This is an accepted solution.
Hi @blakelyhi ,
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above </body> tag
<style>
.product-badge {
height: 4rem!important;
width: 4rem!important;
border-radius: 50%!important;
justify-content: center!important;
background: #FF31F0!important;
color: #FFFDF5!important;
font-size: 0.9rem!important;
font-weight: 700!important;
}
</style>
Result:
If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
Amazing, thank you!!!!
After sitting with this change I'd like to remove the shape altogether - but when the code is removed it still keeps the rectangle around the badges - is there any way to just have it be text like the image attached? Thank you
Hi! I am wanting to just make the product badge plain text with no shape around it or background color - can you please help? Happy to buy you a coffee! Thank you
Hi @blakelyhi ,
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above </body> tag
<style>
.product-badge {
height: fit-content!important;
width: fit-content!important;
background: transparent!important;
border: unset!important;
padding: 1rem;
border-radius: unset;
}
</style>
Result:
I have a quick question, if i want the badge to be smaller in size on mobile, what could I add to this code to make that happen? Thank you!! It currently blocks much of the product image on mobile because of the size
Can you provide password to view your store? I can provide the code once i view the site.
Hi! You helped me with this code earlier and now I'm needing help targeting ONLY the 'NEW' badge to be a different color, I'm using this code:
.product-badge {
height: fit-content!important;
width: fit-content!important;
background: #614542!important;
border: unset!important;
color: #FCFBF0!important;
font-size: 0.78rem!important;
letter-spacing: 0.75px !important;
padding: 0.8rem;
border-radius: 10px !important;
}
But not having luck targeting the 'NEW' badge only - any tips?
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025