SALE BADGE SIZE REDUCE IN CARDS

[Soiled]

I want to do the following changes to my website, i am currently updating my theme to Craft 15 something version and editing the themes.

Website: www.soiled.in

changes to be made:

1. Sale badge size is too big in mobile view in cards, it occupies a lot of space, can i reduce it little? if possible i would like to be of the size of www.ugaoo.com sale bade in card size.

2. Shopify now allows the button on collection cards, which is so good, but again the size is ridiculously big, i want to be of my liking corners of 6 and little narrow and small and if possible of solid back.

[GTLOfficial]

Hello @Soiled 

Go to online store ----> themes ----> actions ----> edit code ----> assets ----> comp[onent-card.css
add this code at the end of the file and save.

.card__badge.top.right {
display: flex;
flex-direction: column;
grid-row-gap: 1rem;
position: absolute;
top: -0.5rem;
right: 1rem;
z-index: 2;
max-width: 50%;
pointer-events: none;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Soiled]

can you also edit the code so that i can set the font size on the badge as i wish

[GTLOfficial]

Sure,
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.badge.badge--bottom-left.color-accent-2 {
font-size: 0.9rem !important;    /* change the size of font as per your requirement*/
}

Thanks

[Soiled]

I used this solution and it is working, can you help me with the second issue

[DaisyVo]

Hi @Soiled 

The sample store you provided does not include the word "OFF" on its badges, which is why they appear smaller compared to your store. Would you like to remove the "OFF" text from the badges on your store to match the sample store?

[Soiled]

yes i would love to do that

[DaisyVo]

Hi @Soiled 

It seems an issue has been resolved. Please let me know if you need any further assistance. Thank you! 

[oscprofessional]

Hi @Soiled ,
Go to Online Store > Themes > Actions > Edit Code > base.css

Add below code in base.css  file

.card__badge span.badge {
    padding: 3px;
    border-radius: 4px;
    font-size: 11px;
}