Badges / Stickers
Display pre-built and custom product badges on the Product Card
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:
Custom Black Friday badge
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
- 1.Using the Shopify Admin under Settings, define a product metafield. The Content type is Single line text (One value)
- 2.In the Product Setup, add a value to each product to generate a custom badge. Each product can have a different badge if desired.
- 3.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.badgetotheme.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:
Last modified 1mo ago