How to create a badge or label using trending stickers

Want to highlight your products with labels featuring festive or currently trending badges?

The Labeler App makes it easy to add stylish, trending stickers from a large variety of popular designs. This helps your products stand out, grab customer attention, and create a more engaging shopping experience.

From the Dashboard, scroll down to the Lists section. Click “View full list” to view the trending stickers.

From the List page, click “View all” next to Trending stickers to browse all available sticker designs.

In the Choose a sticker window, select a sticker design from the available trending stickers to start creating your sticker.

Here, I selected the PRE ORDER badge

After selecting a sticker, choose the product type where you want to use it. You can select Badges, Labels, or Banners.

Here, I selected a Badge. The badge editor opens, allowing you to choose a badge design and customize its general style, animation style, and other badge settings. The selected badge is also displayed in the product page preview.

Then, click on Rules to assign the badge to products. Here, you can select the conditions where you want the Image Badge to appear.

Once you’re done, click “Save” to apply the changes.

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.,TADA).
  
• 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.

Frontend: How the Badge Appears

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