Step 1: Select/Design Badges

You can either use DECO pre-designed labels or create your own

1. Choose/ Upload Designs

1.1. Image Badge:

In the Image Badge section, you will have 2 options:

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

• 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.

1.2. Text Badge

In text badge, you can choose:

• Upload background > to upload your own shape/ design

• Choose from gallery > to use DECO shape

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

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

2. Choose Position + Margin + Size

2.1. Position

You can choose 1 in 3 element positions:

• Below product title

• Below product price

• Below product image

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

2.2. Margin

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

2.3. Size

• You can choose 1 in 3 basic sizes: S, M, L or "Customize size"

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

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.

• Auto text options: Here are automatic condition for your badges.

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%)

3.1. Border

With this, you can choose 1

4. Animation + Rotation + Opacity + CSS code

4.1. Animation

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

4.2. Rotation

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

4.3. CSS Code

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