SALE BADGE SIZE REDUCE IN CARDS

Store Design
, , , , ,
1

MOBILE VIEW.png
MOBILE VIEW.png483×583 150 KB

PC VIEW.png
PC VIEW.png1101×707 451 KB

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.

2

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

110.png
110.png395×702 104 KB

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

3

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

4

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

5

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?

6

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;
}

oscprofessional_0-1736149132535.png
oscprofessional_0-1736149132535.png1294×778 210 KB

7

yes i would love to do that

8

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

9

Hi @Soiled

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