Modular documentation
Support
Modular 3.1
Modular 3.1
  • Modular Theme Documentation
  • Sections
    • How to use sections
      • Section settings
      • Adding sections
      • Hiding sections
      • Reordering sections
      • Theme Settings
    • Modular sections
      • Blog posts
      • Collections list
      • Contact form
      • Custom HTML
      • FAQ
      • Featured collection
      • Featured product
      • Icons row
      • Image with text
      • Image with text overlay
      • Logo list
      • Mosaic
      • Newsletter
      • Product features
      • Rich text
      • Slideshow
      • Split hero
      • Tabs
      • Testimonials
      • Video
    • Recommended Image Sizes
      • Product Images
      • Blog Images
      • Slideshow Section Images
      • Catalog Banner Images
      • Product Feature Images
  • Announcement
    • Announcement bar section
  • Header
    • Transparent header
    • Logo and store name
    • Mega Menu
  • Products
    • Product Pages
    • Creating new Product page templates
    • Pre-Order
    • Product ratings
  • Collections
    • Collection Pages
    • Creating more Collection page templates
    • Customizing the Collection List page
    • Badges
  • Pages
    • Pages
  • Online Store 2.0
    • The new experience
  • Theme Settings
    • Theme Settings Intro
      • Colors
      • Typography
      • Appearance
      • Search
      • Products
      • Cart
      • Breadcrumbs
      • Favicon
      • Social media
      • Checkout
  • Blogs
    • Blog Pages
    • Creating new Blog page templates
  • Footer
    • Blocks and settings
      • Logo
      • Menu
      • Text
      • Newsletter
    • How to remove the Shopify credit
  • Popups
    • Popup section
  • Updates
    • Checking your theme version
    • Downloading the latest version
  • Support
    • Contacting support
    • Sharing a preview link
    • Updating your theme
  • Custom
    • How to add Custom Color Swatches
    • How to make CSS customizations
    • How to set up custom filtering options
    • How to add Custom Fonts
Powered by GitBook
On this page
  • How to create custom badges
  • Creating a new definition
  • Product setup
Export as PDF
  1. Collections

Badges

Add badges or 'stickers' to your individual products

PreviousCustomizing the Collection List pageNextPages

Badges, small yet powerful symbols, convey a wealth of information in a concise and visually captivating manner.

How to create custom badges

Creating a new definition

Custom badges are easy to create and all done in your Shopify admin. The first step is to define a custom metafield that Modular can recognize.

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

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

A crucial step here is to change the default namespace (usually called 'custom') to theme

Add a description and choose Select content type. Choose Text, then select Single line text (it's the default choice):

Don't forget to Save your new product metafield.

Product setup

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:

Save your product and preview it on your Collection pages: