The Be Yours theme supports custom labels on product cards. These labels can appear on collection pages, featured collection sections, product recommendation sections, and other areas where product cards are displayed.
Custom labels are useful for highlighting products with badges such as:
- New
- Coming soon
- Best seller
- Limited edition
- Online exclusive
- Staff pick
Once set, each product can display one or multiple labels. All labels on the same product use the same background color, which can be customized per product.
This feature works through product metafields. To use it, create the required metafield definitions once, then add label values to the products you want to highlight.
Requirements
| Requirement | Details |
|---|---|
| Theme version | Be Yours 4.0.0 or later |
| Shopify setup | Product metafields |
| Required metafields |
theme.label and theme.label_color
|
How to Add Custom Labels to Product Cards in Be Yours
STEPS:
1. Understanding How Custom Labels Work
Custom labels in Be Yours are powered by two product metafields.
| Metafield | Purpose |
|---|---|
theme.label |
Stores the product label text, such as New, Best seller, or Coming soon. |
theme.label_color |
Stores the background color used by the product labels. |
The theme.label metafield should be created as a list of single line text values. This allows one product to have multiple labels.
Example:
| Product | Product label | Product label color |
|---|---|---|
| Product A | New |
#000000 |
| Product B |
Best seller, Limited edition
|
#c0392b |
| Product C | Coming soon |
#2c3e50 |
Important:
All labels on the same product use the same background color.
2. Create the Product Label Metafield
First, create the metafield used to store the label text.
This step only needs to be done once. If you have already created this metafield definition, you can skip this step.
- From your Shopify admin, go to Settings > Metafields and metaobjects.
- Click Products.
- Click Add definition.
- In the Name field, enter:
Product label
Shopify will automatically recommend a Namespace and key based on the name.
- Click the suggested Namespace and key value if you need to edit it manually.
- Set the namespace and key to:
theme.label
- Click Select type.
- Select Single line text.
- Choose List of values.
Using a list of values allows you to add multiple labels to one product.
- Click Save.
You should now see Product label in the list of product metafield definitions.
Recommended setup:
| Field | Value |
|---|---|
| Name | Product label |
| Namespace and key | theme.label |
| Type | Single line text |
| Value type | List of values |
3. Create the Product Label Color Metafield
Next, create the metafield used to store the background color of the labels.
- From Settings > Metafields and metaobjects > Products, click Add definition again.
- In the Name field, enter:
Product label color
- Shopify will automatically recommend a Namespace and key based on the name.
- Click the suggested Namespace and key value if you need to edit it manually.
- Set the namespace and key to:
theme.label_color
- Click Select type.
- Select Color.
- Click Save.
You should now see Product label color in the list of product metafield definitions.
Recommended setup:
| Field | Value |
|---|---|
| Name | Product label color |
| Namespace and key | theme.label_color |
| Type | Color |
| Value type | One value |
4. Add Labels to a Product
After creating the metafield definitions, you can add labels to individual products.
- From your Shopify admin, go to Products.
- Open the product you want to add custom labels to.
- Scroll down to the Metafields area.
- Click Show all if needed.
- Find the Product label and Product label color metafields.
- Click the Product label field.
- Enter the label text.
Example:
New
- If you want to add more labels, click Add item and enter another label value.
Example:
Best seller
Limited edition
- Click Save.
5. Add the Label Background Color
After adding the label text, choose the label background color.
- In the same product, find the Product label color metafield.
- Click the color field.
- Choose the color you want to use.
- Click Save.
Important:
The label text color is white.
#ffffff
For better readability, choose a label background color that has enough contrast with white text.
Recommended colors:
| Label type | Example color |
|---|---|
| New | Dark green |
| Best seller | Dark red |
| Limited edition | Black |
| Coming soon | Dark blue |
| Online exclusive | Purple |
After saving, the custom label should display on the product card.
6. Where Custom Labels Display
Custom labels can appear in product card areas across the theme.
Common areas include:
| Area | Description |
|---|---|
| Collection pages | Product cards inside the Product grid section. |
| Featured collection | Product cards inside featured collection sections. |
| Recently viewed products | Product cards in recently viewed sections. |
| Product recommendations | Product cards in recommendation sections. |
| Search results | Product cards in search result grids. |
The exact display depends on where product cards are used and whether the product has the required metafield values.
7. Recommended Label Examples
Here are some examples you can use:
| Label | Suggested use |
|---|---|
New |
Newly added products |
Best seller |
High-performing products |
Limited edition |
Products with limited availability |
Coming soon |
Products that are not yet available |
Online exclusive |
Products only available online |
Back in stock |
Products recently restocked |
Staff pick |
Recommended products |
Pre-order |
Products available for pre-order |
If you use multiple labels on one product, keep them short.
Good examples:
New
Best seller
Avoid long labels:
This product is available for a limited time only
8. Notes and Limitations
Please note the following behavior:
- This setup only needs to be done once.
- Metafield definitions are stored in Shopify, not inside the theme.
- You do not need to recreate these metafields after updating or reinstalling the theme.
- The
theme.labelmetafield supports multiple label values. - The
theme.label_colormetafield supports one color value. - All labels on the same product use the same background color.
- The label text color is white.
- If
theme.labelis empty, no custom label will display. - If
theme.label_coloris empty, the label may use the theme fallback style. - Custom labels are different from sale badges, sold-out badges, and discount badges.
Troubleshooting
If custom labels do not display, please check the following:
- Make sure you are using Be Yours 4.0.0 or later.
- Make sure the Product label metafield exists under Settings > Metafields and metaobjects > Products.
- Make sure the namespace and key is exactly:
theme.label
- Make sure the Product label metafield type is Single line text with List of values.
- Make sure the product has at least one value in the Product label metafield.
- Make sure the Product label color metafield exists.
- Make sure the namespace and key is exactly:
theme.label_color
- Make sure the Product label color metafield type is Color.
- Make sure the product card area supports custom labels.
- If the label text is hard to read, choose a darker background color.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
Can I add countdown timer to my products?
Can I add countdown timer to my products?