Be Yours 9.4.0 adds more styling controls for product badges.
You can now control:
- Badge outline
- Badge shape
- Badge tilt
- Sale badge text color
- Custom label text color per product
These settings help product badges look more intentional, especially when multiple badges appear together on the same product card.
Steps:
1. Understanding Product Badges
Product badges are small labels that appear on product cards and product pages.
Common badge types include:
| Badge type | Description |
|---|---|
| Sale badge | Appears when a product is on sale. |
| Sold out badge | Appears when a product is unavailable. |
| Custom product label | Comes from product metafields, such as New, Bestseller, Limited, or Pre-order. |
Be Yours 9.4.0 adds more control over how these badges look.
2. Configure Badge Styling
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. |
3. 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.
Best for:
| 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. |
4. 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.
5. 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.
6. 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. |
If Sale badge text is left empty, the theme uses the default text color that works with the current color setup.
7. Add a Custom Label Text Color Metafield
Be Yours supports product metafields for custom product labels.
Common custom label metafields:
| Metafield | Purpose |
|---|---|
theme.label |
Adds the custom label text. |
theme.label_color |
Sets the custom label background color. |
theme.label_text_color |
Sets the custom label text color. |
To create the label text color metafield:
- From Shopify admin, go to Settings > Metafields and metaobjects.
- Open Products.
- Click Add definition.
- Enter the name, for example Product label text color.
- Set Namespace and key to
theme.label_text_color. - If Shopify auto-recommends a Namespace and key, click the suggested value to edit it.
- Set the type to Color.
- Click Save.
8. Set Label Text Color for a Product
After creating the metafield, you can set the label text color per product.
To set it:
- From Shopify admin, go to Products.
- Open the product you want to edit.
- Scroll to the Metafields area.
- Find Product label text color.
- Select the text color.
- Click Save.
This lets you control the text color for custom labels on a specific product.
Example setup:
| Metafield | Example value |
|---|---|
theme.label |
Limited Edition |
theme.label_color |
Acid lime |
theme.label_text_color |
Black |
9. How Label Text Color Works
The product label text color gives you more control over custom labels.
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. |
| Badge outline is enabled | The badge outline uses the badge text color. |
This is useful when you want the label text to match your brand style instead of using the automatic black or white text color.
10. Notes and Limitations
Please note the following behavior:
- These 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 the text color of sale badges.
-
theme.label_text_colorcontrols custom product label text color per product. -
theme.label_text_colordoes not control sale badge text color. - Sale badge color and custom label color are controlled separately.
- The custom label text color works best when the product already has custom label text and a label background color configured.
Troubleshooting
If badge styling does not appear as expected, please check the following:
- Make sure you are using Be Yours version 9.4.0 or later.
- Check Theme settings > Product tiles > Badges.
- 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.
- If a custom label text color does not change, make sure the product has
theme.label_text_colorset. - Make sure the custom label uses
theme.label. - Make sure the custom label background color uses
theme.label_colorif you want a custom background. - If the metafield does not appear on products, check Settings > Metafields and metaobjects > Products.
- 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:
New Default Theme Look in Be Yours 9.4.0
Product Highlights Layouts