Be Yours 9.4.0 adds more layout styles for Product highlights.
Product highlights are short product specs pulled from the product metafield and displayed on product cards or product pages. They are useful for showing quick product details such as size, finish, material, skin type, coverage, capacity, or key benefits.
New layout styles include:
| Style | Best for |
|---|---|
| Strip | Compact horizontal specs |
| Chips | Small tag-style specs |
| Chips — grid | Multiple specs in a structured grid |
| Pills | Rounded spec badges |
| Spec sheet | Specification rows with dotted leaders |
Steps:
1. Understanding Product Highlights
Product highlights display product specs from a product metafield.
Each product can have its own list of highlights.
Example product highlights:
| Label | Value |
|---|---|
| Skin type | Dry |
| Finish | Glow |
| Size | 50ml |
| SPF | 30 |
On the storefront, these highlights can appear as compact specs on product cards or as a product highlights block on the product page.
2. Create the Product Highlights Metafield
To use Product highlights, create a product metafield first.
- From Shopify admin, go to Settings > Metafields and metaobjects.
- Open Products.
- Click Add definition.
- Enter the name, for example Product highlights.
- Set Namespace and key to
theme.highlights. - If Shopify auto-recommends a Namespace and key, click the suggested value to edit it.
- Set the type to Single line text.
- Enable List of values.
- Click Save.
Each highlight item should use this format:
Label|Value
You can also add an optional icon:
Label|Value|icon
Examples:
Skin type|Dry
Finish|Glow
Size|50ml
SPF|30|sun
Important:
- Use one highlight per list item.
- Use the vertical bar
|to separate the label, value, and optional icon. - The icon is optional.
- If you use an icon, the icon name must match an icon supported by the theme.
3. Add Highlights to a Product
After creating the metafield, add highlight values to products.
- From Shopify admin, go to Products.
- Open the product you want to edit.
- Scroll to the Metafields area.
- Find Product highlights.
- Add each highlight as a separate list item.
- Click Save.
Example:
Coverage|Medium
Finish|Natural
Skin type|All skin types
Size|30ml
These values can then display on product cards or on the product page, depending on your theme settings.
4. Choose the Product Card 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.
- Choose a style.
- Click Save.
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 grid layout. |
| Pills | Displays specs as rounded pills. |
| Spec sheet | Displays specs like specification rows with dotted leaders. |
5. Choose the Product Page Specs Style
The product page can follow the product card style or use its own style.
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 Product tiles.
- Find Product specs.
- Open Specs style — product page.
- Choose a style.
- Click Save.
Available options:
| Option | Behavior |
|---|---|
| Follow product cards | Uses the same style selected in Specs style. |
| Strip | Uses the Strip style on product pages. |
| Chips | Uses the Chips style on product pages. |
| Chips — grid | Uses the grid style on product pages. |
| Pills | Uses the Pills style on product pages. |
| Spec sheet | Uses the Spec sheet style on product pages. |
Use Follow product cards if you want one consistent look across product cards and product pages.
Choose a separate style if you want product pages to show more detailed specs.
6. Show Product Highlights on Product Cards
Product highlights only appear on product cards when they are enabled in the related section.
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.
- The product card style follows Theme settings > Product tiles > Product specs > Specs style, unless the section has its own override.
7. Override the Style in Featured Collection
The Featured collection section can override the global Product specs 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.
8. Add Product Highlights to the Product Page
To show highlights on the product page:
- From Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Open a product template.
- Open the Main product section.
- Add or enable the Product highlights block.
- Click Save.
The product page layout follows Specs style — product page from Theme settings.
If Specs style — product page is set to Follow product cards, the product page uses the same style as product cards.
9. 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 makes compact layouts feel more dynamic while keeping grid, pill, and spec sheet layouts stable and easy to read.
10. Notes and Limitations
Please note the following behavior:
- These layout options 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|ValueorLabel|Value|icon. - 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.
- Product highlights are visual product information only. They do not control variants, filters, inventory, or product options.
Troubleshooting
If Product highlights do not appear as expected, please check the following:
- Make sure you are using Be Yours version 9.4.0 or later.
- Make sure the product has values added to the
theme.highlightsmetafield. - Make sure each highlight item uses the correct format:
Label|ValueorLabel|Value|icon. - If highlights do not appear on product cards, enable Show product highlights in the related section.
- If the product page highlights do not appear, add or enable the Product highlights block in the product template.
- 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 appear, check that the icon name is supported by the theme.
- 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.
بانٹیں:
Badge Styling and Label Text Colors