> For the complete documentation index, see [llms.txt](https://deco-product-labels-and-badges.gitbook.io/product-labels-and-badges-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.gitbook.io/product-labels-and-badges-guidelines/step-1-select-design-badges.md).

# 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>