> 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/deco-product-labels-and-badges/how-to-create-labels/step-1-select-design-labels.md).

# Step 1: Select/Design labels

**1. IMAGE LABEL**

### 1.1 Select templates

* In the **Image Label** section, you will have 2 options: Click **Choose from library** to use DECO templates, or **Upload image** to upload your own designs&#x20;

**NOTE**: the label "Coming soon" is a default label, you can change it as you wish. Or click "**Chat with us now**" for more detailed explanation

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

### 1.2 Change positions & sizes

* Select **9 basic Positions** and 3 **Sizes(S, M, L)**

<mark style="background-color:orange;">**NOTE**</mark>**:**&#x20;

1. **Switch** between **Collection page and Product page button** to choose size differently for these 2 pages
2. **Switch** between **Desktop and Mobile button** to have **different size** for **mobile** and **desktop** device

\=>>>> The <mark style="background-color:green;">**size on Collection page will be the same for Home page, Search page**</mark>.

<figure><img src="/files/2BJxHnJvkSPk7ufhP1Nx" alt=""><figcaption></figcaption></figure>

* Or Click **Customize Position** and **Customize Size** to have a more flexible position/ size

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

## 2. TEXT LABEL

### 2.1 Choose background

* You can use our template backgrounds at **"Choose from library"**, or your own at **Upload image**

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

In **Background:**

* Choose **Custom Shapes** to extensively customize them (size, color, border,...)
* Choose **Image Shapes** to use a pre-design background

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

### 2.2 Change position and size

* **Position:** Choose from **9 basic positions** OR choose **"Customize position"** to have a more flexible position
* **Size**: Dragging the round button to **adjust the width and the height** of labels

<mark style="background-color:orange;">**NOTE**</mark>:&#x20;

1. **Switch** between **Collection page and Product page button** to have a **different label size** for these 2 pages <mark style="background-color:green;">( The</mark> <mark style="background-color:green;"></mark><mark style="background-color:green;">**label size**</mark> <mark style="background-color:green;"></mark><mark style="background-color:green;">on</mark> <mark style="background-color:green;"></mark><mark style="background-color:green;">**collection page**</mark> <mark style="background-color:green;"></mark><mark style="background-color:green;">will be the</mark> <mark style="background-color:green;"></mark><mark style="background-color:green;">**same**</mark> <mark style="background-color:green;"></mark><mark style="background-color:green;">on</mark> <mark style="background-color:green;"></mark><mark style="background-color:green;">**Home page & Search page**</mark> <mark style="background-color:green;"></mark><mark style="background-color:green;">)</mark>
2. Switch between **Desktop and Mobile button** to have a **different label size** on these **2  devices**

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

### **2.3 Enter your text**

You can add any text you want in **Label text**&#x20;

* **Dragging the round button** to adjust your **text's font size**(NOTE: **Don't** adjust the **text's size too big,** causing it's **too near the background,** it might miss some words when displaying on your online store)

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

If you want to create custom labels with **Auto text options**, click on the **box** beside the **Label text**

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

Choose the option you want. For example, **Save percents** will result like the screenshot below, and XX% will display based on each product discount

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

Note:

In **Auto text**, you can adjust any texts or symbols( e.g. change to Uppercase/ lowercase,..), but you **should not delete/modify anything in {}** for the best display result

In the **Text** section, you can also custom:

* Letter spacing
* Border
* Margin
* Animation
* Rotation
* Opacity
* CSS Code
