# DECO Badge Group

## 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:**&#x20;

<figure><img src="/files/Km6DYvCXlwavyj6VDiFP" alt=""><figcaption></figcaption></figure>

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

**For example:**&#x20;

<figure><img src="/files/9NdZm58bBX5qllHRBCQ5" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/kCoUi1WqHdaNKngdDH5j" 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="/files/55v2gkIrwa7Ns02mm52b" 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"***

<figure><img src="/files/11hC2gLTz3yX6Dkb7vDP" alt=""><figcaption></figcaption></figure>

### ✨Step 3: Create Badge Group

* First, select the position you need first:&#x20;

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

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

<figure><img src="/files/q23qrJGSm8RWq3OByu8Y" 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="/files/l3qOSXg6mMpXAidMWgM6" alt=""><figcaption></figcaption></figure> <figure><img src="/files/PtMzWxtCenJzAhMj5JYj" 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!&#x20;

<figure><img src="/files/clYRlwZ9zWbhbub6tXUY" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/lgIMG4GslIOcMEAbgoqY" 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&#x20;

<figure><img src="/files/oFk7hsBEBwLxts8BzG4G" 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="/files/XiB4ttBe3Ac8U0Kj4bON" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://deco-product-labels-and-badges-1.gitbook.io/deco-guidelines/our-features/deco-badge-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.