Want to change how the badges look - Lorenza Theme

[ELBOY]

Hi,

I am looking to clean up how the badges look, especially on mobile. From how they are now, I am looking to decrease the size and create a rounded edge border around it. I have attached an example photo.

I also want to note that I would like for this to work with the "custom badges" (as part of the lorenza theme) in addition to the "On Sale" badges.

my website is houseofdakh.com

Any help would be appreciated,

Thanks in advance,

Elden

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
.badge.sale-badge.type-body-small.ttu.lh-title {
    padding: 8px 12px !important;
    border: solid 1px;
    border-radius: 10px;
}
</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[ELBOY]

Is there any way to make the badge a little smaller and tucked toward the corner a bit more?

Also is there a way to make the effect apply to the other badges? For example the "Sold out" badge is still the default style. 

Thanks

[AnneLuo]

Just change the padding and border-radius value.

[ELBOY]

I see. That did help with making it smaller. Would you be able to tell me how to get it tucked into the top right corner more?

Thanks for your help

[AnneLuo · Accepted solution]

Add the code below to the same location.

<style>
.product-badges.absolute.top-0.right-0.mt3.mr3 {
    margin-top: 5px !important;
    margin-right: 5px !important;
}
</style>

 Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!