Custom Badges
Quick summary. Enhances your product discovery by displaying highly customizable text labels (badges) on product cards using tags or metafields.
Overview
Custom Badges allow merchants to highlight specific product attributes—such as "New Arrival," "Eco-Friendly," or "Limited Edition"—directly on the product grid. Unlike standard sale badges, these labels are fully controllable at the individual product level, enabling a more dynamic and informative shopping experience.
By leveraging Shopify's native tags and metafields, you can define unique colors for text, backgrounds, and borders for every badge, ensuring they align perfectly with your brand identity or specific campaign requirements.
Key Features
- Display multiple labels per product to highlight various selling points simultaneously.
- Control color via syntax, allowing you to define hex codes for text, background, and borders directly in the tag or metafield.
- Prioritize data sources where metafield values populate first, followed by product tags.
- Position flexibly across different corners of the product card to avoid overlapping key imagery.
- Scale easily across your entire catalog using bulk tag editing or automated metafield tools.
Step-by-Step Setup
- Open the Shopify Theme Editor.
- Navigate to Theme settings and select the Badges (or Custom Badges) category.
- Toggle the Show custom badges checkbox to enable the feature globally.
- Set the Maximum badges slider (up to 3) to control how many labels appear on a single product card.
- Choose your preferred Position on cards (e.g., Top left, Top right, or Bottom left).
- Enable Use product metafields if you want to manage badges via the
custom.badgemulti-line text field. - Enable Use product tags and define your Tag prefix (default is
badge:). - Go to a specific Product in your Shopify Admin to add a badge.
- To use tags, add a tag following the syntax
badge:Label|#text|#background|#border. - Click Save.
Best Practices
Conversion
- Use High-Contrast Colors: Ensure your badge background and text colors have high contrast so shoppers can read them quickly while scrolling.
- Limit Badge Count: While the section supports up to 3 badges, using 1–2 key highlights usually performs better for visual clarity.
Performance
- Prefer Tags for Speed: For simple badges without unique colors, use standard tags with the prefix to minimize complex data calls.
-
Bulk Update: Use Shopify's bulk editor to apply the
badge:tags to multiple products at once to save time during seasonal launches.
Settings Reference
| Setting | Type | Default | Description | Effect | |
|---|---|---|---|---|---|
| Show custom badges | checkbox | true |
Enables or disables the custom badge overlay on product cards. | Global toggle for the feature. | |
| Maximum badges | range | 3 |
Show up to 3 badges per product. Metafields fill first, then tags. | Limits visual clutter on cards. | |
| Use product metafields | checkbox | true |
Pulls data from the badge metafield (Multi-line text). |
Enables advanced per-product control. | |
| Use product tags | checkbox | true |
Uses tags that start with the prefix below. | Enables simple tag-based badges. | |
| Tag prefix | text | badge: |
The specific string that triggers a tag to become a badge. | Filters which tags appear as UI badges. | |
| Position on cards | select | top-left |
Choose where the badges are anchored on the image. | Controls UI placement. |
Data Syntax
To customize the appearance of individual badges, use the pipe | delimiter in your product tags or metafield lines:
Label|#TextColor|#BackgroundColor|#BorderColor
Troubleshooting
Issue: Badges are not appearing on the product card.
Cause: The "Show custom badges" setting is disabled, or the tag prefix does not match the tag added to the product.
Solution: Ensure Show custom badges is checked in Theme settings and verify your product tag starts exactly with the value in Tag prefix (e.g., badge:New).
Issue: The badge colors are default or incorrect.
Cause: The hex codes in the tag or metafield are missing the#symbol or are not separated by the|character.
Solution: Update your tag to follow the format Label|#000000|#FFFFFF|#000000.
Issue: Metafield badges are showing but tag badges are missing.
Cause: You have reached the Maximum badges limit, and metafields are prioritized.
Solution: Increase the Maximum badges slider or remove a line from the product's badge metafield.
Issue: The badge text is cut off or too long.
Cause: The label text exceeds the width of the product card.
Solution: Keep badge labels under 15 characters for optimal display on mobile devices.
FAQ
Q: Where do I create the metafield for badges?
Go to Settings > Custom Data > Products in your Shopify Admin. Create a new definition named "badge" with the namespace/key custom.badge and select "Multi-line text" as the type.
Q: Can I use one color for all badges?
Yes. If you omit the color codes (e.g., just tag it badge:Sale), the theme will apply the default badge styles defined in your global CSS/Theme settings.
Q: Does this support images instead of text?
This specific fragment is designed for text-based badges. For image badges, you would need to use a badge_image metafield if supported by other parts of the theme.
Q: Will these badges show up in search results?
Yes, as long as the search results use the standard product card component, the custom badges will be visible.
Q: Can I change the font size of the badges?
The font size for badges is typically inherited from the theme's global badge settings or typography presets.
Q: In what order do the badges appear?
Metafields are processed first (line by line), followed by tags in the order they were added to the product, up to your defined Maximum badges limit.
0 comments