Install MDBadgePilot and turn on the app embed
Install MDBadgePilot from the Shopify App Store. Then open Online Store > Themes > Customize, go to App embeds and turn on Badges on product images (MDBadgePilot). Save.
The app embed shows badges on the main image of the product page and on product cards: collection pages, search results, homepage sections and product recommendations.
Create your first badge from a template
In the app, click Create badge to open the template gallery. 8 templates are ready to use:
- Sale (-{discount}%), New, Low stock (Only {stock} left), Sold out and Free shipping, available on the Free plan.
- Best seller, Top rated and Black Friday, on the Pro plan.
Adjust the design
Change the text, the background and text colors, the shape (pill, rectangle, corner ribbon or circle), the position on the image (one of the four corners) and the size (small, medium, large). The preview shows the badge on a product card as shoppers will see it.
Two variables fill themselves per product: {discount} for the discount percentage and {stock} for the units left. A badge using them is hidden on products without a discount or without stock, so you never show -0%.
Choose the products
A badge is either manual or automatic. Manual: pick the products in a list. Automatic: set a condition, such as On sale or Days since creation, and the badge is added to and removed from products by itself.
Activate the badge, then open a collection page of your store to check the result.
Show badges next to the product title
On desktop, many themes show several product images side by side. To show badges near the title or the price instead, add the Product badges block to the product page in the theme editor. It has its own settings: show on mobile, desktop or both, alignment and spacing.
Frequently asked questions
Do I need to edit my theme code?
No. MDBadgePilot uses a theme app extension: you turn it on in the theme editor and can turn it off the same way. Nothing is written into your theme files.
Which themes are supported?
Online Store 2.0 themes (Dawn, Horizon and most recent themes). If badges do not show on product cards with your theme, the app embed has an advanced Product card selector setting.
Is it free?
The Free plan includes 1 active badge, manual or automatic. The Pro plan ($7.99/month, 7-day free trial) unlocks unlimited badges, up to 10 conditions per badge and scheduling.
Do badges slow down my store?
Badges are read from Shopify metafields by the theme: the storefront never calls our server. The script that places badges on product cards is small and has no external dependency.