Set up a badge group

A badge group lets you combine multiple badges and display them together outside the product image. You can control their order, layout, size, spacing, alignment, and placement on the storefront.

Before you begin, create and activate the badges you want to use in Badges & Labels. If you want the group to appear inside the product image instead, follow Set up a label groups.

Choose Inside product image or Outside product image before adding items. Switching between these two options clears the current selection.

Create a badge group

1. From Shopify admin, open Sami Product Labels > Badge groups.

2. Click Create badge group.

Open Badge groups and click Create badge group.

1. On the Design tab, select Outside product image.

2. In Label Selection, click Add badges to group.

3. Select the badges you want to include, then click Select.

Select the badges to include in the group.

After adding badges, you can drag them to change their display order.

Design the badge group

Configure the group in the Design section:

• Select layout: Display badges horizontally or vertically.

• Item size: Set the size in % or px.

• Label gap: Set the space between badges.

• Badge group replacement: Choose where the group appears outside the product image.

• Predefined position: Align the group to the left, center, or right.

• Margin: Adjust the top, bottom, left, and right spacing.

The preview updates as you change these settings.

Configure the layout, size, gap, placement, alignment, and margin.

Choose the storefront placement

In Badge group replacement, choose one of these positions:

• Below the product image

• Below the product title

• Below the product price

• Below the product quantity

• Below the Add to cart button

• Below the Buy now button

• Custom

If you choose Custom, enter a valid CSS selector (for example, an ID or class) for each page where the group should appear. Leave a page field empty if you do not want to use a custom selector on that page.

Use Custom to configure a different CSS selector for each page type.

Need help finding an ID or class in your theme? See Use ID/class to change the position of a badge/label on the front store.

Set the display conditions

1. Open the Placement tab.

2. Choose one of the following condition types:

   • Keep individual label conditions: Each badge is shown or hidden according to its own condition.

   • Set a custom group condition: The group condition overrides the individual badge conditions.

3. If you select a custom group condition, configure the products, collections, pages, customers, or other rules where the badge group should appear.

Keep the individual conditions or set one condition for the whole group.

For a detailed explanation and examples, see Label groups condition.

Save and check the result

1. Enter a name for the badge group.

2. Set the group to Active or Draft.

3. Click Save.

4. Open a matching product on your storefront and confirm that the badge group appears in the selected position.

Friendly reminder!

If you do encounter any difficulty while proceeding with these steps, don’t show any hesitation to contact us promptly via the email address [e-mail]

We are always willing to help with all sincerity!