Display setting

Customize how your Order Status Page Upsell looks so your upsell feels on-brand and compelling.

How to set up

Step 1: Add app block placement

1

Click Add app block.

• You need to add the AOV Order Status Page Upsell app block in your Shopify Theme Editor.

• This defines where the upsell widget will display on the Order Status Page.

2

Open your Theme Settings page in Shopify.

3

Select your preferred placement for the OSP upsell block.

4

Save your theme changes.

Step 2: Set up upsell details

1

Edit header text

• Enter a custom header that appears above the upsell.

• Example: "You may also like" or "Complete your order with these".

• Optional: Use Add variable to insert dynamic values.

2

Set display duration

• Define how long the upsell offer should remain visible.

• Enter the number of minutes in Display duration.

• Example: 5 minutes.

3

Add urgency with countdown (optional)

• Toggle Show remaining offer time to enable a countdown timer.

• Customize the message that appears with the timer.

• Example: "This offer is available for the next few minutes."

4

Highlight with Free Shipping badge (optional)

• Toggle Free shipping if you want the upsell product to show a Free Shipping badge.

• This helps customers feel more incentivized to accept the offer.

5

Enable scrollable layout (optional)

• Toggle Scrollable product layout if you have more than 3 products.

• Customers can scroll horizontally to view all offers without cluttering the page.

6

Save your settings

• Review your widget preview on the right side of the screen.

• Click Save to apply changes.

You've now completed Widget content setup. By customizing the layout, text, timers, and badges, your upsell can look and feel perfectly aligned with your brand.

---

Templates

Order Status Page upsell offers two layout templates.

Split Grid

A two-column layout with the product image on one side and offer text and actions on the other. Best for single-product upsells where visual and persuasive copy share equal emphasis.

Vertical Stack

Stacks all elements — image, title, price, buttons — in a single column from top to bottom. Clean and compact. Recommended for a simple, focused presentation or when fitting into a narrower page section.

---

Core Widgets

Header

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

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

• Variables: Click Add variable to insert dynamic values.

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, Warning, Success, Accent, Subdued, Emphasized

• Text style: Normal, Bold, Italic

• Text alignment: Left, Center, Right

Countdown Timer

Shows a live countdown to drive urgency. The offer closes when the timer expires.

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

• Expiration time: Set in minutes. Recommended 5 minutes for Order Status Page upsell.

Product Information

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

Product Title

Shows the product name with full text formatting options (size, color, style, alignment).

Product Description

Shows the product's description text.

• Show / Hide: Toggle visibility.

• Metafield override: Set aov_ppu.product_description on the product in Shopify to show a custom description for this upsell, rather than the default product description.

Price & Discount

Shows the original price crossed out next to the discounted offer price.

• Show exact discounted price: Toggle on to display the final calculated price instead of just the discount percentage.

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

Star Rating

Adds a star rating display for social proof.

• Show / Hide: Toggle visibility.

• Color options: Yellow, Blue, Pink, Black

• Size options: Small, Medium

Variant Picker

Lets customers choose product variants inside the widget.

• Appearance:

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

  • Multiple dropdowns: Separate dropdowns for each option (e.g., Size and Color as two dropdowns).

• Hide unavailable variants: Hides out-of-stock or unavailable variants so customers only see purchasable options.

Quantity Selector

Allows customers to select a quantity.

• Show / Hide: Toggle visibility.

• Minimum quantity: Set the lowest quantity the customer can enter.

Free Shipping Badge

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

• Show / Hide: Toggle visibility.

• This widget corresponds to the Free shipping toggle in the setup steps above.

Note

A text input for customers to leave a note with their order item (e.g., gift message or instructions).

Price Breakdown

Shows an itemized cost summary before the customer accepts.

• Show / Hide: Toggle visibility.

• Breakdown lines: Subtotal, Discount, Shipping, Taxes, Total

Accept Button

The primary action button to add the upsell to the 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), Secondary (outlined)

Decline Button

The button to skip the offer.

• Button text options:

  • Decline this offer

  • DECLINE

  • No thanks

  • Skip this offer

  • Not now

  • Maybe later

• Button style: Link (plain text, minimal visual weight), Secondary (more prominent)

Per-Product Decline Button

For multi-product offers, adds a separate decline button on each product card. Allows customers to accept some products and decline others individually.

---

Scrollable Product Layout

When you have more than 3 products in your offer, enable the Scrollable product layout toggle. This allows customers to scroll horizontally through the product cards without the page becoming cluttered or requiring vertical scrolling to see all offers. Recommended for any offer containing 4 or more products.

---

Addable Content Sections

These optional content blocks can be added to any offer to provide extra context, social proof, or structured information alongside the core widgets.

Rich Text

A freeform block with a heading and a rich HTML body.

• Heading: Short section title.

• Body: Supports bold, italic, bullet lists, numbered lists, and links.

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

Text & Image

Combines an image and text side by side.

• Layout:

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

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

• Use for lifestyle photos paired with benefit-focused copy.

Callout Block Banner

A visually distinct highlighted banner for key messages.

• 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 available."

  • 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 expands when clicked.

• Use to address common customer objections before the decision point.

Testimonial / Review Widget

Pulls real customer reviews from your connected review app and shows them in the widget.

• Supported review apps: Judge.me, Air Reviews

• Review filter: 5 stars only, 4+ stars, All reviews

• Sort order: Recent, Highest rated

• Layout: Vertical (stacked), Horizontal (side-by-side or scrollable)

---

Design Options Reference

These formatting options are available on most text-based widgets.

Text Size

Option	Description
Extra Small	Smallest available size
Small	Slightly below body text
Base	Default body text size
Medium	Slightly above body text
Large	Prominent heading size
X-Large	Large display text
Extra Large	Largest available size

Text Color

Option	Appearance
Base	Default color (inherits theme)
Critical	Red — urgency or warnings
Warning	Yellow — caution or attention
Success	Green — positive messages
Accent	Blue — highlights or links
Subdued	Grey — secondary or supporting text
Emphasized	Bold weight on 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