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

Sale 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.

How to

• 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

Sold out badge

Pipeline can automatically display a "Sold out" badge if you are tracking inventory with your products and the item is out of stock:

Custom badges

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.

How to create

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.

Step 1

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

Step 2

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.

Step 3

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:

Result

You can now view the custom product badges that you created: