[MOBILE VIEW.png] [PC VIEW.png] 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: Sale badge size is too big in mobile view in cards, it occupies a lot of space,…

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-in…

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

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

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?

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]

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

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

SALE BADGE SIZE REDUCE IN CARDS

Store Design

Soiled January 6, 2025, 8:11am 7

yes i would love to do that

Topic		Replies	Views
How to resize on sale badge product card Store Design collection-page	7	98	January 27, 2025
How can I reduce the size of my on sale badge? Store Design design , customizations , collection-page , css	1	47	December 12, 2023
I want to make the sale badge smaller and less wide Store Design design , collection-page , css	1	51	November 25, 2024
How to reduce the size of the sold out badge? Store Design design , collection-page , third-party-themes , shopify-themes , troubleshooting	1	54	July 12, 2024
How to change custom badges / sale badge position and sizing Store Design design , css	7	185	September 8, 2025

SALE BADGE SIZE REDUCE IN CARDS

Related topics