Product Savings

Show customers exactly how much they save on each discounted item directly in the cart.

What it does

When products have a compare-at price or discounts applied, this feature calculates and displays the savings amount for each line item. The savings appear either inline with the price or on a separate row, making discounts/savings immediately visible to encourage checkout completion.

Configuration

Enable the feature

1. Go to Cart Designer → Layout & function → Product savings

2. Check Show to enable

3. Save your changes

Customize the text

The Savings text field controls what customers see. Use {amount} to insert the calculated savings.

Examples:

• Save {amount} → Save $20.00

• -{amount} → -$20.00

• You save {amount} → You save $20.00

• {amount} off → $20.00 off

Design options

Background emphasis

Add a colored background to make savings stand out:

1. Set Background color to your brand color or green (#0ebe38)

2. Set Text color to white (#ffffff) for contrast

3. Adjust Text size (13px works well)

This creates a badge-like appearance that draws attention.

Text-only emphasis

For a cleaner look:

1. Leave Background color empty

2. Set Text color to green (#0ebe38) or red for emphasis

3. Keep the same text size as your prices

This integrates smoothly with your existing design.

Layout options

Same row (compact):

• Uncheck Place savings on next row

• Savings appear inline: $60.00 $40.00 (-$20.00)

• Best for mobile or minimal designs

Separate row (prominent):

• Check Place savings on next row

• Savings appear below the price

• More visual space and emphasis

Design tips

High emphasis approach

• Green background (#0ebe38) with white text

• Separate row placement

• Text: Save {amount}

Subtle approach

• No background color

• Green text (#0ebe38)

• Same row placement

• Text: -{amount}

Brand-aligned approach

• Use your brand color as background

• White text for contrast

• Match the style of other cart elements

• Consistent with free shipping bar colors

Common configurations

E-commerce standard:

Text: Save {amount}
Background: #0ebe38 (green)
Text color: #ffffff (white)
Placement: Next row

Minimalist:

Text: -{amount}
Background: (none)
Text color: #0ebe38 (green)
Placement: Same row

Brand-focused:

Text: You save {amount}
Background: [Your brand color]
Text color: #ffffff (white)
Placement: Next row