How To Make Shopify Sale Badge Smaller In Dawn Theme?

[NKmill]

How can I make shopify sale badge smaller in dawn theme?

[Van_Nguyen_GSG]

Hi @NKmill 

Try adding this to your "Theme settings" > "Custom css"

.badge.price__badge-sale {
  transform: scale(0.8); // where 0.8 = 80%
}

[NKmill]

I can not save it. I am sending you an image. When i am pressing save green box this red box appeaars down in the center. As you can see I have pasted the code.

[NKmill]

Thank you for the answer. I pasted the code. But when I press the save green box it appears me a red box down in the center that says : Online store editor session can't be published.

[NKmill]

[Van_Nguyen_GSG]

@NKmill, this occurs when its a reserved shopify class name. The work around is to add the following code at the bottom of the Layouts/theme.liquid file, just above the </body>

<style>
.badge.price__badge-sale {
  transform: scale(0.8); // where 0.8 = 80%
}
</style>

[NKmill]

Thank you for the answer. I have saved the code but nothing happened. Whould you like to send you a message in order to give you access to help me with this?

[NKmill]

In order to see result I have made the scale to 0.95 but still nothing.

[Van_Nguyen_GSG]

@NKmillbeing more specific will likely do the trick.

<style>
.badge.price__badge-sale {
  transform: scale(0.8) !important;
}
</style>

[NKmill]

I have pasted the code to theme liquid just above body but still nothing changed on the sale badge in the online store.

[NKmill]

Do you know how to place it in the top right. I want the top:0 and right: 0. Beacause on shopify in mobile view the badge is in the middle.

[tarek_guma]

Use this on base.css, worked perfectly on Dawn 15.0.2.
Cám ơn Vân for this awesome trick!