Display setting

Learn how to set up widget content for your Post-purchase upsell offer in AOV.ai Post Purchase.

This step ensures your offers look polished, persuasive, and customer-friendly, helping you maximize additional revenue right after checkout.

How to set up

Step 1: Customize Upsell #1 display

1

Select a template

  • Choose from available layouts (e.g., PPU – Split grid).

  • Use a layout that fits both product image and persuasive text.

2

Add a header text

  • Keep it concise (max 60 characters).

  • Example: "Hold on! You're about to miss a fantastic deal from us."

  • Use Add variable to personalize with the customer's first name.

3

Set display duration

  • Define how long the offer shows (recommended: 3–5 minutes).

  • Shorter times create urgency; longer times give room for decision-making.

4

Show remaining offer time (optional)

  • Contact AOV.ai support to enable a native-friendly timer.

  • A timer adds urgency without conflicting with store themes.

Step 2: Configure Upsell #2 display (optional)

Upsell #2 appears only if enabled.

Setup is the same as Upsell #1: select a template, add header text, and set a display duration.

Step 3. Configure Downsell display (optional)

A downsell appears if customers decline both Upsell #1 and Upsell #2.

Follow the same steps: Select a template, add concise header text (e.g., "Wait—here's a smaller deal you'll love."), set display duration (2–3 minutes recommended).

Step 4: Set Claim Confirmation

Enable confirmation to notify customers when their claimed offer is added to their order. This avoids confusion and improves trust.

Click Add confirmation and we will assist you with the set up.

Step 5: Preview your widget and save

  • On the right-hand Summary panel, review the offer details.

  • Select Preview offer to check exactly how it looks to customers.

  • Once satisfying with the setting, hit Save button.

Widget content is the final step that makes your post-purchase upsell compelling and trustworthy. By configuring upsells, downsells, and clear confirmations, you create a seamless experience that not only boosts your revenue but also strengthens customer confidence in your store.


Templates

Post-Purchase upsell offers three layout templates. Choose the one that best suits your product and brand style.

Focus Offer (Split Grid)

A two-column layout with the product image on one side and offer details on the other. Best for highlighting a single product with a strong visual.

Side-by-Side

Places the product image and offer text horizontally next to each other. Works well for products with clean imagery where both visuals and copy carry equal weight.

Combo Stack (Vertical Stack)

Stacks elements vertically in a single column. Ideal for multi-product offers or when you want a compact, scrollable presentation.


Core Widgets

Each offer is built from individual widgets that you can configure or reorder. Below is the full list of widgets available for Post-Purchase upsell.

Displays the main offer title at the top of the widget.

  • Text content: Enter your headline. Recommended max 60 characters.

  • Variables: Click Add variable to insert dynamic values into the text.

Variable
What it inserts

{{first_name}}

Customer's first name

{{last_name}}

Customer's last name

{{discount_value}}

Discount percentage (e.g., 20%)

{{discount_amount}}

Discount in currency (e.g., $5.00)

{{included_taxes}}

Tax amount included in the price

  • Text size: Extra Small, Small, Base, Medium, Large, X-Large, Extra Large

  • Text color: Base, Critical (red), Warning (yellow), Success (green), Accent (blue), Subdued (grey), Emphasized (bold)

  • Text style: Normal, Bold, Italic

  • Text alignment: Left, Center, Right

Countdown Timer

Shows a live countdown to create urgency. When the timer expires, the offer closes.

  • Timer text: Customize the label shown above the countdown. Default: "THIS OFFER IS AVAILABLE FOR"

  • Expiration time: Set in minutes. Recommended 3–5 minutes for Post-Purchase upsell.

  • The timer is visible to the customer and counts down in real time.

Product Information

Displays the product image and key details pulled automatically from Shopify.

Product Title

Shows the product name. You can adjust text size, color, style, and alignment using the standard text options.

Product Description

Shows the product description below the product title.

  • Show / Hide: Toggle whether the description appears at all.

  • Metafield override: If you want to show a custom description specific to this upsell offer (instead of the default Shopify product description), set the metafield aov_ppu.product_description on the product.

Price & Discount

Shows the original price crossed out alongside the discounted price.

  • Show exact discounted price: When enabled, the widget calculates and displays the exact price after the discount is applied, rather than just the percentage.

  • Compare discount text: Customize the label that appears next to the compare-at price (e.g., "You save", "Regular price").

Star Rating

Displays a star rating below the product title to add social proof.

  • Show / Hide: Toggle visibility.

  • Color options: Yellow, Blue, Pink, Black

  • Size options: Small, Medium

Variant Picker

Lets customers select product variants (size, color, etc.) directly in the upsell widget.

  • Appearance:

    • Single dropdown: All variant options combined into one dropdown selector.

    • Multiple dropdowns: Each variant option (e.g., Size, Color) shown as a separate dropdown.

  • Hide unavailable variants: When enabled, variants that are out of stock or unavailable are hidden from the picker so customers only see what they can actually buy.

Quantity Selector

Lets customers choose how many units to add.

  • Show / Hide: Toggle visibility.

  • Minimum quantity: Set the lowest quantity a customer can select (e.g., 2 for a bundle offer).

Free Shipping Badge

Displays a "Free Shipping" badge on the offer to make it more attractive.

  • Show / Hide: Toggle visibility.

Note

An open text field where customers can leave a note with their upsell item (e.g., gift message, special instructions).

Price Breakdown

Shows a detailed cost summary at the bottom of the offer before the customer accepts.

  • Show / Hide: Toggle visibility.

  • Breakdown lines shown:

    • Subtotal

    • Discount

    • Shipping

    • Taxes

    • Total

Accept Button

The primary call-to-action button customers click to add the upsell to their order.

  • Button text options:

    • ADD NOW

    • PAY NOW

    • BUY NOW

    • Take the deal

    • Get this deal

    • Add to order

    • Yes please

  • Button style:

    • Primary: Filled button in your store's primary color. Highest visual emphasis.

    • Secondary: Outlined or muted button. Lower emphasis.

Decline Button

The button customers click to skip the upsell and continue.

  • Button text options:

    • Decline this offer

    • DECLINE

    • No thanks

    • Skip this offer

    • Not now

    • Maybe later

  • Button style:

    • Link: Plain text link, minimal visual weight. Recommended to keep focus on the Accept button.

    • Secondary: More prominent outlined button.

Per-Product Decline Button

For multi-product offers, each product card can have its own individual decline button instead of a single global decline.

  • Useful when the customer might accept one product but decline another.


Addable Content Sections

Beyond the core widgets, you can add supplementary content blocks to any offer. These are optional sections that appear in the widget body and help provide more context, social proof, or structured information.

Rich Text

A freeform text block with a heading and body.

  • Heading: Short section title.

  • Body: Supports rich HTML formatting — bold, italic, lists, links.

  • Use this for additional product details, promotional copy, or terms.

Text & Image

A two-part block combining an image with accompanying text.

  • Layout:

    • Image left: Image on the left, text on the right.

    • Image right: Text on the left, image on the right.

  • Use this for lifestyle photography paired with benefit-focused copy.

Callout Block Banner

A visually distinct highlighted banner for important information.

  • Background color options:

    • Blue (Info): Neutral informational message.

    • Green (Success): Positive reinforcement, e.g., "Free shipping included."

    • Yellow (Warning): Soft alert, e.g., "Limited stock."

    • Red (Critical): Urgent message, e.g., "Only 2 left at this price."

FAQ Section

A set of collapsible question-and-answer items.

  • Add as many Q&A pairs as needed.

  • Each item is expandable by the customer.

  • Use this to address common objections or questions before the accept/decline decision.

Testimonial / Review Widget

Pulls real customer reviews from your review app and displays them inside the upsell widget.

  • Supported review apps: Judge.me, Air Reviews

  • Review filter:

    • 5 stars only

    • 4+ stars

    • All reviews

  • Sort order: Recent, Highest rated

  • Layout:

    • Vertical: Reviews stacked top to bottom.

    • Horizontal: Reviews displayed side by side or in a scrollable row.


Design Options Reference

These formatting options are available on most text-based widgets (Header, Product Title, Product Description, Rich Text, etc.).

Text Size

Option
Description

Extra Small

Smallest available text size

Small

Slightly below body text size

Base

Default body text size

Medium

Slightly above body text

Large

Prominent heading size

X-Large

Large display text

Extra Large

Largest available text size

Text Color

Option
Appearance

Base

Default text color (inherits theme)

Critical

Red — for urgency or warnings

Warning

Yellow — for caution or attention

Success

Green — for positive messages

Accent

Blue — for highlights or links

Subdued

Grey — for secondary or supporting text

Emphasized

Bold weight applied to the current color

Text Style

Option
Effect

Normal

Standard weight

Bold

Heavy weight

Italic

Slanted text

Text Alignment

Option
Effect

Left

Aligns text to the left edge

Center

Centers text horizontally

Right

Aligns text to the right edge

Background Colors (Section Blocks)

Option
Appearance

Light grey (Subdued)

Subtle grey background to separate sections

Transparent

No background, blends with the widget

Last updated