Re: Sale badge smaller on collection pages (Dawn theme)

Solved

Sale badge smaller on collection pages (Dawn theme)

bellevo
Explorer
76 0 21

Hey,

Is there a way to reduce the size of the Sale Badge on collection pages for both desktop and mobile views? I’ve tried searching for a solution but seems like no one has come up with one in the forums. 

url to my site:

 

https://bellevodesign.com/collections/bedding-sets

Example of the badge:

IMG_5244.jpeg

 Desired end result:

 

IMG_5247.jpeg

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

Hey @bellevo,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

In padding the format is 'top/bottom left/right" so 5px top/bottom and 5px left/right. Same for 4px 4px.

Also, the 5px 5px padding, and 10px font size is for desktop, 4px 4px padding, 9px font-size is for mobile. Change these values as you like to fit your needs.

 

<style>
.card__badge.bottom.left span {
  padding: 5px 5px !important;
  font-size: 10px !important;
}

@media only screen and (max-width: 989px) {  
  .card__badge.bottom.left span {
    padding: 4px 4px !important;
    font-size: 9px !important;
  }
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1714361812265.png

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 3 (3)

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

Hey @bellevo,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

In padding the format is 'top/bottom left/right" so 5px top/bottom and 5px left/right. Same for 4px 4px.

Also, the 5px 5px padding, and 10px font size is for desktop, 4px 4px padding, 9px font-size is for mobile. Change these values as you like to fit your needs.

 

<style>
.card__badge.bottom.left span {
  padding: 5px 5px !important;
  font-size: 10px !important;
}

@media only screen and (max-width: 989px) {  
  .card__badge.bottom.left span {
    padding: 4px 4px !important;
    font-size: 9px !important;
  }
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1714361812265.png

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
bellevo
Explorer
76 0 21

Worked perfectly, thank you!

INA_MSWEB
Shopify Partner
1228 142 155

Hello,

 

I am San from MS Web Designer.

 

Here is the solution:

 

Go to Themes > Edit code > Theme.liquid > at the bottom place this code before </body>

 

<style>
.product-card-wrapper .card__badge {font-size: 10px;padding: 2px 5px !important;}
</style>

 

Do let know in case of any concerns.

 

Regards,

San

 

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin