SALE BADGE SIZE REDUCE IN CARDS

Store Design
, , , , ,

Topic summary

A Shopify store owner using the Craft theme seeks to reduce the size of sale badges on product cards, particularly on mobile view, where they occupy excessive space. The goal is to match the badge size of a reference site (ugaoo.com).

Solutions Provided:

  • Badge positioning and layout: Add CSS to component-card.css to adjust badge display properties (position, max-width)
  • Font size control: Modify base.css to set custom font size for badges using font-size property
  • Compact styling: Apply padding (3px), border-radius (4px), and smaller font (11px) via CSS in base.css
  • Remove “OFF” text: One contributor noted the reference site’s smaller badges lack the “OFF” suffix, suggesting its removal to achieve similar appearance

Secondary Issue:
The user also wants to customize newly available collection card buttons (smaller size, 6px corner radius, solid background), though this remains unaddressed.

Status: The badge sizing issue appears resolved using the provided CSS solutions. The button customization request is pending.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
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!