> For the complete documentation index, see [llms.txt](https://deco-product-labels-and-badges-1.gitbook.io/deco-guidelines/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://deco-product-labels-and-badges-1.gitbook.io/deco-guidelines/our-features/deco-badge-group.md).

# DECO Badge Group

This is our EXCLUSIVE feature to help manage multiple badges on the same product.

## How Badge Group Works

* **Without Badge Group**\
  Badges are positioned individually, requiring manual spacing adjustments, risking overlap, and inconsistent spacing.
* **With Badge Group**\
  Badges automatically stack and adjust position when others are removed (**SMART POSITIONING**)

⇒ *Instead of manually positioning each badge, this will <mark style="color:blue;">**automatically organize them with proper spacing and alignment.**</mark>*

### 💥 <mark style="color:blue;">**Avoid The Badge Overlapping**</mark>

**For example:**

<figure><img src="https://2681927162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2MNif3OucL2KXUvJtdd3%2Fuploads%2FkYLv5EZ2wXN6bWSIbEYW%2Fimage.png?alt=media&amp;token=17bd25b6-11ce-4f9e-8da7-f62a6f78fa18" alt=""><figcaption></figcaption></figure>

### 💥 <mark style="color:blue;">**Avoid The "Awkward Position"**</mark>

**For example:**

<figure><img src="https://2681927162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2MNif3OucL2KXUvJtdd3%2Fuploads%2FjPpamktOw0XjQqqt1wqR%2Fimage.png?alt=media&amp;token=dc870e12-807b-47fb-8b8e-c6dcdd9fe45f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2681927162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2MNif3OucL2KXUvJtdd3%2Fuploads%2Fcwovn1r7sJ6PL8j5FpSf%2Fimage.png?alt=media&amp;token=158bb56d-3a94-4ebc-a6d8-68760789d35a" alt=""><figcaption></figcaption></figure>

## Setup Guideline

### ✨Step 1: Create Individual Badges <a href="#step-1-create-individual-labels" id="step-1-create-individual-labels"></a>

* If you haven't had any badges yet >> Then, you'll need to create them first **( Or skip this step if you already have at least 2 badges created )**

<figure><img src="https://2681927162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2MNif3OucL2KXUvJtdd3%2Fuploads%2FsKqeL60v9SB633XadEZp%2Fimage.png?alt=media&amp;token=b163f26b-c684-43b0-900e-1c60e9c78917" alt=""><figcaption></figcaption></figure>

### ✨Step 2: Access Badge Group <a href="#step-2-access-label-group" id="step-2-access-label-group"></a>

* Navigate to the "***Badge Group***" section in the navigation menu >> **Click&#x20;*****"Create group"***

{% hint style="info" %}
Available from the **Growth** plan (1 active group). The **Unlimited** plan allows unlimited groups.
{% endhint %}

<figure><img src="https://2681927162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2MNif3OucL2KXUvJtdd3%2Fuploads%2FwRAkHt8GDvVw1Xn6ajCu%2Fimage.png?alt=media&amp;token=500383ce-95db-40a8-999c-4c744e10c575" alt=""><figcaption></figcaption></figure>

### ✨Step 3: Create Badge Group

* First, select the position you need first:

1/ <mark style="color:$primary;">**Inside product image**</mark>

2/ <mark style="color:$primary;">**Outside product image**</mark>

<figure><img src="https://2681927162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2MNif3OucL2KXUvJtdd3%2Fuploads%2FcLNLZS7fsPeGNyZaw0zI%2Fimage.png?alt=media&amp;token=7971cca7-07b0-4233-ba6f-14f4f3f24395" alt=""><figcaption></figcaption></figure>

* Click *<mark style="color:blue;">**"Add badges to group"**</mark>* - depending on the selected position, the corresponding badge list will appear.
* *<mark style="color:blue;">**Check the badge(s)**</mark>* you want to select, then *<mark style="color:blue;">**click "Done"**</mark>* to save.

<div><figure><img src="https://2681927162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2MNif3OucL2KXUvJtdd3%2Fuploads%2FCH8ihV8Q9RYSHGCYJQHS%2Fimage.png?alt=media&amp;token=dc0e6e5b-df11-483c-af35-a985aafeb894" alt=""><figcaption></figcaption></figure> <figure><img src="https://2681927162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2MNif3OucL2KXUvJtdd3%2Fuploads%2FuqTnzylhTXMLemf7t6z4%2Fimage.png?alt=media&amp;token=145ab044-6035-4ad1-8fa0-efa51b877336" alt=""><figcaption></figcaption></figure></div>

### ✨Step 4: Customize Badge Design

* Here, you can *<mark style="color:blue;">**change**</mark>* the *<mark style="color:blue;">**badge group's position**</mark>*, *<mark style="color:blue;">**design type**</mark>*, *<mark style="color:blue;">**adjust spacing**</mark>*, *<mark style="color:blue;">**use CSS**</mark>*, etc to make your badge group look more stunning!
* For groups *<mark style="color:blue;">**inside product image**</mark>*, the position can be one of the 4 corners: ***Top left, Top right, Bottom left, Bottom right***.
* ***This position setting overrides individual badge positions.***

<figure><img src="https://2681927162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2MNif3OucL2KXUvJtdd3%2Fuploads%2FsUS3sN1wNnnxa1tl39yc%2Fimage.png?alt=media&amp;token=a9a36047-9e09-4ae8-963c-90356e4f3feb" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2681927162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2MNif3OucL2KXUvJtdd3%2Fuploads%2FsMXkaLPMBL61CzJv8wUD%2Fimage.png?alt=media&amp;token=49ee2307-cac9-4ce7-ac6f-8cc68a244f2f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
NOTE: The app *<mark style="color:blue;">**automatically shows/hides badges based on whether products meet the display conditions**</mark>*.
{% endhint %}

### ✨Step 5: Preview & Publish <a href="#step-5-preview-and-publish" id="step-5-preview-and-publish"></a>

* Click **"Save"** to apply changes

<figure><img src="https://2681927162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2MNif3OucL2KXUvJtdd3%2Fuploads%2FRIRrWeNVwnFMb3cvpzJv%2Fimage.png?alt=media&amp;token=ac8a1f56-70e7-4b78-b672-9cd3f7334c6f" alt=""><figcaption></figcaption></figure>

* Then, <mark style="color:blue;">**click "View on store"**</mark> to *<mark style="color:blue;">**see how it look on the website**</mark>* or click <mark style="color:blue;">**"Fix it now!"**</mark> if you notice any display problem that not as expected.

<figure><img src="https://2681927162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2MNif3OucL2KXUvJtdd3%2Fuploads%2F2m50DD53JC1efYUufr4l%2Fimage.png?alt=media&amp;token=2ba5f115-d142-42f6-b830-938286945540" alt=""><figcaption></figcaption></figure>