What Are Product Highlights
Product highlights are key properties, or features, of a product. You can find them on a product's Properties tab (under the section called 'Highlighted') in the backend.
On the frontend they look like this:
Highlight Property Naming
To output the highlights correctly they must be named as follows:
If these need to be changed please let us know, as it will require some work on our part for the changes to work on the frontend.
NON METALLIC TOE
The property names are used for the titles on the frontend.
Add Background Image To Highlights Properties
Please Note - Highlights will not display unless they have a background image.
Items > Properties and navigate through to the 'Highlighted' options.
Click on the pencil (edit) icon of each property and add a background image.
Important note on background images:
The background image name has to correspond with the icon class name used on the frontend. For example if the image name is
water-resistant.jpg it will have an automatic property called 'description' with a value of
This value is used in the code to add the icon CSS class on the frontend, e.g.
icon__element-water-resistant-white, as well as being used to associate the description paragraph (see below). The image name has to correspond with an existing icon or it will not show the icon.
Add Description Paragraphs
The descriptions under the highlight titles are snippets. You can find them under
Configuration > Snippets, then
The snippets will be automatically created as users visit the pages, but you will probably want to set them up in advance so the Value contains the correct description text.
The format for these snippets is as follows:
- Namespace -
- Name -
ProductHighlights_[description](lowercase, hyphens instead of spaces, following the same naming convention as above) (see also important note above)
- Value - The visible description text on the frontend