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
- Hot
- Coming soon
- Best seller
- Limited edition
Once set, each product can display one or multiple labels.
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
|
| Optional metafield from 9.4.0 | theme.label_text_color |
| Badge styling from 9.4.0 | Controlled from Theme settings > Product tiles > Badges |
STEPS:
1. Understanding How Custom Labels Work
Custom labels in Be Yours are powered by 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. |
theme.label_text_color |
Stores the text 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 label text color |
|---|---|---|---|
| Product A | New |
#000000 |
#ffffff |
| Product B |
Best seller, Limited edition
|
#d7ff32 |
#000000 |
| Product C | Coming soon |
#2c3e50 |
#ffffff |
Important:
- One product can have multiple label values.
- All custom labels on the same product use the same background color.
- From Be Yours 9.4.0, you can also set the text color per product with
theme.label_text_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.
Setup summary:
| 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.
Setup summary:
| Field | Value |
|---|---|
| Name | Product label color |
| Namespace and key | theme.label_color |
| Type | Color |
| Value type | One value |
4. Create the Product Label Text Color Metafield
Be Yours 9.4.0 adds an optional metafield for custom label text color.
Use this metafield when you want to control the label text color per product.
- From Settings > Metafields and metaobjects > Products, click Add definition.
- In the Name field, enter:
Product label text 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_text_color
- Click Select type.
- Select Color.
- Click Save.
Setup summary:
| Field | Value |
|---|---|
| Name | Product label text color |
| Namespace and key | theme.label_text_color |
| Type | Color |
| Value type | One value |
Important:
- This metafield is optional.
- If it is empty, the theme chooses a readable text color automatically.
- This metafield controls custom product labels only.
- It does not control sale badge text color.
5. Add Labels, Label Background and Text Colors 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, Label Background, Text Colors metafields.
- Click the fields to Enter the label text and select the colors.
Example:
New
- If you want to add more labels, click Add item and enter another label value.
Example:
Best seller
Limited edition
And select color
- Click Save.
From Be Yours 9.4.0, you can also choose the label text color.
- In the same product, find the Product label text color metafield.
- Click the color field.
- Choose the text color you want to use.
- Click Save.
Example setup:
| Metafield | Example value |
|---|---|
theme.label |
Limited Edition |
theme.label_color |
Acid lime |
theme.label_text_color |
Black |
Behavior:
| Setup | Result |
|---|---|
theme.label_color is set, but theme.label_text_color is empty |
The theme chooses a readable black or white text color automatically. |
theme.label_text_color is set |
The selected text color is used for the custom label. |
After saving, the custom label should display on the product card.
6. Configure Badge Styling
Be Yours 9.4.0 adds badge styling controls in Theme settings.
To configure badge styling:
- From Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Click the Theme settings icon.
- Open Product tiles.
- Find the Badges settings.
- Configure the badge style.
- Click Save.
Badge settings:
| Setting | Description |
|---|---|
| Badge outline | Adds an outline around each badge using that badge's own text color. |
| Badge shape | Controls the badge shape. |
| Badge tilt | Adds a rotated look to badges. |
These settings affect how badges appear on product cards.
7. Use Badge Outline
The Badge outline setting adds a border around each badge.
When enabled, the outline uses the badge's own text color.
This helps badges stay visible when they appear over product images or busy backgrounds.
To enable it:
- Go to Theme settings > Product tiles.
- Find Badges.
- Enable Badge outline.
- Click Save.
Useful cases:
| Use case | Reason |
|---|---|
| Light badge colors | The outline helps the badge shape stay visible. |
| Product images with busy backgrounds | The badge is easier to read. |
| Multiple custom labels | Each badge keeps its own color identity. |
8. Set Badge Shape
The Badge shape setting controls the corner style of badges.
Options:
| Option | Description |
|---|---|
| Theme default | Uses the theme's default badge corner style. |
| Pill | Makes badges fully rounded. |
To change badge shape:
- Go to Theme settings > Product tiles.
- Find Badges.
- Open Badge shape.
- Choose Theme default or Pill.
- Click Save.
Use Pill if you want badges to look softer and more rounded.
9. Set Badge Tilt
The Badge tilt setting rotates product badges slightly.
This can make paired badges feel more dynamic instead of stacking in perfectly parallel lines.
To configure it:
- Go to Theme settings > Product tiles.
- Find Badges.
- Adjust Badge tilt.
- Click Save.
Available range:
| Minimum | Maximum |
|---|---|
| -8° | 8° |
Important:
- Custom labels and regular badges follow the selected tilt direction.
- Sale badges tilt in the opposite direction.
- This creates a more playful visual rhythm when a product shows both a custom label and a sale badge.
10. Set Sale Badge Text Color
Be Yours 9.4.0 adds a Sale badge text color setting.
To configure it:
- From Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Click the Theme settings icon.
- Open the color-related settings.
- Find Sale badge text.
- Select a color.
- Click Save.
Related sale badge color settings:
| Setting | Description |
|---|---|
| Sale badge background | Controls the sale badge background color. |
| Sale badge text | Controls the sale badge text color. |
Important:
- Sale badge text controls sale badges only.
-
theme.label_text_colorcontrols custom product labels only. - Sale badge colors and custom label colors are configured separately.
11. 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.
12. Label Examples
Here are some common label examples:
| 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
13. Notes and Limitations
Please note the following behavior:
- The custom label metafield setup only needs to be done once.
- Metafield definitions are stored in Shopify.
- 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. - The
theme.label_text_colormetafield supports one color value. - All custom labels on the same product use the same background color.
- All custom labels on the same product use the same text color.
- If
theme.labelis empty, no custom label will display. - If
theme.label_coloris empty, the label may use the theme fallback style. - If
theme.label_text_coloris empty, the theme chooses a readable text color automatically. - Badge styling settings are available in Be Yours version 9.4.0 or later.
- Badge styling is controlled from Theme settings > Product tiles > Badges.
- Badge outline uses each badge's own text color.
- Badge shape can use the theme default shape or pill shape.
- Badge tilt supports values from -8° to 8°.
- Sale badges tilt in the opposite direction from other badges.
- Sale badge text controls sale badge text color.
-
theme.label_text_colorcontrols custom product label text color. - Custom labels are different from sale badges, sold-out badges, and discount badges.
Troubleshooting
If custom labels or badge styling do not display correctly, please check the following:
- Make sure you are using Be Yours 4.0.0 or later for custom labels.
- To use badge styling and custom label text color, make sure you are using Be Yours 9.4.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.
- If custom label text color does not change, make sure the product has
theme.label_text_colorset. - If the Product label text color metafield does not appear, check Settings > Metafields and metaobjects > Products.
- Make sure the product card area supports custom labels.
- If the label text is hard to read, choose a stronger label background color or set
theme.label_text_color. - If the badge outline does not appear, make sure Badge outline is enabled.
- If badges are not rounded, check Badge shape.
- If badges are not tilted, check Badge tilt.
- If the sale badge text color does not change, check the Sale badge text color setting.
- 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?