Skip to Content
CustomizationProduct Badges

Product Badges

Badges highlight special product attributes like sales and new arrivals, helping customers discover deals and new items.

Accessing Badge Settings

  1. Open the theme editor
  2. Go to Theme settings (gear icon)
  3. Click Product badges

New Arrival Badge

Automatically show a “New” badge on recently added products.

Settings

SettingDescriptionDefault
Enable new badgeShow/hide new arrival badgesEnabled
Days limitProducts newer than this show badge30 days
Background colorBadge background#C1D1DC
Text colorBadge text#314D62

How It Works

  1. Badge appears on products published within the days limit
  2. Automatically removes when product ages out
  3. No manual tagging required

Example: With 30 days set, products added in the last 30 days show the “New” badge.

Sale Badge

Display a badge when products are on sale.

Settings

SettingDescriptionDefault
Show sale textDisplay “Sale” labelEnabled
Show sale percentageDisplay discount percentageEnabled
Background colorBadge background#FED2D3
Text colorBadge text#C20003

How It Works

  1. Badge appears when product has a compare-at price
  2. Shows “Sale” and/or percentage based on settings
  3. Percentage calculated from price difference

Example: Product was $100, now $75 → Shows “Sale -25%“

Badge Display Options

Badge Priority

When a product qualifies for multiple badges:

OptionBehavior
Sale firstSale badge takes priority
New firstNew badge takes priority

Where: Theme settings → Product badges → Badge priority

Maximum Badges

Limit how many badges can appear per product:

SettingRangeDefault
Max badges1-33

This prevents badge overcrowding on products.

Badge Appearance

Customizing Colors

For each badge type, you can set:

  • Background color - Badge background
  • Text color - Badge text

Tips:

  • Use your brand’s secondary colors
  • Ensure text is readable (high contrast)
  • Red tones work well for sales
  • Cool tones suggest “new” or “fresh”

Badge Styles

Badge appearance follows your theme style:

  • Rounded theme - Pill-shaped badges
  • Rigid theme - Rectangular badges

Common Tasks

Disable new badges

  1. Theme settings → Product badges
  2. Uncheck “Enable new badge”

Change new badge timeframe

  1. Theme settings → Product badges
  2. Adjust “Days limit” (7-90 days)

Show only percentage on sale

  1. Theme settings → Product badges
  2. Uncheck “Show sale text”
  3. Keep “Show sale percentage” checked

Change badge colors

  1. Theme settings → Product badges
  2. Click color swatches
  3. Select new colors

Limit to one badge per product

  1. Theme settings → Product badges
  2. Set “Max badges” to 1
  3. Set “Badge priority” to preferred type

Where Badges Appear

Badges display on:

  • Collection pages
  • Search results
  • Product recommendations
  • Featured product sections
  • Related products

Note: Product detail pages typically show badges in the product information block.

Best Practices

Color Consistency

  • Use consistent colors for each badge type
  • Align with your brand palette
  • Maintain readability

Badge Strategy

  • New badges create urgency for recent additions
  • Sale badges drive deal-seeking customers
  • Too many badges can reduce impact

Timing Considerations

  • Set appropriate “new” window for your inventory
  • Fast-moving inventory: shorter window (7-14 days)
  • Slow-moving inventory: longer window (30-60 days)

Troubleshooting

New badge not appearing

  • Check publish date is within days limit
  • Verify “Enable new badge” is checked
  • Clear browser cache

Sale badge not showing

  • Ensure product has compare-at price set
  • Verify at least one badge setting is enabled
  • Check max badges limit

Badge colors not changing

  • Clear browser cache
  • Check for section-specific overrides
  • Verify changes are saved

Wrong percentage shown

  • Verify compare-at price is correct
  • Check variant prices are consistent
  • Percentage is based on max discount

Need help? Contact support

Last updated on