How can I modify product badges shapes and colors in Stiletto theme?

Solved

How can I modify product badges shapes and colors in Stiletto theme?

blakelyhi
Explorer
97 1 5

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/

 

Screenshot 2023-11-12 at 6.36.49 AM.png

Accepted Solution (1)

theycallmemakka
Shopify Partner
1786 435 462

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:

makkaomakka_0-1699796343423.png

 

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

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 8 (8)

theycallmemakka
Shopify Partner
1786 435 462

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:

makkaomakka_0-1699796343423.png

 

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

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

blakelyhi
Explorer
97 1 5

Amazing, thank you!!!!

blakelyhi
Explorer
97 1 5

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

 

unknown.png

blakelyhi
Explorer
97 1 5

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

theycallmemakka
Shopify Partner
1786 435 462

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:

makkaomakka_0-1700490739914.png

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

blakelyhi
Explorer
97 1 5

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

theycallmemakka
Shopify Partner
1786 435 462

Can you provide password to view your store? I can provide the code once i view the site.

theycallmemakka_0-1710262118076.png

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

blakelyhi
Explorer
97 1 5

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?