# Step 1: Select/Design Badges

## 1. Choose/ Upload Designs

### <mark style="background-color:blue;">1.1. Image Badge:</mark>

In the **Image Badge** section, you will have 2 options:&#x20;

* Click  ***Upload Images*** to upload your own designs, or ***Choose from gallery*** to use DECO templates

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

* If you click on ***Choose from gallery*** > you can find kinds of template you want by *entering its name* (e.g. Sale, Pre, Free, %, etc) > Click on **"*****Use template*****"** to use it.

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

### <mark style="background-color:blue;">1.2. Text Badge</mark>

In text badge, you can choose:&#x20;

* **Upload background** > to upload your own shape/ design&#x20;
* **Choose from gallery** > to use DECO shape&#x20;

If you use DECO shape, you can choose color for that background by **clicking onto the round button** in ***"Background Color"***&#x20;

**NOTE:** If your text badges don't look good as you expected, chat with us for free customization. 🥰

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

## 2. Choose Position + Margin + Size

### <mark style="background-color:blue;">2.1. Position</mark>

You can <mark style="background-color:orange;">**choose 1 in 3**</mark> <mark style="background-color:yellow;">element</mark> positions:&#x20;

* ***Below product title***
* ***Below product price***
* ***Below product image***

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

Besides, you can also choose 1 in 3 dimensions your badge will display: Left, Middle or Right in ***"Predefined Position"***

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

### <mark style="background-color:blue;">2.2. Margin</mark>

* You can custom the predefined position of your badge by adjusting the margin

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

### <mark style="background-color:blue;">2.3. Size</mark>

* You can choose 1 in 3 basic sizes: **S, M, L** or **"Customize size"**&#x20;

**NOTE**: Now you can ***customize badge size separately** between* ***Collection page & Product page***, and between ***Desktop & Mobile*** by clicking on those buttons as below:

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

## 3. Custom text +text color + Border( Only for Text Badge)

* You can write whatever content you want to show on your badge in the ***"Label text" box*** as below
* Besides, you can choose text color by ***clicking on the color round button***, then **choose from the color picker,** or **copy the color code, and paste it** to the search box to apply it

NOTE: The **text font size will be different on mobile & desktop version for some devices,** so you can ***adjust it separately*** by clicking onto the ***"desktop"*** and ***"mobile"*** button.

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

* Auto text options: Here are automatic condition for your badges.&#x20;

Ex: ***Save percents***, SAVE {SAVE\_PERCENT}% (you can delete anything to make it most suitable for your preference, but ***please don't delete anything within {}***. E.g. {SAVE\_PERCENT}%

> this will automatically calculate the discounts of products, and display for your badge(e.g. Save 55%)

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

## <mark style="background-color:blue;">3.1. Border</mark>

With this, you can choose 1&#x20;

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

## 4. Animation + Rotation + Opacity + CSS code

### <mark style="background-color:blue;">4.1. Animation</mark>

* You can choose 1 in animation types here, it will also be reflected on the preview on your right side

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

### <mark style="background-color:blue;">4.2. Rotation</mark>

* You can drag the button to your preferred degree as you like, it will display on your store as in the preview

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

### <mark style="background-color:blue;">4.3. CSS Code</mark>

* If you have your dev team, this is where your dev team can add the code to custom your label

<figure><img src="/files/seIYZMe7ram7ENntivW6" 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.gitbook.io/product-labels-and-badges-guidelines/step-1-select-design-badges.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.