Product Badges
Badges highlight special product attributes like sales and new arrivals, helping customers discover deals and new items.
Accessing Badge Settings
- Open the theme editor
- Go to Theme settings (gear icon)
- Click Product badges
New Arrival Badge
Automatically show a “New” badge on recently added products.
Settings
| Setting | Description | Default |
|---|---|---|
| Enable new badge | Show/hide new arrival badges | Enabled |
| Days limit | Products newer than this show badge | 30 days |
| Background color | Badge background | #C1D1DC |
| Text color | Badge text | #314D62 |
How It Works
- Badge appears on products published within the days limit
- Automatically removes when product ages out
- 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
| Setting | Description | Default |
|---|---|---|
| Show sale text | Display “Sale” label | Enabled |
| Show sale percentage | Display discount percentage | Enabled |
| Background color | Badge background | #FED2D3 |
| Text color | Badge text | #C20003 |
How It Works
- Badge appears when product has a compare-at price
- Shows “Sale” and/or percentage based on settings
- 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:
| Option | Behavior |
|---|---|
| Sale first | Sale badge takes priority |
| New first | New badge takes priority |
Where: Theme settings → Product badges → Badge priority
Maximum Badges
Limit how many badges can appear per product:
| Setting | Range | Default |
|---|---|---|
| Max badges | 1-3 | 3 |
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
- Theme settings → Product badges
- Uncheck “Enable new badge”
Change new badge timeframe
- Theme settings → Product badges
- Adjust “Days limit” (7-90 days)
Show only percentage on sale
- Theme settings → Product badges
- Uncheck “Show sale text”
- Keep “Show sale percentage” checked
Change badge colors
- Theme settings → Product badges
- Click color swatches
- Select new colors
Limit to one badge per product
- Theme settings → Product badges
- Set “Max badges” to 1
- 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