How to Edit a Badge or Label

If you’ve already created a badge and want to make changes to its design or settings, follow these steps:

Step 1: Open the Labeler Dashboard in your app.

Step 2: Scroll down and click on the Badges/Labels from Lists section.

You’ll see a list of all the badges you’ve created. Find the badge you want to edit.

Step 3: Click on the Badge

Click directly on the badge. This will open a pop-up window where you can edit the badge’s details. Badge types are organized into different categories. Select the one you need from the list for editing.

• Image Badge
• Customizable badge
• My badge
• Sale On badge

For example, here I am changing the Offer image Badge to a “ready to ship” image badge and moving its position to the top right. It was previously set to a different position.

Step 5: Set Display Rules 

Switch to the “Rules” tab to control where the badge should appear. You can define conditions such as:

• Specific products or collections
• Product tags, Variants
• Instock or out of stock etc

Say, You can choose the All Products option to display your badge sitewide for a promotion, or use the Product Tags condition to show it only on items tagged “Coming Soon” for a pre-order badge. Here, I am selecting All Products.

To learn more about each condition and how to use them, please click on the condition names for detailed explanations.

Step 6: Save Changes

Once you’ve made your updates, click Save to apply the changes. The edited badge will now reflect on your store based on the rules you’ve set.

General Style Settings

When editing a  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.

Sample View – Preview how the badge will be displayed on your product images with your chosen position and style