The Product Highlights block in the Be Yours theme allows you to display short product highlights on the product page. Each highlight can include a label, a value, and an optional icon.
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, or key benefits.
The block uses the product metafield:
theme.highlights
How to setup Product Highlights Block
STEPS:
1. Understanding How Product Highlights Work
The Product Highlights block reads data from the product metafield:
theme.highlights
Each highlight item should follow this format:
Label | Value | Icon
The theme separates each item into three parts:
| Part | Description | Required |
|---|---|---|
| Label | Small label displayed below the value. | Optional, but recommended |
| Value | Main highlight text displayed prominently. | Required |
| Icon | Optional theme icon displayed before the value. | Optional |
Example:
Material | Organic cotton | leaf
This will display:
| Label | Value | Icon |
|---|---|---|
| Material | Organic cotton | leaf |
If the value is missing, that highlight item will not display.
2. Creating the Product Highlights Metafield
Before using the block, create a product metafield for highlights.
-
From your Shopify admin, go to Settings > Metafields and metaobjects.
-
Click Products.
-
Click Add definition.
-
Add the metafield name.
Example:
Product Highlights -
Set the namespace and key:
theme.highlights -
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, the Product Highlights block will not be able to read the data.
3. Adding 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 one highlight item per line/value.
-
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.
4. Adding 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.
Recommended position:
| Position | Reason |
|---|---|
| Below the price | Good for quick product benefits. |
| Below the buy buttons | Good for shipping, warranty, and trust highlights. |
| Above the description | Good for key product specifications. |
The Product Highlights block will only appear if the current product has values in the theme.highlights metafield.
5. Formatting 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
However, for the best display, we recommend using all three parts when possible.
6. Available Icon Names
The Product Highlights block uses the theme's built-in icons. The icon name is added as the third part of the highlight item.
Example:
Shipping | Free shipping | truck
Common icon names include:
Available icon names:
| 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.
7. Product Highlights Block Settings
The Product Highlights block includes color and spacing settings.
Use custom colors
Enable this option if you want to use custom colors for the highlight items.
When enabled, the block uses the selected text and background colors.
Text color
Controls the highlight text color.
Default:
#000000
Background color
Controls the highlight background color.
Default:
#f4f4f4
Padding top
Adds spacing above the Product Highlights block.
Default:
0px
Padding bottom
Adds spacing below the Product Highlights block.
Default:
0px
Settings summary:
| Setting | Description |
|---|---|
| Use custom colors | Enables custom text/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. |
8. Recommended Highlight Examples
You can use Product Highlights for different types of stores.
Fashion products
Material | Organic cotton | leaf
Fit | Relaxed fit | shirt
Care | Machine washable | washing
Shipping | Free shipping | truck
Beauty products
Texture | Lightweight | lipstick
Skin type | All skin types | heart
Formula | Plant-based | plant
Size | 50ml | bottle
Food products
Diet | Gluten free | gluten_free
Ingredients | Plant-based | plant
Serving | Ready to serve | serving_dish
Storage | Keep refrigerated | snowflake
General products
Warranty | 2 years | lock
Delivery | Fast shipping | truck
Returns | Easy returns | return
Quality | Premium grade | star
9. Recommended Setup
For most products, we recommend using 3–5 highlights.
Recommended structure:
| Highlight | Example |
|---|---|
| Material or formula | `Material |
| Main benefit | `Benefit |
| Care or usage | `Care |
| Shipping or returns | `Shipping |
| Warranty or guarantee | `Warranty |
Tips:
- Keep the Value short and easy to scan.
- Use consistent labels across similar products.
- Use icons only when they add meaning.
- Avoid very long highlight text.
- Use the same metafield format for all products.
10. Notes and Limitations
Please note the following behavior:
- The block only displays if
theme.highlightshas content. - Each highlight item must include a value.
- The block supports multiple highlight items through a list metafield.
- The separator between label, value, and icon must be the pipe character:
|. - The icon is optional.
- The 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 theme icon, the icon may not display correctly.
Troubleshooting
If the Product Highlights block does not display correctly, please check the following:
- 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 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.
بانٹیں:
Product Template Guide
Store Locator Section