How to Create an Image Badge/Label in the Labeler App

Want to highlight your products with labels like Promotional Badges, Pre-Purchase/Launch Badges, or Stock Status Badges?

The Labeler App makes it easy to add eye-catching badges to your product images using a large collection of ready-made designs. This helps your products stand out, attract more attention, and boost sales.

Open the App Dashboard.Click “Create Product Badges” under the Create section on the dashboard.

After selecting the type, a badge configuration screen will appear with the Image Badge option selected by default. Enter a badge title to get started.

Then, scroll down to choose an image badge from the collection.

Here, I have chosen the first image badge. You can select according to your preference.

 After selecting the image badge, click on Rules to assign the badge to products. Here, you can select the conditions where you want the Image Badge to appear. Once done, Click on save

General Style Settings

When creating an Image Badge, you’ll find several styling and positioning options. Here’s what each of them means and how to use them:

• Badge Position: Choose where the badge appears on the product image (top-left, top-right, bottom-left, bottom-right).
  
• Size Ratio: Adjusts the overall size of the badge relative to the product image. You can set the width of the badge using either a percentage (relative to the product image) or pixels (fixed size), depending on your design preference.
  
• Dimensions: Set the badge width in percentage or pixels.
  
• Margin: Controls the spacing between the badge and the edges of the product image. Useful for fine-tuning positioning.
• Opacity: Controls the transparency of the badge. E.g.: 1 means fully visible, and lower values make it more transparent.
  
• Angle: Rotates the badge to a specified degree. For example, 0 means no rotation, while 45 would tilt the badge diagonally.
  
• Keep Aspect Ratio: When enabled, the badge will maintain its original proportions while resizing. This is recommended to avoid image distortion.

Animation Style Settings

You can add animation effects to your badge to make it more eye-catching. Here’s a breakdown of the animation settings:

• Name: Choose the animation type (e.g., RUBBER BAND for a bouncy effect).
  
• Iteration: Define how many times the animation plays (e.g., INFINITE loops continuously).
  
• Duration: Set how long one animation cycle takes, in seconds.
  
• Play: Preview the animation effect directly in the configuration screen.

Preview on Store Front

The badge will display on your product images in the position and style you configured, helping your products grab attention instantly!