Electro How to Create Prominent Badges for Collections in Electro

Theme: Electro · Section type: Theme setting

Prominent badges add a short, colored label, such as "New in" or "Sale off", to the corner of a collection card. Use them to draw customers to the collections you want to promote.

Note: Badges show on every collection card in the store: in Collection list sections and on the collection list page. You create each badge once in the Shopify admin and then assign it to collections.

What you can do

• Create the Badge metaobject
• Create your badges
• Connect badges to collections
• Assign a badge to a collection
• Turn on prominent badges
• See what customers see
• Fix common problems

Create the Badge metaobject

The metaobject is the template that every badge follows.

1. In the Shopify admin, go to Settings > Custom data.
2. Under Metaobjects, click Add definition.
3. Name it Badge.
4. Add a Single line text field named Content. This is the badge text.
5. Add a Color field named Color. This is the badge background.
6. Click Save.

Caution: The theme reads the fields by their keys, content and color. If you rename them, check that the keys are still content and color, or the badge won't show.

Create your badges

1. In the Shopify admin, go to Content > Metaobjects and click Badge.
2. Click Add entry.
3. Enter the Content, for example "New in".
4. Choose a Color for the badge background.
5. Click Save. Repeat for each badge you need.

Connect badges to collections

1. In the Shopify admin, go to Settings > Custom data > Collections.
2. Click Add definition.
3. Enter a name, for example "Badge", and set the namespace and key to collection.badge.
4. For the type, choose Metaobject and select Badge as the reference.
5. Click Save.

Assign a badge to a collection

1. In the Shopify admin, go to Products > Collections and open a collection.
2. In the Metafields section, click Badge.
3. Select the badge entry you created.
4. Click Save.

Turn on prominent badges

1. In the theme editor, click Theme settings > Collection card.
2. Under Prominent badge, check Enable prominent badges.
3. Click Save.

Tip: Keep badge text to one or two short words. Long text can cover the collection image on small cards, especially on mobile.

What customers see

• Collection cards: the badge appears in the top-right corner of the card, with your text in capital letters on your chosen background color.
• Every collection list: the same badge shows wherever the collection card appears, in Collection list sections and on the collection list page.
• Collections without a badge: their cards look as before.

Settings reference

Theme settings > Collection card > Prominent badge

Troubleshooting

The badge doesn't show on the collection card.
Check that Enable prominent badges is on in Theme settings > Collection card, and that the collection has a badge selected in its Badge metafield.

The badge shows but it's empty.
The theme reads the text from the content field. Check that the metaobject field key is content and that the badge entry has text.

The badge has no background color.
Check that the metaobject field key is color and that the badge entry has a color.

The badge doesn't appear for any collection.
Check that the collection metafield namespace and key is exactly collection.badge and that its type is Metaobject with Badge as the reference.

Related articles

• Electro How to Use Electro Collection List
• Electro How to Create Electro Collection List Page
• Electro Theme Settings
• Electro How to Set Up Product Metafield

Updated on: 30/10/2026