Pre-Checkout Extension

Show targeted upsell offers in an engaging modal before customers reach checkout, maximizing every opportunity to increase order value.

The Pre-Checkout Extension intercepts the checkout flow to display a branded modal featuring the customer's current cart items alongside carefully selected upsell products. Customers can review their cart, add upsells, and proceed to checkout—all within a beautiful, customizable interface.

Info: The Pre-Checkout Extension appears before customers reach your Shopify checkout page, creating a strategic moment to present additional offers.

What It Does

Intercepts Checkout - Shows modal before customers reach the checkout page
Displays Cart - Shows current cart items with images, variants, and pricing
Features Upsells - Presents selected products with optional discounts
Real-time Updates - Cart totals and savings update instantly as customers make changes
Fully Customizable - Match your brand with custom logos, colors, and messaging

How It Works

Customer clicks your checkout link
Before reaching checkout, a modal appears showing their cart
Below cart items, your selected upsell products are displayed
Customer can add upsells, edit quantities, or change variants
Customer clicks your custom CTA button to proceed to checkout
Customer arrives at checkout with their updated cart

Pre-Checkout modal showing cart items and upsell offers

Configuration

Activate Pre-Checkout

In your link editor, add the Pre-Checkout extension card and toggle it on.
Add branding (optional)

Upload your logo or a header image to personalize the modal. If no logo is provided, your shop name appears.

Tip: A header image can set the tone for your offer—use lifestyle imagery or product photos that match your upsells.
Write your description

Add a brief description that appears at the top of the modal explaining the offer or value proposition.

Example: "Complete your order with these exclusive additions!"
Select upsell products

Click "Add Product" to search for and select products to feature as upsells.

Info: You can add multiple products. They'll appear below the cart items in the order you add them.
Set product discounts

For each upsell product, optionally configure a discount percentage (e.g., 20% off).

Tip: Discounts make upsells more compelling. Consider offering exclusive "pre-checkout only" pricing.
Configure variant display

Choose how to display products with multiple variants:
- Grouped - Show one product with a variant selector dropdown
- Ungrouped - Show each variant as a separate product
Info: Grouped view is cleaner for products with many variants. Ungrouped view highlights specific variants you want to promote.
Set button text

Customize the call-to-action button text (e.g., "Continue to Checkout" or "Complete My Order").

Tip: Use action-oriented language that creates urgency or excitement, like "Secure My Order" or "Get My Products."
Configure skip button (optional)

Toggle on the skip button if you want to give customers an option to bypass the modal. Set a custom URL for where skip should redirect.

Warning: Enabling skip may reduce upsell conversion. Only enable if you want to give customers a clear exit.

Cart Features

Customers can interact with their cart directly in the modal:

View Cart Items

See all products with images and quantity badges
View variant selections (size, color, etc.)
See discount badges showing savings
View line item prices with strikethrough for discounts

Edit Quantities

Increase or decrease quantities with +/- buttons
Remove items by reducing quantity to zero
See totals update in real-time

Change Variants

When variant grouping is enabled, customers can:

Click the variant selector dropdown
Choose a different size, color, or style
See the product image and price update
Variant changes preserve quantity

Info: Free gift items and items with restrictions may not show quantity controls or variant selectors.

Cart Summary

The modal displays a comprehensive cart summary:

Subtotal - Total before discounts
Line-item Discounts - Savings from product-level discounts
Order Discounts - Savings from discount codes
Total - Final amount with all discounts applied
Total Savings - Highlighted savings badge

Product Management

Adding Products

Search and select products from your catalog. You can add multiple products to create a compelling offer set.

Ordering Products

Drag products up or down to reorder how they appear to customers. Put your most important upsells first.

Setting Discounts

Configure per-product or per-variant discounts:

Per-Product (grouped mode) - Apply one discount to all variants
Per-Variant (ungrouped mode) - Set different discounts for each variant

Variant Grouping

Grouped Mode:

Products with multiple variants show as one product
A variant selector dropdown lets customers choose
Cleaner appearance when you have many variants
One discount applies to all variants

Ungrouped Mode:

Each variant appears as a separate product
No variant selector needed
Highlight specific variants you want to promote
Set different discounts per variant

Tip: Use ungrouped mode when you want to push specific variants (e.g., "Small - 20% off" vs "Large - 10% off"). Use grouped mode for a cleaner, less overwhelming display.

Styling Options

Logo and header image

Upload a custom logo (displays at the top)
Add a header image (displays below logo, above description)
Leave blank to show your shop name as text

Custom button text

Change the proceed button text to match your voice:

"Continue to Checkout"
"Complete My Order"
"Secure My Purchase"
"Get My Products"

Skip button

Enable an optional skip button that lets customers bypass the modal. Configure where skip redirects (usually homepage or a specific page).

Visual Editor

The Pre-Checkout Extension includes a live preview that updates as you configure:

See exactly how your modal will look
Preview your logo, header image, and styling
View how products appear (grouped vs ungrouped)
Test the layout on desktop and mobile
Make adjustments with instant feedback

Tip: Use the live preview to ensure your modal looks polished before activating.

Best Practices

Tip: Choose upsell products that complement the items already in the cart. Customers are more likely to add relevant products than random suggestions.

Tip: Keep your description concise and benefit-focused. Customers should immediately understand the value of stopping to review your offers.

Tip: Use clear, action-oriented button text that creates momentum toward completing the purchase. "Secure My Order" performs better than generic "Continue."

Tip: Limit upsell products to 3-5 items. Too many choices can overwhelm and reduce conversion.

Warning: Test your modal on mobile devices. Most customers shop on mobile, so ensure your layout looks great on smaller screens.

How Customers Experience It

Customer clicks your checkout link
A modal overlay appears before they reach checkout
They see their cart items at the top with images, quantities, and prices
Below, your upsell products appear with "Add" buttons
They can edit quantities, change variants, or add upsells
Cart totals update in real-time with every change
They click your CTA button to proceed to checkout
They arrive at Shopify checkout with their updated cart

Info: The Pre-Checkout Extension creates a strategic pause in the checkout flow, giving you a final opportunity to increase order value with relevant, well-presented offers.