How to customize badges color and text size [all free themes]
By default, the Dawn's theme “sale” badges will always show up with a blue background, while the “sold out” badges are shown up with a black background and white text.
Although you're able to customize the accent color of your theme and change them, the Dawn theme does not allow you to change these colors individually.
In this tutorial I'll be showing you how you can quickly customize these badges' colors and size in a just a few lines of code.
Making a backup of your theme
Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.
Adding the code to the theme
- From your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
- Find the snippets folder and click on “add a new snippet”.
- Name it exactly:
ezfy-badges-color - Copy the code below, paste and save.
- Find the file named exactly theme.liquid
- Inside this file, press CTRL + F (CMD + F on Mac) to trigger the search box and find this:
</head - Paste the following code above the line you found:
{% render 'ezfy-badges-color' %} - Nice! We're almost there.
Adding the code to the customize page
- Find the file named exactly:
settings_schema.json - Scroll all the way down and copy this code. Don't paste anything just yet!
- Now, at the bottom of this file, paste the code after the } sign, as the image below indicates.
- Now save and you should be ready to go!
If you see any errors, you pasted the code on the wrong line; please refresh the page and try again.
Customizing the code
- Click on the three dots on the upper left corner, click on customize theme.
- On the left panel, click on “theme settings” and scroll down until you find “Badge colors & font size”
You may also like
Here are some other tutorials you may be interested in. They work with “Dawn” plus all Shopify's free themes (Craft, Refresh, Colorblock, Taste, Ride, Studio, Crave, Origin, Spotlight, Publisher & Sense):
– Arrows & vertical thumbnails for Dawn's product pages
– Dawn lightbox: responsive images, slider and arrows
– Improve your website's safety: block right click, image copying and more
Was this article helpful?