Broadcast Documentation
NewSupport
Latest version
Latest version
  • About Broadcast
    • Broadcast theme documentation
    • Feature requests
  • Updates
    • What's new in Broadcast
      • Release Notes
      • About v6.2 release
      • About v6.1 release
      • About v6.0 release
      • About v5.8 release
      • About v5.7 release
      • About v5.6 release
      • About v5.5 release
      • About v5.4 release
      • About v5.3 release
      • About v5.2 release
      • About v5.1 release
      • About v5.0 release
      • About v4.0 release
  • Sections
    • Broadcast sections
      • Demo store sections
      • Accordion
        • Text column
        • Image column
        • Icon column
        • Custom code
        • Contact form
      • Accordion group
        • Heading
        • Question
      • Before and After
        • Heading
        • Subheading
        • Text
        • Button
      • Blog posts
      • Collection list
        • Collection
      • Collection list hover
        • Collection
      • Countdown timer
        • Subheading
        • Heading
        • Text
        • Buttons
      • Contact form
        • Email
        • Message
        • Text line
        • Text area
        • Telephone
        • Heading
        • Spacer
        • Single checkbox
        • Select dropdown
        • Radio buttons
      • Custom code
      • Custom content
        • Image
        • Text
        • Newsletter
        • Testimonial
        • Product
        • Video
        • Collection
        • Before and after
      • Divider
      • Featured blog posts
        • Featured post
      • Featured collection
      • Featured product
      • Highlights
        • Highlight
      • Image banner
        • Heading
        • Text
        • Single button
        • Side by side buttons
        • Custom code
      • Image with product
        • Heading
        • Text
        • Single button
        • Side by side buttons
        • Custom code
      • Image with scrolling text
        • Scrolling text
        • Heading
        • Text
        • Button
      • Image with text
        • Heading
        • Subheading
        • Text
        • Button
        • Divider
        • Accordion
        • Image
        • Video
        • Product
        • Collection
        • Custom code
      • Image with text slider
        • Text slide
      • Map
      • Multicolumn
        • Image
        • Icon
        • Text
        • Menu
        • Product
      • Newsletter
        • Image
        • Text
        • Newsletter
      • Press logos
        • Logo with header
        • Logo with text
      • Products with image
        • Products
        • Image
      • Recently viewed products
      • Rich text
        • Heading
        • Subheading
        • Text
        • Button
        • Image
        • Divider
      • Rich text with columns
        • Heading
        • Text
        • Buttons
      • Scrolling text
        • Heading
        • Text
        • Free shipping message
        • Custom code
        • Image
        • Collection
        • Advanced text
      • Shop the look
        • Product
      • Sidebar
        • Header
        • Accordion
        • Text
      • Slideshow
      • Tab collections
        • Collection
      • Testimonials
        • Testimonial
      • Text columns with icons
        • Icon
      • Text columns with images
        • Image
      • Text promo
        • Button
        • Heading
        • Text
      • Text with products
        • Collection
        • Product
        • Image
      • Timeline
        • Timeline
      • Video
  • Theme settings
    • Theme settings
      • Colors
      • Typography
      • Buttons
      • Layout
      • Search
      • Social media
      • Product grid
      • Product form
      • Swatches
      • Favicon
      • Cart
      • Currency format
  • Header
    • Announcement bar
      • Announcement bar section
      • Text announcement
      • Free shipping message
      • Custom code
      • Countdown timer
      • Target settings
    • Header
      • Demo store header settings
      • Section settings
        • Transparent header
        • Quantity indicators
        • Social icons
        • Navigation images
      • Header blocks
        • Image
        • Toolbar
    • Mobile menu
      • Section settings
      • Blocks
        • Menu
        • Menu columns
        • Image
        • Icon
        • Text
        • Button
        • Review
        • Language and currency
        • Social media
        • Collection
        • Product
        • Divider
        • Search bar
  • Footer
    • Footer sections
      • Logo
      • Supporting menu
    • Footer settings
    • Footer blocks
      • Link list
      • Newsletter
      • Social
      • Text
      • Page
      • Divider
  • Products
    • Product pages
      • Settings and layout
      • Final Sale
      • Out-of-stock notification
      • Pre-order using metafields
      • Pre-order products using tags
      • Sale items
      • Size charts
      • Swatches (Updated)
      • Swatch collection styles
  • Product Theme Blocks
    • Title
    • Price
    • Variant picker
    • Buy buttons
    • Siblings
    • Description
    • Tabs
    • Accordion
    • Upsell
    • Inventory countdown
    • Sharing
    • Local pickup
    • Text
    • Custom code
    • Icon
    • Divider
    • Line item property
    • Feature
    • Complementary products
    • Popup
    • Badges
    • SKU
    • Fit guide
    • Countdown timer
  • Product recommendations section
    • Related products
    • Recently viewed products
  • Collections
    • Collection pages
      • Collection products
        • Featured image
      • Subcollections
      • Swatch collection styles
      • Product badges
      • Product badges with metafields
      • Product filtering
      • Quick add
      • Cutline second line
  • Pages
    • Page templates
      • Demo store about page
      • Page section
      • Creating page templates
      • About page templates
  • Blogs
    • Blogs
      • About blogs and articles
      • Featured blog posts
        • Featured post
    • Blog posts
      • Article page
        • Navigation
        • Related products
        • Recent articles
        • Default image
      • Product links in blog posts
  • Overlay
    • Cart drawer
      • Title
      • Cart message
      • Free shipping message
      • Products
      • Upsell products
      • Order note
      • Gift note
      • Shipping estimate
      • Icon
      • Product list
      • Custom code
      • Payment icons
      • Checkout buttons
    • Newsletter
      • Popup
      • Mini popup
    • Text promotion
    • Additional settings
  • Promotions
    • Upselling
      • Upselling with metafields
      • Upselling with tags
  • Siblings
    • Product siblings
      • About product siblings
      • How to setup siblings
      • Siblings metafields
      • Siblings color
      • Siblings collection
      • Siblings product setup
      • Siblings block
      • Customizations
  • FAQ
    • Frequently asked questions
      • How to update Broadcast
      • Default theme content
      • Share preview link
      • Hiding prices
      • How to use sections
      • Section blocks
      • How to remove Powered by Shopify
      • Improving the speed of your site
      • How to prevent your images from getting cropped
      • Check your theme version
      • CSS customizations
      • Missing Cart Drawer after Updating
  • License
    • Theme license
  • Support
    • Theme support policy
    • Contacting support
    • Hire a Shopify Expert
Powered by GitBook
On this page
  • How to setup
  • Reference
  • Metafield definition
  • Product setup
  • Result
  • Badge colors
  • Brand colors
Export as PDF
  1. Collections
  2. Collection pages

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 set up the custom metafield and how to use it 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 settings tab under '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 under '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