Broadcast v6.2 has been released - Learn more about
What's new
Broadcast Documentation
NewSupport
Broadcast v3
Broadcast v3
  • About Broadcast
    • Broadcast theme documentation
  • Online Store 2.0
    • The new experience
  • Announcement Bar
    • Free shipping message
    • Text announcement
    • Custom HTML
    • Announcement bar settings
  • Header
    • Header styles
    • Navigation images
    • Sticky header
    • Transparent header
    • Social icons
  • Sections
    • How to use sections
    • Section blocks
    • List of sections
    • Sidebar
    • Split images
    • Before and After
  • Products
    • Tabs and accordions
    • Tab content using metafields
    • FAQ Accordions
    • Upselling with metafields
    • Upselling with tags
    • Swatches
    • Size charts
    • Pre-order products using tags
    • Pre-order using metafields
    • Sale items
    • Free products
    • Product page settings
    • Theme blocks
    • Low inventory message
    • Icon block
    • Accordion section
    • Product ratings
    • Related products
  • Siblings
    • About product siblings
    • How to setup siblings
    • Siblings metafields
      • Siblings color
      • Siblings collection
    • Siblings product setup
    • Siblings block
  • Collections
    • Product badges
    • Product badges with metafields
    • Product filtering
    • Quick add
    • Sub-collections
    • Cutline second line
    • Featured image
    • Collection page settings
  • Popups
    • Cookies consent message
    • Image promo with newsletter
    • Text promo
    • Small newsletter
    • Coupon codes
  • Footer
    • Footer settings
    • Theme blocks
  • Blogs
    • Featured posts
    • Blog pages
  • Blog posts
    • Article page
    • Theme blocks
  • Pages
    • Page templates
    • Creating page templates
    • Page section
  • Settings
    • Loading icon
  • Updates
    • Release notes
    • Check your theme version
    • Download latest theme version
    • Updating your theme
      • Updating from version 1 or 2
      • Updating from version 3
  • Support
    • Contacting support
    • Share preview link
    • Earlier documentation
  • Custom
    • Where to make CSS changes
    • How to remove Shopify credit
    • Collection image spacing
Powered by GitBook
On this page
  • How to setup
  • Reference
  • Metafield definition
  • Product setup
  • Result
  • Badge colors
  • Brand colors
Export as PDF
  1. Collections

Product badges with metafields

Add custom product badges to individual products easily using metafields

PreviousProduct badgesNextProduct filtering

Feature introduced in Broadcast 3.2

Broadcast makes adding custom individual product badges or sometimes known as stickers very easy to implement and manage by using metafields.

When utilizing metafields you simply create one metafield to activate the functionality. From there you can add badge text to any of your products and Broadcast will automatically generate a custom badge for that product on collection pages or any section using a product grid.

How to setup

If your shop is using Broadcast v3.2 or higher, you can easily use this feature. The following quick video shows you how to setup the custom metafield and how to use with products:

Reference

You can use the following reference information to help with the steps covered in the video.

Metafield definition

Create a product metafield with the namespace and key set to:

theme.badge

Set the content type to Single line text, with one value

Product setup

In the Metafields section of any product that you'd like to use the feature. Add a value to the badge field. This will become your custom badge when displayed in a collection or section that includes a product grid:

Result

When viewing a collection page or section with a product grid-style list, the custom badge is added to the top left corner if the product exists in that listing:

Each product can have its own custom badge label.

Badge colors

Colors are managed in the Theme Editor -> Theme settings -> PRODUCT GRID

Choose the background color and text color to set for all badges. Sale badges have their own values to help differentiate them from other badges:

How to find theme settings:

Brand colors

The data-source option for badge colors allows you to choose colors you've already configured in your brand colors configuration:

Brand colors are configured and managed in the Shopify Admin -> Settings -> Brand:

Video walk-through
The Namespace and key must be theme.badge
Theme Editor -> Theme settings -> PRODUCT GRID
Connect dynamic source
Choose brand colors
Brand color palettes in Shopify Admin -> Settings