Badges & Labels

Add visual badges and labels to highlight product features, promotions, or statuses.

What Are Badges?#

Badges are visual indicators that appear on your product images or customization options. They help:

• Highlight bestsellers or new arrivals
• Show sale/discount information
• Indicate limited availability
• Draw attention to specific options

Accessing Badge Settings#

1. Open the product manager
2. Select your product
3. Click the Layers & Badges tab
4. Scroll to the Badges section

Creating a Badge#

Step 1: Add New Badge#

1. Click + Add Badge
2. The badge editor opens

Step 2: Configure Badge#

Badge Text

• Short, impactful text
• Examples: "SALE", "NEW", "Best Seller"

Badge Style

• Background color
• Text color
• Border options
• Rounded corners

Badge Position

• Top Left
• Top Right
• Bottom Left
• Bottom Right
• Custom position (x, y coordinates)

Step 3: Set Visibility Rules#

Choose when the badge appears:

• Always visible: Shows on all views
• Conditional: Based on selections or rules

Step 4: Save#

Click Save Badge to add it to your product.

Badge Types#

Promotional Badges#

Highlight sales and offers:

Text: "20% OFF"
Background: #FF4444 (red)
Text Color: #FFFFFF (white)
Position: Top Right

New Product Badges#

Mark new additions:

Text: "NEW"
Background: #4CAF50 (green)
Text Color: #FFFFFF (white)
Position: Top Left

Bestseller Badges#

Show popular items:

Text: "★ BESTSELLER"
Background: #FFD700 (gold)
Text Color: #000000 (black)
Position: Top Right

Limited Availability#

Create urgency:

Text: "Only 3 Left!"
Background: #FF6B00 (orange)
Text Color: #FFFFFF (white)
Position: Bottom Right

Option-Level Badges#

Add badges to specific options within groups.

Adding to Options#

1. Edit an option
2. Find the Badge section
3. Enable badge for this option
4. Configure text and style

Common Option Badges#

• "Popular" - Most selected option
• "Best Value" - Best price/quality ratio
• "Recommended" - Your suggestion
• "+$X" - Price addition indicator

Conditional Badge Display#

Show badges based on customer selections.

Setting Up Conditional Badges#

1. Create your badge
2. Click Add Display Condition
3. Set the rule:
   • When field equals value
   • When field contains value
   • When field is selected

Example: Bundle Discount Badge#

Show "Bundle Discount!" when multiple add-ons selected:

Condition: IF "Accessory A" is selected
AND "Accessory B" is selected
THEN show "Bundle Discount!" badge

Styling Best Practices#

Color Contrast#

• Ensure text is readable against background
• Test on different product images
• Consider color blindness accessibility

Size Considerations#

• Don't cover important product details
• Scale appropriately for mobile
• Keep text short (1-3 words ideal)

Consistency#

• Use consistent badge styles across products
• Create a badge style guide
• Match your brand colors

Badge Positioning#

Recommended Positions#

Avoiding Overlaps#

• Don't place multiple badges in same corner
• Consider badge priority
• Use conditional logic to alternate positions

Mobile Considerations#

Responsive Sizing#

• Badges scale down on mobile
• Keep text short for readability
• Test on actual devices

Touch Targets#

• Don't cover interactive elements
• Leave space around selection areas
• Consider mobile navigation patterns

Examples#

E-commerce Sale Badge#

{
  "text": "SALE",
  "backgroundColor": "#E53935",
  "textColor": "#FFFFFF",
  "position": "top-right",
  "borderRadius": "4px",
  "padding": "4px 8px",
  "fontSize": "12px",
  "fontWeight": "bold"
}

Eco-Friendly Badge#

{
  "text": "♻ ECO",
  "backgroundColor": "#2E7D32",
  "textColor": "#FFFFFF",
  "position": "top-left",
  "borderRadius": "50px",
  "padding": "4px 12px"
}

Premium Option Badge#

{
  "text": "PREMIUM",
  "backgroundColor": "#1A1A1A",
  "textColor": "#D4AF37",
  "position": "top-right",
  "border": "1px solid #D4AF37"
}

Troubleshooting#

Badge Not Appearing#

• Check visibility conditions
• Verify badge is saved
• Ensure layer order is correct
• Refresh the preview

Badge Covering Content#

• Adjust position settings
• Reduce badge size
• Change to different corner
• Use conditional display

Colors Look Different#

• Check hex codes are correct
• Verify no transparency issues
• Test on production site

Next Steps#

• Conditional Logic
• Storefront Customization
• Testing Your Setup