Badges

Most badges are used for products, but there are a few other places where this visual style is applied on the Search results page, on a Blog Post for the date stamp, and within accounts. 

Product badges are used throughout the theme to indicate products that have a particular status. There are currently 4, and they are:

• Coming soon
• Sold out
• Sale
• New

Only one badge will ever show for a product at a time, and the order they are listed in above is their order of preference. For example, if a product qualifies as "New" and also "Sold out", it will display the "Sold out" badge, as that badge has priority preference. 

The "Sold out" badge shows when inventory is being tracked within Shopify's Admin, and the inventory count is "0".

The "Sale" badge shows when the "Compare-at price" is greater than the "Price" for a product in Shopify Admin. Below is an example.

Badge design options and preferences in theme settings

Here you can specify color schemes that are specific to each badge, and also different from your overall theme color schemes. There are also these other settings. Note, the shape of the badge is automatically defined based on whether the style of the theme is "sharp" or "soft". Badge font will automatically be the body font chosen in Typography/Theme settings, in all caps and bold.

Font style

Choose the heading or the body font to use for badges. Badges are always presented small, in all caps, and bold, so you should choose the font that is the most legible in that style.

Show product badges

For Whisk 6.0.0 and later, there is a checkbox to show or hide each product badge. For Whisk 5.0.0 and earlier, there is one checkbox to show or hide all product badges.

Check this box to show product badges on product cards and on the product page. 

Product card badge placement

On top of product image

Under product image

Add a "Coming soon" or "New" badge to a product

"Sold out" and "Sale" badges are configured to work out of the box, but see the instructions below for how to set up badges for "New" and "Coming soon" badges. The "Coming soon" badge will only show when the product has no inventory, just like the "Sold out" badge.

Step 1: Create the product badge metafields

In the left hand column of Shopify Admin, click on the "Settings" tab towards the bottom. The settings window will open and in its left sidebar, click into Metafields. You'll see a list of Fields for different page templates. Select "Products".

The metafield you create needs to be named and setup exactly as described and named below in order to work correctly. Click into the "Add definition" button to start.

After you've filled everything out to create this metafield, click "Save".

Step 2: Add badges to products

Visit the product in the Shopify Admin that you want to add a badge to. Scroll down to the bottom of the page and you'll see a section titled "Metafields". Click on "Show all" and find the "Coming soon badge" or "New badge" metafield that you just created. Click into the empty field, and you will see the option to set to true or false. Set to true for the badge that you want to show on the product. Setting this field to "false" is the same as not setting it to anything, so you don't need to set it to false for the products that you don't want the badge to show for.