Design Packs Docs
design-packs.comView on Shopify App Store
  • Get started here
  • Guides
    • Adding your first section
    • Adding your first template
    • General settings
    • Helpful hints & resources
    • Troubleshooting
    • Performance
  • Fundamentals
    • Section Settings
      • Setting Solid Background Colors instead of Gradients
      • Understanding Layout Settings: Size & Maximum Width
      • Understanding Inner Padding & Outer Margin Settings
      • Custom Classes Setting
      • Show Individual Variants Setting
      • Enable Metafield Detection Setting
        • Metafield ready sections
        • How to Use Metaobjects on Product template with Image with text - simple section
      • Metafield Badge Setting
      • Using Blog Tags Setting to Show Product-Specific Blog Posts
      • Add custom events when product is added to cart
      • Size Controls for Image & Video Blocks
      • Featured collection - blocks
        • How to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review Apps
        • How to use the Metafield Image Badge block
        • How to use the Metafield text block
      • Newsletter/Signup Form Block - Tags
      • How to add a Hidden Field in Contact Form
    • Sections
      • Banners & Sliders
      • Flourish
      • Icon & Logos
      • Image with text
      • Menus & Navigation
      • Blocks & Columns
      • Text Content
      • Products & Collections
      • Article sections
      • Galleries
      • Misc
      • Modal Popup
    • Templates
      • Regular Page
      • Lookbooks
      • Blogs
      • Blog Posts
      • Collection
      • Landing pages
    • Custom CSS
      • Basic CSS examples
      • Mobile CSS examples
      • Advanced Examples
    • Shopify expertise
      • Theme editor
      • Metafields
      • MetaObjects
    • How to Guides
      • How to jump/ link to another section on the SAME page
      • How to forward a contact form in Shopify to a different email with Gmail filters
      • How to create new page templates (and keep the original as a starting point)
      • Creating a New Product Template
      • How to set default article template for all blog posts
  • Use Cases
    • For Designers
    • For Developers
    • Agency Licenses
    • Affiliate Program
  • PRODUCT BLOCKS
    • Product Blocks
      • Image with text block
      • Connected products block
      • Variant descriptions block
      • Value icons block
      • Video block
      • Collapsible content block
      • Feature range block
  • Integrations
    • Theme Updater App
Powered by GitBook
On this page
  1. Fundamentals
  2. Section Settings

Metafield Badge Setting

Here are the sections that have the "Show metafield badge" setting:

  • Featured Collection - Expand

  • Featured Collection - Scroll

  • Featured Collection - Simple

  • Featured Collection - Slider w/ Text

  • Featured Collection - Slider

  • Featured Collection with Text

The metafield badge feature allows you to display custom badges on products using Shopify metafields. This is useful for showing special labels like "New", "Limited Edition", "Pre-Order" etc. that are managed through metafields rather than hard-coded.

Setup Instructions

  1. Create a Metafield Definition

First, you'll need to create a metafield definition in your Shopify admin:

  • Go to Settings > Custom data > Products

  • Click "Add definition"

  • Configure the metafield:

    • Type: Single line text

    • Namespace: Choose a namespace (e.g., 'custom')

    • Key: Choose a key name (e.g., 'badge_text')

    • Name: Give it a friendly name (e.g., "Badge Text")

    • Description: Optional description of what this metafield is for

  1. Configure Section Settings

In the section settings, locate the "Badge Settings" area and configure:

  • Enable "Show metafield badge"

  • Enter the metafield namespace you created (e.g., 'custom')

  • Enter the metafield key you created (e.g., 'badge_text')

  1. Add Badge Text to Products

For each product where you want to display a badge:

  • Go to the product in your Shopify admin

  • Scroll down to "Custom data"

  • Find your badge metafield

  • Enter the text you want to display in the badge

Features

  • Badges will automatically appear in the top-right corner of product images

  • Styling (colors, border radius) can be customized in the section settings

  • If a product has no metafield value, no badge will be shown

The badge appearance can be customized using these section settings:

  • Badge Text Color

  • Badge Background Color

  • Badge Border Radius

Troubleshooting

If badges aren't appearing:

  • Verify the metafield namespace and key match exactly

  • Check that products have values set for the metafield

  • Confirm "Show metafield badge" is enabled in section settings

Notes

  • Badges will only show if both the metafield exists and has a value

  • The feature can be used alongside standard product labels (Sale, Sold Out)

  • Text is automatically wrapped if too long for the badge

CSS Examples for Badge Positioning

You can customize the position of your badges by adding custom CSS to your section settings. Here are some common examples:

Move badge to top-left corner:

.dsgn-pck__product-tag {  
  right: auto;  
  left: 10px;
}

Move badge to bottom-right corner:

.dsgn-pck__product-tag {
  top: auto;
  bottom: 10px;
}

Move badge to bottom-left corner:

.dsgn-pck__product-tag {
  top: auto;
  bottom: 10px;
  right: auto;
  left: 10px;
}

Center badge horizontally:

.dsgn-pck__product-tag {
  right: 50%;
  transform: translateX(50%);
  text-align: center;
}

Center badge vertically and horizontally:

.dsgn-pck__product-tag {
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  text-align: center;
}

Adjust spacing from edges (default is 10px):

.dsgn-pck__product-tag {
  top: 20px;
  right: 20px;
}

To use these examples, copy the desired CSS and paste it into the "Custom CSS" field in your section settings. You can also combine or modify these examples to achieve your desired positioning.

PreviousHow to Use Metaobjects on Product template with Image with text - simple sectionNextUsing Blog Tags Setting to Show Product-Specific Blog Posts

Last updated 2 months ago