Badges / Stickers
Display pre-built and custom product badges on the Product Card
Last updated
Display pre-built and custom product badges on the Product Card
Last updated
Pipeline includes a set of pre-made product badges or sometimes known as stickers. These are displayed on the product cards which appear most commonly on Collection listings:
The sale badge/sticker is automatically generated and can be displayed in two styles:
A savings badge. This displays "Save" followed by the percentage like "Save 21%". The savings percentage is automatically calculated by Pipeline.
A standard "Sale" badge. This is a regular badge indicating that the product is discounted.
Set the Compare-at price to be larger than the regular product Price:
Choose "Show sale badges"
Optionally check "Show sale amount" for the percent discount style badge
Pipeline can automatically display a "Sold out" badge if you are tracking inventory with your products and the item is out of stock:
Pipeline allows you to create your own custom badges which will be displayed on all product grid views including collections, navigation, related items, and sections.
There are a few basic steps to set up and start using custom badges. Here is a quick summary of the steps:
Basic steps
Using the Shopify Admin under Settings, define a product metafield. The Content type is Single line text (One value)
In the Product Setup, add a value to each product to generate a custom badge. Each product can have a different badge if desired.
In the Theme Editor, ensure that Custom badges are enabled under Theme Settings -> Product Card.
In the Shopify Admin -> Settings -> Custom data, choose Products:
Use the "Add definition" button to create a new product definition
For the Name, use "Badge" or "badge"
Change the Namespace and key from custom.badge to theme.badge (important):
Verify you've changed that to theme.badge
Add an optional description
Click on "Select type" and choose "Single line text"
Choose "One value"
Verify your definition looks like the following:
Press the Save button to complete
Add sticker information to products (fun step).
In the Shopify Admin -> Products, choose any product that you'd like to display a custom badge on.
Scroll to the bottom of the product setup, to the Metafields section, and add your sticker value to the new field called "badges" or "Badges":
Use the Save button to complete.
Continue for any other products you'd like to add badges to.
In the Theme Editor, use the Settings icon for the Theme Settings. Next, open the Product Card section:
Check the option to Enable custom badges in the Product badges group:
You can now view the custom product badges that you created:
