Highlight Groups let you split Highlights across multiple locations on a product page — instead of showing everything in one cluster.
Before You Begin
- Highlight Groups are available on the Pro Plan and above.
- Create Highlights and assign them to groups in the app dashboard.
- Add separate integration code (or app blocks) for each group location in your theme.
How Highlight Groups Work
As an example, you can show one group of Highlights below the product title and a different group above the product description.
For each Highlight group, add a one-line integration code at the location where that group should appear. Use the smarthGroup parameter to specify the group number.
Step-by-Step Instructions
Step 1: Assign Groups in the Dashboard
- Open the Smart App and go to Highlights.
- When creating or editing a Highlight, assign it to Group 1, Group 2, or Group 3.
- Click Save.
Step 2: Add Integration Code for Each Group
Group 1 (default — used when smarthGroup is omitted):
{% render 'smarth', product: product, smarthGroup: '1', smarthOuterClass: 'smart-mt-4 smart-mb-4' %}
Group 2 (example — above product description):
{% render 'smarth', product: product, smarthGroup: '2', smarthOuterClass: 'smart-mt-4 smart-mb-4' %}
Group 3:
{% render 'smarth', product: product, smarthGroup: '3', smarthOuterClass: 'smart-mt-4 smart-mb-4' %}
Expected Result
Each Highlight group appears at its designated location on the product page — up to 3 groups per page.
Important Notes
- If the
smarthGroupparameter is not added, Group 1 Highlights display by default. - A maximum of 3 groups can be displayed per page.
- Highlight Groups require a Pro Plan or higher.
Frequently Asked Questions
Can I get help adding group code to my theme?
Yes! Raise a support ticket or email us at [email protected] and our team will take care of it.