Indicators
Product Tile Flag
A visual flag component for product tiles highlighting promotional labels like sale, promo, or new items.
Overview
Draws customer attention to special product attributes by displaying prominent visual badges on product tiles. Supports use cases including highlighting discounted products during promotional periods, marking newly added items, and displaying special offer badges. Uses predefined variants to ensure consistent visual hierarchy across the storefront while allowing theming customization. The slot-based content approach enables merchants to customize label text while maintaining established visual treatment.
Key Business & UX Benefits
- Highlights sale, promo, or new on product cards at a glance.
- Themed variants keep flags consistent across the storefront.
- Slot-based content supports custom text (e.g. “-25%”) and localization.
- Fits product grids and sliders without extra layout.
Pro-Tip from Larry: Use ProductTileFlag for sale and new so customers spot promotions quickly.
Usage
ProductTileFlag
<ProductTileFlag variant="sale">
-25%
</ProductTileFlag>
Feature List
- Multiple variant styles: promo, sale, and new
- Global theming for background and text colors
- Customizable content via slot
- Configurable styling through Figma variables
API Reference
| Prop | Default | Type |
|---|---|---|
variantrequired | "promo" | "sale" | "new" |
| Slot | Type |
|---|---|
default | {} |