Edit reduction label of product card

Technical Q&A
,
1

How do you I reduce the font-size of the reduction label and make it less bolt?

image
image358×280 31.2 KB

Thank you in advance!

2

Hey @Rickyxane

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.product-label--sale span {
    font-size: 14px !important;
}
.product-label--sale {
    font-weight: 100 !important;
}
</style>

RESULT:

image
image351×751 89.4 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

  • font-size: 12px; → makes the text smaller. You can also use em, rem, or % depending on your theme.

  • font-weight: normal; → removes the bold effect. If you want even lighter, you can use 300 or 200 depending on the font.

:backhand_index_pointing_right: If you share the exact class or HTML snippet of your reduction label, I can give you the precise CSS code to drop into your theme.