Line Item Highlight Component

Component Overview

The Line Item Highlight component adds visual tags, badges, or text directly to specific products in the customer's cart during checkout. This component appears inline with cart line items, making it perfect for drawing attention to sale items, new products, limited editions, savings calculations, or any special product features. Unlike components that appear in separate sections of checkout, Line Item Highlights are integrated directly into each product row, providing contextual information exactly where customers need it.

When to Use Line Item Highlights

Ideal Scenarios

Sale promotions: Show "SALE" or "20% OFF" badges on discounted items
Savings display: Calculate and show "Save $15" or "You saved 25%" on sale items
Product features: Highlight special attributes like "New Arrival", "Best Seller", "Limited Edition"
Urgency messaging: Display "Low Stock" or "Last Chance" for inventory-limited items
Product categories: Show product type, vendor, or collection badges
Custom properties: Display line item properties like engraving text or customization choices
Free items: Highlight "FREE" on bonus or promotional items
Pre-order status: Show "Pre-Order - Ships March 15" on pre-order products
Gift items: Mark items with "Gift Wrapped" or gift-related properties

Component Types

Line Item Highlights come in two primary types:

Static Text Highlights

Display fixed text badges on products matching specific criteria.

Examples:

"SALE" badge on all sale items
"NEW" on recently added products
"LIMITED EDITION" on special products
"BEST SELLER" on popular items
"FREE GIFT" on promotional items

Best For: Simple, consistent labeling across product categories

Learn More: See Static & Styling for detailed implementation.

Dynamic Calculated Highlights

Calculate and display values based on product data in real-time.

Types of Dynamic Highlights:

Calculated Savings (Amount): "Save $25"
Calculated Savings (Percentage): "25% OFF"
Original Price Display: "Was $99.99"
Vendor Name: "By Nike"
Product Type: "Category: Electronics"
Line Item Properties: "Engraving: Happy Birthday Sarah"

Best For: Automatically displaying product-specific information that changes based on product data.

Learn More: See Dynamic Line Item Highlights for detailed implementation.

Common Use Cases

Sale Items with Savings

Target: Products with compare-at price (on sale)
Display: "Save $[calculated_amount]" or "XX% OFF"
Style: Red or orange badge
Purpose: Emphasize value and savings

New Product Arrivals

Target: Products with tag "new"
Display: "NEW"
Purpose: Highlight new products

Best Sellers

Target: Products from "Best Sellers" collection or with tag "bestseller"
Display: "BEST SELLER" or "⭐ BEST SELLER"
Style: Gold or yellow badge
Purpose: Social proof and popularity indicator

Low Stock Urgency

Target: Products you are strategically marking as low stock
Display: "Only [X] left!" or "LOW STOCK"
Purpose: Create urgency to complete purchase

Free Items/Gifts

Target: Products with price = $0 or tag "free-gift"
Display: "FREE" or "FREE GIFT"
Purpose: Highlight promotional value

Pre-Order Status

Target: Products with tag "pre-order"
Display: "Pre-Order - Ships [date]"
Purpose: Manage delivery expectations

Display Rules for Targeting

Line Item Highlights rely heavily on Display Rules to target the right products. Learn more about Conditional Rendering for detailed information on targeting.

Quick Examples

By Collection

Show "BEST SELLER" highlight when:
- Product is in collection "Best Sellers"

By Product Properties

Show engraving text when:
- Line item property "personalization_text" exists

By Inventory

Show "LOW STOCK" badge when:
- Product inventory < 5 AND > 0

Complex Targeting

Show "SUMMER SALE" when:
ALL of these:
- Product is in collection "Summer Sale"
- Product has compare-at price
- Compare-at price > current price

Best Practices

Design & Visual

Keep it Concise
- Maximum 3-4 words for badges
- Single line of text
- Icons can reduce word count
- "SALE" > "This item is on sale"
Don't Overuse
- Not every product needs a highlight
- Too many badges reduce effectiveness
- Reserve for truly special attributes
- Quality over quantity

Content Strategy

Prioritize Value-Driven Highlights
- Savings and discounts
- Free items
- Limited availability
- Social proof (best sellers)
Be Honest and Accurate
- Don't fake urgency with false "low stock"
- Calculate savings accurately
- Only use "NEW" for actually new items
- Update badges when products age
Test Different Messages
- "Save $25" vs "25% OFF"
- "SALE" vs "ON SALE"
- With/without icons
- Different color schemes
Seasonal Updates
- Update for holidays ("HOLIDAY SALE")
- Seasonal collections ("SPRING 2024")
- Event-based ("BLACK FRIDAY")
- Remove outdated badges

Next Steps

Static & Styling Documentation: Learn how to create and style static text highlights with badges, colors, and icons.
Dynamic Line Item Highlights: Explore dynamic calculations, savings displays, and property-based content.
Conditional Rendering: Master Display Rules for precise product targeting.

Key Takeaways

✅ Use Line Item Highlights to draw attention to special product attributes
✅ Keep badges concise (3-4 words maximum)
✅ Use dynamic calculations for savings/discounts (accurate and automatic)
✅ Target products precisely with Display Rules
✅ Choose colors strategically (red=sale, green=free, blue=info, gold=premium)
✅ Don't highlight every product (reserve for truly notable items)
✅ Test mobile layout thoroughly (different screen sizes)
✅ Update badges regularly (remove outdated "NEW" badges)
✅ Use contrasting colors for accessibility (4.5:1 minimum)
✅ Combine highlights strategically (badge + savings text)
❌ Don't use vague text ("SPECIAL", "ITEM")
❌ Don't overwhelm with too many badges per product
❌ Don't fake urgency with false "low stock" messages
❌ Don't forget to test with actual products in cart
❌ Don't rely solely on color (use text too for accessibility)