Badges can be assigned to different groups and each group can be placed at a different location on the product (or collection) page. Instead of displaying all the badges together in one cluster, Badge Groups gives you the flexibility to display badges at different locations for the same product.
As an example, you can show a group of badges below the product title, and a group of different badges on the top left corner of the product image.
For each badge group, you will have to add a 1-line integration code at the location where the badge group needs to be displayed. In the integration code, add the 'smarthGroup' parameter to specify the badge group number.
Example integration code for badge group 2:
{% render 'smartb', product: product, hideAssets:'1', smartbGroup: '2', smartbOuterClass:'smart-d-inline-block', smartbOuterStyle:'position:absolute; right:0px; top:0px; z-index:1;', smartbInnerStyle:'', smartbInnerClass: 'smart-d-block smart-mr-1 smart-mb-1' %}The above code will add the badge group 2 on the top right border of the product image.
Similarly, you can add the integration code for badge group 1 and group 3. If you are not comfortable adding the code simply raise a support ticket here or email us at [email protected] and we will take care of it.
If the 'smarthGroup' parameter is not added to the integration code, then the badges of group 1 will be displayed by default.
Then simply assign a group while adding or updating badges.
Currently, a maximum of 3 groups can be displayed per page.
Product groups are available for Pro plan users only.