How to resize on sale badge product card

Solved

How to resize on sale badge product card

coutureselectio
Tourist
9 0 3

 Hey, I want to resize my on sale badge (50% OFF one) on the product cards by atleast 50%. Can someone help me?

IMG_2485.png

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
9873 2352 2949

This is an accepted solution.

Try this one again.

 

.card__content .badge {
    padding: 4px 6px !important;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 7 (7)

PaulNewton
Shopify Partner
7721 678 1619

Hi @coutureselectio 👋 READ:  https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/1399408 

 

If you need just this customization created for then contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.


Beyond that, 

ALWAYS provide inspectable urls, or level of detail another person needs to understand YOUR problem without them having to extract it.

Ineffective communication skills are a strong indicator of future business failure.

Others are not you and don't have your setup.

Good Luck.

 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


Made4uo-Ribe
Shopify Partner
9873 2352 2949

Hi @coutureselectio 

TRy this one.

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.card__content .badge {
    padding: 4px 6px;
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1737840480197.png

     

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
coutureselectio
Tourist
9 0 3

Hey Made4uo,

 

Unfortunetly it didnt work. Do you maybe have an other solution?

 

Kind regards

Made4uo-Ribe
Shopify Partner
9873 2352 2949

This is an accepted solution.

Try this one again.

 

.card__content .badge {
    padding: 4px 6px !important;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
coutureselectio
Tourist
9 0 3

Hey Made4uo,

 

Unfortunetly, it didnt work again, i feel like maybe there is something wrong with my base.css. do you have any idea

 

Kind regards

coutureselectio
Tourist
9 0 3

Hey Made4uo, 

It worked now, do you maybe know how i can make the font size smaller on the on sale badge

 

Thank you in advance

Made4uo-Ribe
Shopify Partner
9873 2352 2949

You have a code that changes the size of the badge. This same code will also be applied to the "50% off" badge, with the font size currently set to 12px. Would you like the sale badge and the "50% off" badge to have different sizes?

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.