Dynamic Line Item Highlights

desc - Automatically calculate and display savings, vendor info, and custom values on cart line items.

Overview

Dynamic Line Item Highlights automatically calculate and display values based on product data in real-time. Unlike static highlights that show the same text for all products, dynamic highlights adapt to each product's specific attributes—calculating savings, showing vendor names, displaying custom properties, and more.

Reference

Dashboard screenshot

Types of Dynamic Highlights

1. Calculated Savings (Amount)

Displays the dollar/currency amount saved on sale items.

How It Works:

• Automatically calculates: Compare At Price - Current Price
• Displays result in store's currency format
• Updates dynamically if prices change
• Only shows when compare-at price exists and is higher than current price

Display Format:

Example: "Save $25.00"

Format Options:
- "Save $XX.XX" (default)
- "$XX.XX OFF"
- "You save $XX.XX"
- "-$XX.XX"
- Custom prefix/suffix supported

Best Use Cases:

• High-value discounts ($10+)
• Products where dollar amount is more impressive than percentage
• Luxury items where actual savings matter more than percentage
• When you want to emphasize real monetary value

2. Calculated Savings (Percentage)

Displays the percentage discount on sale items.

How It Works:

• Automatically calculates: ((Compare At Price - Current Price) / Compare At Price) × 100
• Rounds to whole number or one decimal place
• Updates dynamically if prices change
• Only shows when compare-at price exists and is higher than current price

Display Format:

Example: "25% OFF"

Format Options:
- "XX% OFF" (default)
- "XX% Discount"
- "Save XX%"
- "-XX%"
- Custom prefix/suffix supported

Rounding Options:
- Whole number: 25%
- One decimal: 25.5%

Best Use Cases:

• Broad appeal across all price points
• When percentage sounds more impressive than amount
• Consistent discount rates across collections
• Lower-priced items where dollar savings seem small

3. Original Price Display

Shows the compare-at (original) price when an item is on sale.

How It Works:

• Displays the compare-at price field
• Only shows when compare-at price exists
• Currency symbol adapts to store's market settings
• Can include strike-through styling

Display Format:

Examples:
- "Was $99.99"
- "Originally $99.99"
- "Reg. $99.99"
- "Regular Price: $99.99"

Styling Options:
- Strike-through text
- Regular text
- Custom prefix

Best Use Cases:

• Emphasizing value without calculation
• When used alongside savings amount/percentage
• Products with significant price drops
• Creating visual contrast between old and new price

4. Vendor Name Display

Displays the product's vendor/brand dynamically.

How It Works:

• Pulls from product's vendor field
• Displays actual vendor name (not static text)
• Updates if vendor information changes
• Can be formatted with custom prefix/suffix

Display Format:

Examples:
- "By Nike"
- "Brand: Apple"
- "Nike"
- "From: Local Artisan"

Format Options:
- Vendor name only
- With prefix: "By [Vendor]"
- With suffix: "[Vendor] Brand"

Best Use Cases:

• Multi-brand retail stores
• Marketplaces with multiple vendors
• Brand-conscious customers
• Highlighting premium brands

Targeting Tips:

• Exclude your house brand if it's the default
• Only show for specific vendor tiers
• Combine with cart value rules (show brands only on high-value orders)

5. Product Type Display

Shows the product's type classification dynamically.

How It Works:

• Pulls from product's type field
• Displays actual product type
• Updates if product type changes
• Can be formatted with custom prefix/suffix

Display Format:

Examples:
- "Category: Electronics"
- "Type: T-Shirt"
- "Electronics"

Format Options:
- Type only
- With prefix: "Category: [Type]"
- Custom formatting

Best Use Cases:

• Diverse product catalogs
• Helping customers identify product categories
• Multi-category checkouts
• Educational/informative purposes

6. Line Item Properties

Displays custom properties attached to line items during product customization.

How It Works:

• Pulls data from line item properties
• Shows property values added during cart/product page
• Each product can have unique property values
• Multiple properties can be displayed

Display Format:

Format Options:
- "Property Name: Value"
- "Value" (value only)
- "Name (Value)"
- Custom templates supported

Examples:
- "Engraving: Happy Birthday!"
- "Gift Message: Congratulations!"
- "Custom Color: Royal Blue"
- "Delivery Date: December 25, 2024"

Common Property Names:

• personalization_text: Custom text for products
• engraving_text: Engraving or inscription
• gift_message: Gift messages
• custom_color: Color customization
• monogram_initials: Monogram letters
• delivery_date: Special delivery dates
• size_preference: Size variations
• custom_notes: Special instructions

Best Use Cases:

• Personalized products (jewelry, gifts, clothing)
• Custom items with engraving
• Products with gift messaging
• Items with special instructions
• Confirming customization choices at checkout

Dynamic Calculations Explained

Savings Amount Calculation

Formula: Compare At Price - Current Price = Savings

Example:
Compare At Price: $99.99
Current Price: $74.99
Calculation: $99.99 - $74.99 = $25.00
Display: "Save $25.00"

Edge Cases:
- If no compare-at price: Don't display
- If current price ≥ compare-at: Don't display
- If savings < threshold (e.g., $5): Don't display (optional)

Advanced Targeting:

Show savings amount when:
- Product has compare-at price
AND
- Compare-at price > current price
AND
- (Compare-at price - current price) ≥ $5

This prevents showing trivial savings like "Save $0.50"

Savings Percentage Calculation

Formula: ((Compare At Price - Current Price) / Compare At Price) × 100

Example:
Compare At Price: $100.00
Current Price: $75.00
Calculation: (($100.00 - $75.00) / $100.00) × 100 = 25%
Display: "25% OFF"

Rounding Examples:
- 24.5% → 25% (whole number)
- 24.5% → 24.5% (one decimal)
- 24.99% → 25% (whole number)

Advanced Targeting:

Show percentage discount when:
- Product has compare-at price
AND
- Compare-at price > current price
AND
- Percentage discount ≥ 10%

This prevents showing small discounts like "3% OFF"

Implementation Examples

Example 1: Dollar Savings Display

Scenario: Show dollar amount saved on high-value discounts

Configuration:

Component: Line Item Highlight

Target Products (Display Rules):
- Product has compare-at price
AND
- Compare-at price > current price
AND
- (Compare-at price - current price) ≥ $10

Highlight Content: Calculated Savings (Amount)
Format: "Save $XX.XX"

Style:
- Text style (no badge background)
- Text color: #27AE60 (green)
- Font weight: Bold
- Font size: 14px
- Position: Below product price

Mobile: Show

Why This Works:

• Green color = positive savings
• Only shows meaningful savings ($10+)
• Text-only style is subtle but clear
• Positioned near price for context
• Automatic calculation prevents errors

Example 2: Percentage Discount Badge

Scenario: Show percentage off on all sale items

Configuration:

Component: Line Item Highlight

Target Products (Display Rules):
- Product has compare-at price
AND
- Compare-at price > current price

Highlight Content: Calculated Savings (Percentage)
Format: "XX% OFF"
Rounding: Whole number

Style:
- Badge style: Pill shape
- Background color: #E74C3C (red)
- Text color: #FFFFFF (white)
- Font weight: Bold
- Font size: 12px
- Text transform: UPPERCASE
- Position: Below product title

Mobile: Show

Why This Works:

• Red signals discount/sale
• Percentage works across all price points
• Bold badge catches attention
• Automatic calculation and rounding
• No maintenance required

Example 3: Original Price with Strikethrough

Scenario: Show original price to emphasize savings

Configuration:

Component: Line Item Highlight

Target Products (Display Rules):
- Product has compare-at price
AND
- Compare-at price > current price

Highlight Content: Original Price
Format: "Was $XX.XX"
Style: Strike-through

Style:
- Text style (no badge)
- Text color: #7F8C8D (gray)
- Text decoration: Strike-through
- Font size: 13px
- Font weight: Regular
- Position: Near product price

Mobile: Show

Why This Works:

• Gray with strikethrough clearly shows "old" price
• Creates visual contrast with current price
• Helps customers see the deal
• Subtle and professional
• Works well with savings amount/percentage

Example 4: Combined Savings Display

Scenario: Show both percentage AND dollar savings

Setup: Create two separate highlight components:

Component 1 - Percentage Badge:

Highlight Content: Calculated Savings (Percentage)
Format: "XX% OFF"
Style: Red pill badge
Position: Below product title

Component 2 - Dollar Amount:

Highlight Content: Calculated Savings (Amount)
Format: "Save $XX.XX"
Style: Green text (no badge)
Position: Below product price

Why This Works:

• Dual reinforcement of value
• Percentage catches eye
• Dollar amount provides concrete value
• Different styles prevent visual confusion
• Works well for high-value items

Example 5: Vendor Badge for Premium Brands

Scenario: Show brand name for specific premium vendors

Configuration:

Component: Line Item Highlight

Target Products (Display Rules):
- Product vendor is "Nike" OR "Apple" OR "Sony" OR "Adidas"
(List your premium brands)

Highlight Content: Vendor
Format: "By [Vendor]"

Style:
- Text style (no badge)
- Text color: #34495E (dark gray)
- Font size: 11px
- Font weight: Regular
- Position: Below product title

Mobile: Show

Why This Works:

• Highlights premium brands only
• Helps brand-conscious shoppers
• Subtle, professional appearance
• Automatic vendor name display
• No manual text entry needed

Alternative Targeting:

Show vendor when:
- Cart total > $100
AND
- Product vendor is not "Your Store Name"

(Show brands only on higher-value orders)

Example 6: Personalization Text Display

Scenario: Show custom engraving text on jewelry

Configuration:

Component: Line Item Highlight

Target Products (Display Rules):
- Line item property "engraving_text" exists
AND
- Product is in collection "Personalized Jewelry"

Highlight Content: Line Item Property
Property: "engraving_text"
Format: "Engraved: [value]"

Style:
- Text style (no badge)
- Text color: #7F8C8D (gray)
- Font style: Italic
- Font size: 12px
- Position: Below product title

Mobile: Show

Why This Works:

• Confirms customization at checkout
• Italic style suggests special/custom
• Gray color is subtle and informative
• Shows exactly what will be engraved
• Reduces customer anxiety

Example 7: Gift Message Display

Scenario: Show gift messages on gift-wrapped items

Configuration:

Component: Line Item Highlight

Target Products (Display Rules):
- Line item property "gift_message" exists
AND
- Line item property "gift_message" is not empty

Highlight Content: Line Item Property
Property: "gift_message"
Format: "Gift Message: [value]"

Style:
- Text style (no badge)
- Text color: #E67E22 (orange)
- Font size: 12px
- Font weight: Regular
- Position: Below product title

Mobile: Show

Why This Works:

• Confirms gift message was captured
• Orange adds warm, gift-friendly feel
• Shows the actual message
• Customer can verify accuracy
• Prevents gift message errors

Example 8: Product Type Labels

Scenario: Show product category on mixed carts

Configuration:

Component: Line Item Highlight

Target Products (Display Rules):
- Product type is not empty
AND
- Cart has products from multiple categories
(Use cart-level condition if available)

Highlight Content: Product Type
Format: "Category: [Type]"

Style:
- Text style (no badge)
- Text color: #95A5A6 (gray)
- Font size: 10px
- Font weight: Regular
- Position: Below product title

Mobile: Show

Why This Works:

• Helps organize diverse carts
• Subtle gray doesn't overpower
• Informative for mixed-category orders
• Automatic categorization
• No manual setup per product

Advanced Formatting Options

Savings Amount Formats

Standard: "Save $25.00"
Short: "$25 OFF"
Conversational: "You save $25.00"
Minimal: "-$25"
With context: "Save $25.00 today"

Savings Percentage Formats

Standard: "25% OFF"
Alternative: "25% Discount"
Conversational: "Save 25%"
Minimal: "-25%"
Emphatic: "25% OFF!"

Original Price Formats

Standard: "Was $99.99"
Formal: "Originally $99.99"
Retail: "Reg. $99.99"
Short: "Orig. $99.99"
Extended: "Regular Price: $99.99"

Property Display Formats

Label + Value: "Engraving: Happy Birthday"
Value Only: "Happy Birthday"
Parentheses: "Custom Text (Happy Birthday)"
Quoted: "Engraving: 'Happy Birthday'"

Best Practices

When to Use Amount vs Percentage

Use Dollar Amount When:

• Savings are high value ($20+)
• Selling luxury/premium items
• Target customers value concrete numbers
• Discounts vary widely by product
• Example: "$50 OFF" sounds better than "8% OFF" on a $625 item

Use Percentage When:

• Consistent discount rates across products
• Works better across price ranges
• Percentage sounds more impressive
• Selling lower-priced items
• Example: "50% OFF" sounds better than "Save $5" on a $10 item

Use Both When:

• High-value items with strong percentages
• You want maximum impact
• Cart has expensive items
• Example: "Save $100 (50% OFF)" on a $200 item

Property-Based Highlights

Best Practices:

1. Always confirm properties exist: Use Display Rules to check property exists before displaying
2. Format for readability: Add labels like "Engraved:" or "Gift Message:"
3. Keep it visible: Important customizations should be prominent
4. Use appropriate styling: Italic for special/custom, gray for info
5. Test with long values: Some customers write long messages

Common Mistakes:

• Displaying empty properties (use "exists" condition)
• No label (customers don't know what the text means)
• Too small or hidden (defeats the purpose)
• Not testing with actual property values

Dynamic Content Thresholds

Prevent showing trivial or meaningless values:

Savings Amount Threshold:

Only show if savings ≥ $5
Prevents: "Save $0.50" or "Save $1.23"

Savings Percentage Threshold:

Only show if percentage ≥ 10%
Prevents: "3% OFF" or "1% OFF"

Why Use Thresholds:

• Small savings look insignificant
• Can actually reduce perceived value
• Clutters the interface with noise
• Better to show nothing than trivial savings

Combining Dynamic and Static Highlights

You can use both dynamic and static highlights on the same products for maximum impact.

Example Combinations

Sale Product with Multiple Highlights:

1. "SALE" badge (static, red, above title)
2. "25% OFF" badge (dynamic percentage, red, inline with title)
3. "Save $37.50" text (dynamic amount, green, below price)

Personalized Product:

1. "🎁 GIFT ITEM" badge (static, green, above title)
2. "Engraved: Happy Birthday Sarah" (dynamic property, gray italic, below title)
3. "Gift Message: Love, Mom" (dynamic property, orange, below description)

Premium Brand Product:

1. "⭐ BEST SELLER" badge (static, gold, above title)
2. "By Nike" (dynamic vendor, gray, below title)

Best Practices for Combining:

• Maximum 3 highlights per product
• Use different visual styles (badge vs text)
• Position them strategically (don't cluster)
• Ensure they complement, not compete
• Test the visual hierarchy

Next Steps

• Back to Overview: Return to the main Line Item Highlights page
• Static & Styling Documentation: Learn about static text highlights and styling
• Conditional Rendering: Master Display Rules for precise targeting
• Analytics: Track the performance of your dynamic highlights

Quick Reference: Dynamic Content Types