Story theme
Latest
Latest
  • About Story
    • Story theme documentation
  • Updates
    • What's new in Story
      • Story Releases
  • Sections
    • Story sections
      • Accordion group
      • Blog posts
      • Collection list
      • Collection marbles
      • Collection split
      • Contact form
      • Custom liquid
      • Custom content
      • Featured collection
      • Featured product
      • Gallery
      • Icon columns
      • Image banner
      • Image with text
      • Logo list
      • Map
      • Mosaic
      • Newsletter
      • Overlapping images
      • Page
      • Policy links
      • Press
      • Rich text
      • Slideshow
      • Tabs
      • Team
      • Testimonials
      • Text columns with images
      • Timeline tree
      • Timeline with banner
      • Video banner
      • Video player
  • Settings
    • Theme settings
      • Global theme settings
      • Typography
      • Colors
      • Layout
      • Social
      • Cart
      • Search
      • Product grid
      • Currency format
      • Favicon
      • Advanced
      • Checkout
      • Custom CSS
  • Header
    • Header
      • Header styles
      • Toolbar
      • Navigation images
      • Image menus
      • Transparent header
      • Mega-menu navigation
      • Drop-down navigation
  • Products
    • Product pages
      • Static product tabs
      • Unique product tabs
      • Product tabs
      • Color swatches
      • Inventory countdown
      • Pre-order products
      • Static size chart
      • Unique size charts
      • Creating pages
      • Size Charts
      • Product image sizes
  • Collections
    • Collection pages
      • Product badges
      • Sale badge
      • Savings badge
      • Sold-out badge
      • Custom badges
      • Badge settings
      • Custom filter options
      • Collection filtering
      • Collection sorting
      • Collection navigation
      • Feature image
  • Cart
    • Story cart
      • Cart styles
      • Shipping message
      • Estimate shipping calculator
      • Cart settings
  • Promotions
    • Upselling
      • Upsell promotions
      • How to setup
      • Static upsell promotion
      • Custom upsell promotion
  • Overlay
    • Popups
      • Cookies consent message
      • Newsletter popup
  • Siblings
    • Product siblings
      • About product siblings
      • Multiple images per variant
      • How to setup siblings
      • Siblings metafields
      • Cutline
      • Siblings collection
      • Siblings product setup
      • Siblings block setup
      • Variant image sets with alt-tags
  • Pages
    • Page templates
      • Page navigation
      • How to use page templates
      • Story page templates when using a different theme
      • Contact page
      • Lookbook
      • Team
      • Timeline
  • Blogs
    • Blogs and posts
      • Blogs
      • Articles
  • FAQ
    • Frequently asked questions
      • Where to make CSS changes
      • How to download latest version
      • How to add a line break in your headings
      • Share preview link
      • Remove Shopify link in footer
      • Check your theme version
      • How to use sections
      • Adding a section
      • Hiding a section
      • Reordering sections
      • Section blocks
  • License
    • Theme license
  • Support
    • Contacting support
Powered by GitBook
On this page
  • How to setup
  • Quick setup for experienced users
  • Full detailed step-by-step setup
  • Product setup
  1. Collections
  2. Collection pages

Custom badges

Promote products with your own custom badges that you create and assign to individual products

PreviousSold-out badgeNextBadge settings

Last updated 1 year ago

Story theme allows you to create your own unique product badges to associate with any of your products. When using Shopify's dynamic source feature (also known as metafields), you can create individual product badges for any of your products.

Once a badge metafield is defined (see instructions below), any of your products can display a custom badge. There are no limits to the number of badges you can create and use. All your products will be able to display a custom badge or use the built-in badges for sales and out-of-stock inventory.

How to setup

Quick setup for experienced users

The most important part of setting up this metafield is to use the namespace and key of:

theme.badge

See the example here:

Full detailed step-by-step setup

The first step is to define a custom metafield that Story theme supports.

Start in your Shopify Admin -> Settings and choose Metafields from the left panel and then click on Products (click images to zoom):

Choose the Add definition button to begin. Choose a name, we'll use badge. Next, we will use a custom namespace. This is required for custom badges. Change the default namespace from my_fields to theme

Change to:

theme.badge

Example:

Add a description and choose Select content type.

Choose Text and we will use Single line text which is the default choice:

Save your new product metafield. Now we can use this custom theme.badge metafield with any of our products.

Product setup

Now that our custom metafield has been defined, we can easily add a custom badge to any of our products.

The next and final step is to edit any of your products in the Shopify Admin -> Products and update the new badge metafield. Scroll to the bottom of the product setup page:

Update the Product badge metafield with the custom badge name:

Save your product and preview on any product grid view like Collection pages:

Example of custom badge call "Best Seller" assinged to a product
Under Metafields, click on Products
Use the Add definition button to begin
Change from my_fields to theme
Don't skip this step
Choose Text for the Content type
Product metafields are located at the bottom of the page