In BoltTheme, you can display custom badges (such as “New”, “Hot”, or “20% Off”) on your collection cards within a collection grid (e.g. on your List Collections page). Instead of hardcoding badges, you can manage the badge text, text color, and badge background color dynamically using Shopify Collection Metafields.
️How it Works in BoltTheme
The theme’s collection list grids (list-collections-content.liquid) search for specific custom metafield keys:
- Text:
collection.metafields.custom.badge_text - Text Color:
collection.metafields.custom.badge_text_color - Background/Style:
collection.metafields.custom.badge_style(Accepts style class names, solid hex colors, or custom CSS gradient styling values).
️Step-by-Step Configuration Guide
Follow these steps to create your collection badges:
Step 1: Create Metafield Definitions in Shopify Admin
You must define three custom metafields under the Collections scope:
- Badge Text:
* Go to Shopify Admin > Settings > Custom Data > Collections.
* Click Add definition.
* Set Name to Badge Text and Namespace and key to custom.badge_text.
* Set the Type to Single line text.
* Click Save.
- Badge Text Color:
* In the same Collections custom data menu, click Add definition.
* Set Name to Badge Text Color and Namespace and key to custom.badge_text_color.
* Set the Type to Color.
* Click Save.
- Badge Background / Style:
* Click Add definition.
* Set Name to Badge Style and Namespace and key to custom.badge_style.
* Set the Type to Single line text. (This allows entering either pre-defined theme style classes or direct color codes).
* Click Save.
Step 2: Populate Badge Data inside Collections
Now, add the custom badge values to the specific collections where you want them to display:
- Navigate to Shopify Admin > Products > Collections.
- Select your target collection (e.g. Winter Collection).
- Scroll to the bottom of the page to find the Metafields card.
- Input your badge data:
* Badge Text: Enter your badge copy (e.g. Hot Sale or Trending).
* Badge Text Color: Select a hex color (e.g. #ffffff).
* Badge Style: Enter a color code for the background (e.g. #ff0000 for solid red, or a CSS gradient like linear-gradient(45deg, #ff0055, #ff5500)).
- Click Save.
Step 3: Enable Badges in the Theme Editor
Finally, configure your collection section to display the badges:
- Open the Theme Editor and navigate to your List Collections template.
- Select the Collection Grid block settings in the sidebar.
- Scroll to the card options and check the Show badge checkbox.
- The theme will automatically pull the custom text, background, and text colors you defined in the metafields and display the badge on the collection card.