2️⃣ IMAGE BADGE

Steps to create a DECO image badge ✔️

To finish creating an image badge, you'll need to go through these 3 steps:

Examples Of The Image Badge

STEP 1: Design ✨

1. Customize The Badge Design

• Select your preferred badge style using one of these three simple methods:

1/ Choose from Library – Browse our professional templates gallery and pick the design that best fits your brand.

2/ Upload Your Own – Already have a custom design? Upload your image file to use as your badge.

3/ Create with AI – Describe what you want, and our AI will generate a custom badge design for you.

2. Select The Badge Position

First, choose display location:

• Inside product image: The badge will overlay on the product image

• Outside product image: The badge will appear outside the product image

Then, depending on your choice above, you'll see different positioning options:

3. Adjust The Badge Size

Choose 1 in 2 size options:

• Same size on all screens: Just 1- drag, the badge will be auto-adjusted to look good on the website

• Custom size per screen: Set different dimensions for each device (Desktop/Mobile) and page type (Collection/Product page)

Size Units: You also can choose between Percentage (%) or Pixels (px)

NOTE: Size settings for Collection Pages automatically apply to Home Page and Search Page.

4. Choose Display Devices

Tick to select which devices will show the badge:

5. Customize other Settings For The Badge

You can add animation, rotate the badge,... or use CSS code to make your badge look more stunning!

STEP 2: Products 🏷️

(Define which products should display your badges)

Option I - Specific products

• Manually select individual products to showcase your badge.

⇒ Choosing this option ensures the badge appears only on the selected items.

NOTE: The app can't detect products in draft/archived status OR not published on the Sale channel

Option II - All products

• With 1-click, the badge will be applied to all active products.

Option III - Automated Conditions

Automatic conditions, which save much of your time

NOTE: Before selecting any conditions, please choose the matching condition first:

• All conditions: The badge will ONLY APPEAR ON PRODUCTS that MEET EVERY SINGLE CONDITION you selected in the app.

• Any conditions: The badge WILL APPEAR ON PRODUCTS that MEET AT LEAST 1 OF THE CONDITIONS you selected in the app.

👉 Example:

Say you select these conditions:

• Product collection = "Electronics"

• In stock

🛠️ With "All conditions": A product must be in the Electronics collections AND be in stock to show the badge.

🛠️ With "Any conditions": A product only needs to meet one requirement—it could belong to the collection: Electronics OR be in stock to show the badge.

⚙️Basic Conditions

You can set up base on:

• The weight range,

• The price range

• The product title

⇒ Your badge will automatically detect & show on products meeting the requirements.

🔁 Advanced Conditions

1. Product collections

• Click "Select collections" and choose the specific collections where you want the badge to appear.

⇒ The badge will automatically display on all products within selected collections.

2. Product tags

• Enter your Shopify product tag(s) in the box, and click "Add"

⇒ The badge will automatically appear on all products assigned to these tags.

NOTE: Remember to select 1 meeting condition: At least one OR All

3. Discount

• Click "Select discount", then choose a pre-existing discount from your Shopify admin in the list and click "Save"

⇒ The badge will automatically appear on all products that meet the specific conditions of that discount.

4. Compare-at price

Choose either "Fixed value" OR "Value range" then enter your desired amount.

⇒ The badge will display on products that fall within your specified discount criteria.

NOTE: Don't forget to click on the gear icon to select the discount setting.

5. Exclude collections

• Select this condition will hide the badge for all products in your chosen collection(s).

6. Exclude tags

• Products with the entered tag(s) will not display the badge.

7. New status

• Select 1 type of status, then click on the gear icon to set up the condition

⇒ The badge will only display on products CREATED WITHIN THAT TIMEFRAME.

8. Inventory status

• Select 1 type of status, then click on the gear icon to set up the inventory condition.

⇒ The badge will display only on products meeting the condition.

NOTE: Products with "Inventory not tracked" won't be counted for this condition

9. Include products

• If you've selected the "Product collections" condition but want to also display the badge on additional products outside those collections, use this condition to specify them.

10. Exclude products

• To exclude specific products within selected collections from the badge display, use this condition.

11. Add a matching metafield

(This will help connect your PRODUCT METAFIELD with the DECO's BADGE >> Then, show the badge on products with the matching value)

• First, click on the button "+ Add metafield" to start connecting

• Next, a list of all product metafields in your store will appear, check the corresponding box to select >> Then, click "Select" button

• After, select either:

Exists: Show on all products that have the metafield value filled in (any value).

Equal to: Show only on products with the exact value entered.

For example:

↪ Selected option: Exists

• Metafield key: Plant type

• Option: Exists

• Result: The badge will show on every product that has any Plant type value (e.g., "Indoor Only", "Outdoor", "Shade Loving", etc.).

↪ Selected option: Equal to

• Metafield key: Plant type

• Option: Equal to

• Value entered: Indoor Only

• Result: The label will show only on products with Plant type = Indoor Only.

→ Besides, if you want to show the value of the metafield on the badge, please visit this metafield's common use cases 🥰

12. Specific product variants

• This condition will help you choose which specific variant(s) you would like to show the badge on

STEP 3: DISPLAY 📅

(This is the place to set up the display condition for your badge)

1. Page display

• Check for pages you would like to display the badge

For other pages such as pages from Themes, and other pages built by other page builder apps(PageFly, Ecomposer,...), kindly contact us via the live chat for the quickest setup.

2. Show badge on store languages

• Select which languages you would like the badge to display by choosing either:

1/ All Languages: The badge will display whatever the language is

2/ Custom languages: Tick for the languages in the DECO app, and the badge will ONLY display when customers choose the corresponding language on the website

3. Customer country

Here, you can either select to display/NOT display your badge for customers from selected countries

⇒ The app will base on the IP address of customers to display/NOT display the label.

👉 Example,

When you select "Include" + Choose 3 countries: Belgium, Bermuda & Brazil

⇒ Then only customers coming from these 3 countries can see the badge.

4. Customer condition

Choose which types of customers can see the badge:

5. Schedule

• By choosing the start date & end date, you can schedule when your badge will appear on your website.

6. Priority

• By typing the number in the box, it helps control the display order of the badge when multiple badges are applied to the same item

⇒ Preventing overlap and ensuring high-priority badges remain visible.

Please refer to some special cases you might meet when using this feature with this link