Drop - How to add custom product badges
Custom product badges were introduced in Drop v4.0.0 and allow you to show content on products when viewed in a collection and when looking at a product page.
Badges that exist in the theme by default are New, Sale, and Sold out here we learn how and when those badges will be displayed as well as how we can add more badges to bring attention to those products.
Colors for badges can be controlled in your theme settings under the color scheme options.
New
A new badge is displayed on a product if it was created within a selected number of days. You can control this date range in your theme settings under the product badges theme setting.
Sale
When a product or a product variant has a "Compare at price" that is greater than the product selling price the Sale badge will be displayed.
Sold out
If no inventory is available for a product the Sold out badge will be displayed.
The text that is displayed on these 3 badges above can be changed or translated in the Manage theme default content page under the products tab.
How to add custom badges
You may add up to 3 custom badges per product using product metafields.
- In your store admin click on Settings > Custom data
- In the metafield definitions list click on Products
- Click on Add definition
- In the Name field enter: Badge 1 You will see the Namespace and Key will automatically create custom.badge_1 which is required so do not change it.
- Add a description to help you remember its purpose for example: Custom product badge
- Select type: Single line text and then save
- Repeat this process for Badge 2 and Badge 3
In here you will see the new fields that you can use to add badges which will display on your product grid and product pages.
