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.