Since Be Yours version 9.0.0, the Product Highlights block lets you display short product specs on product pages and product cards. Each highlight can include a label, a value, and an optional icon.
On product page
On product cards
This block is useful for showing important product information in a compact and easy-to-scan layout, such as material, fit, shipping, warranty, origin, care instructions, size, finish, skin type, coverage, capacity, or key benefits.
The block uses the product metafield:
theme.highlights
STEPS:
1. Understanding How Product Highlights Work
Product Highlights reads data from the product metafield:
theme.highlights
Each highlight item should follow this format:
Label | Value | Icon
The item is separated into three parts:
| Part | Description | Required |
|---|---|---|
| Label | Small label displayed below or beside the value. | Optional |
| Value | Main highlight text. | Required |
| Icon | Optional icon displayed with the highlight. | Optional |
Example:
Material | Organic cotton | leaf
This can display:
| Label | Value | Icon |
|---|---|---|
| Material | Organic cotton | leaf |
Important:
- If the value is missing, that highlight item will not display.
- The label and icon are optional.
- The separator must be the pipe character:
|.
2. Create the Product Highlights Metafield
Before using Product Highlights, create a product metafield.
- From your Shopify admin, go to Settings > Metafields and metaobjects.
- Click Products.
-
Click Add definition.
-
Add the metafield name.
Product Highlights -
Set the namespace and key:
theme.highlights -
If Shopify auto-recommends a Namespace and key, click the suggested value to edit it.
-
Select Single line text as the content type.
-
Enable List of values.
-
Click Save.
Recommended metafield setup:
| Field | Value |
|---|---|
| Name | Product Highlights |
| Namespace and key | theme.highlights |
| Content type | Single line text |
| List of values | Enabled |
Important:
The namespace and key must be exactly:
theme.highlights
If the namespace or key is different, Product Highlights will not be able to read the data.
3. Add Highlight Values to a Product
After creating the metafield, add highlight values to each product.
-
From your Shopify admin, go to Products.
-
Open the product you want to edit.
-
Scroll down to the Metafields area.
-
Find Product Highlights.
-
Add each highlight as a separate list item.
-
Use the following format:
Label | Value | Icon -
Click Save.
Example highlight values:
Material | Organic cotton | leaf
Fit | Relaxed | shirt
Shipping | Free shipping | truck
Care | Machine washable | washing
Each item becomes one highlight on the product page or product card, depending on your settings.
4. Add the Product Highlights Block to the Product Template
To display Product Highlights on the product page, add the Highlights block to the Product information section.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit and click Customize.
- Open the product template, such as Default product.
- Open the Product information section.
- Click Add block.
- Select Highlights.
- Move the block to the desired position.
- Click Save.
The Product Highlights block will only appear if the current product has values in the theme.highlights metafield.
5. Format Highlight Items
Each highlight item should use this format:
Label | Value | Icon
Examples:
| Highlight item | Result |
|---|---|
| `Material | Organic cotton |
| `Shipping | Free shipping |
| `Warranty | 2 years |
| `Care | Machine washable |
You can also use highlights without an icon:
Material | Organic cotton |
Or without a label:
| Free shipping | truck
Important:
- The Value should not be blank.
- The Icon is optional.
- Keep values short so they are easy to scan.
6. Available Layout Styles
Be Yours 9.4.0 adds more layout styles for Product Highlights.
Available styles:
| Style | Description |
|---|---|
| Strip | Displays specs in a compact horizontal strip. |
| Chips | Displays specs as small chip-style tags. |
| Chips — grid | Displays specs in a structured grid. |
| Pills | Displays specs as rounded pills. |
| Spec sheet | Displays specs like specification rows with dotted leaders. |
Use these styles to match the visual purpose of the section.
| Style | Best for |
|---|---|
| Strip | Compact product card specs |
| Chips | Short benefits or tags |
| Chips — grid | Multiple specs in a neat layout |
| Pills | Rounded badge-style highlights |
| Spec sheet | More detailed product specifications |
7. Choose the Product Card and the Product Page Specs Style
Product card highlight layouts are controlled from Theme settings.
To choose the style:
- 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 Product specs.
- Open Specs style. For product card
- Open Specs style — product page. For Product page
- Choose a style.
- Click Save.
Available styles:
| Style |
|---|
| Strip |
| Chips |
| Chips — grid |
| Pills |
| Spec sheet |
This setting controls the default Product Highlights style on product cards.
8. Add Product Highlights to Product Cards
Product Highlights only appear on product cards when they are enabled in the related section.
From the product card settings, enable Show product highlights.
Common sections can include:
- Collection product grid
- Featured collection
- Product recommendations
- Recently viewed products
- Search results
- Tabbed collections
- Shop the look
To enable Product Highlights in a section:
- Open the section in the Theme Editor.
- Find the product card settings.
- Enable Show product highlights.
- Click Save.
Important:
- The product must have values added to the
theme.highlightsmetafield. - If a product has no highlight values, no highlights will appear for that product.
- Product cards use the global Specs style from Theme settings unless the section has its own style override.
9. Override the Style in Featured Collection
The Featured collection section can override the global Product Highlights style.
This is useful when you want a specific Featured collection row to become a spec-focused showcase.
To override the style:
- Open the Featured collection section.
- Enable Show product highlights.
- Open Specs style.
- Choose the style for that section.
- Click Save.
Available options:
| Option | Behavior |
|---|---|
| Follow product cards | Uses the global Product specs style from Theme settings. |
| Strip | Uses the Strip style only for this Featured collection section. |
| Chips | Uses the Chips style only for this Featured collection section. |
| Chips — grid | Uses the grid style only for this Featured collection section. |
| Pills | Uses the Pills style only for this Featured collection section. |
| Spec sheet | Uses the Spec sheet style only for this Featured collection section. |
This override affects only that Featured collection section.
10. How Scrolling Layouts Work
Some layouts are designed for compact product cards and can scroll through overflowing specs.
Scrolling behavior applies to:
| Style | Behavior |
|---|---|
| Strip | Specs glide horizontally when the pointer rests on the product card. |
| Chips | Specs glide horizontally when the pointer rests on the product card. |
Non-scrolling layouts:
| Style | Behavior |
|---|---|
| Chips — grid | Shows specs in a structured grid. |
| Pills | Shows specs as rounded badges. |
| Spec sheet | Shows specs as rows with dotted leaders. |
This keeps compact layouts dynamic while making grid, pill, and spec sheet layouts stable and easy to read.
11. Product Highlights Block Settings
The Product Highlights block on the product page includes style, color, and spacing settings.
Settings summary:
| Setting | Description |
|---|---|
| Use custom colors | Enables custom text and background colors. |
| Text color | Sets the highlight text color. |
| Background color | Sets the highlight background color. |
| Padding top | Adds spacing above the block. |
| Padding bottom | Adds spacing below the block. |
Custom colors only apply when Use custom colors is enabled.
12. Available Icon Names
Product Highlights can use built-in icon names. Add the icon name as the third part of the highlight item.
Example:
Shipping | Free shipping | truck
Common icon names include:
| Icon name |
|---|
3d-model |
account |
arrow |
arrow-right |
arrow-right-wide-line |
arrow-left-wide-line |
back |
bag |
caret |
cart |
checkmark |
chevron |
chevron-alt |
clipboard |
close |
close-alt |
discount |
drag |
error |
error-red |
filter |
gift |
grid |
grid-2 |
grid-3 |
grid-4 |
hamburger |
heart |
horizontal-dots |
house |
images |
info |
list |
localization |
minus |
nav |
pause |
pen |
play |
play-alt |
play-solid |
play-circle |
plus |
question |
remove |
ruler |
search |
search-alt |
share |
share-nodes |
spinner |
success |
tick |
truck |
unavailable |
zoom |
If the icon name is blank, no icon will be displayed.
13. Notes and Limitations
Please note the following behavior:
- Product Highlights are available in Be Yours version 9.0.0 or later.
- Product Highlights layout styles are available in Be Yours version 9.4.0 or later.
- Product Highlights use the product metafield
theme.highlights. - Each metafield item should use the format
Label | Value | Icon. - The Value part is required.
- The Label and Icon parts are optional.
- Product Highlights do not appear if the product has no metafield values.
- Product card highlights must be enabled in the related section with Show product highlights.
- The global product card style is controlled from Theme settings > Product tiles > Product specs > Specs style.
- The product page style is controlled from Specs style — product page.
- The product page can follow product cards or use its own style.
- Featured Collection can override the style per section.
- Strip and Chips layouts can glide through overflowing specs when the pointer rests on a product card.
- The Product Highlights block has a limit of one per Product information section.
- Custom colors only apply when Use custom colors is enabled.
- If the icon name does not match a supported icon, the icon may not display correctly.
- Product Highlights are visual product information only. They do not control variants, filters, inventory, or product options.
Troubleshooting
If Product Highlights do not display correctly, please check the following:
- Make sure you are using Be Yours version 9.0.0 or later.
- To use the new layout styles, make sure you are using Be Yours version 9.4.0 or later.
- Make sure the Highlights block has been added to the Product information section.
- Make sure the product has values in the
theme.highlightsmetafield. - Make sure the metafield namespace and key are exactly
theme.highlights. - Make sure the metafield is set as a list of single line text values.
- Make sure each highlight item uses the correct format:
Label | Value | Icon. - Make sure the value part is not blank.
- If Product Highlights do not appear on product cards, enable Show product highlights in the related section.
- If the product page uses the wrong style, check Specs style — product page.
- If a Featured Collection section uses the wrong style, check the section's Specs style setting.
- If the scrolling effect does not happen, check whether the selected style is Strip or Chips.
- If an icon does not display, check that the icon name is valid.
- If custom colors do not apply, make sure Use custom colors is enabled.
- If spacing looks incorrect, adjust Padding top and Padding bottom.
- 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.
بانٹیں:
Be Yours Product Template Guide
Store Locator Section