Pre-Checkout Upsells

Planning Your Pre-Checkout Upsell

A pre-checkout upsell is a promotional offer presented to customers before they reach the checkout page. It’s designed to increase cart value by encouraging customers to add additional items based on what they’re already buying. Think of it as a last-minute “you might also like” suggestion that boosts sales without feeling pushy.

What to Consider Before You Start

Before building your pre-checkout upsell, take a moment to plan the essentials:

1. Trigger Conditions:

• Specific Items: Will the upsell trigger when certain products are added to the cart?

• Store-Wide: Should the offer apply no matter what items are in the cart?

• Tags & Categories: Consider using product tags or categories to streamline item selection.

2. Upsell Offer Details:

• What Will You Offer? Select the product(s) you want to promote in the upsell. These should complement the items customers are likely to buy.

• Pricing & Discounts: Will you offer a special discount or bundle deal? Decide this in advance to make setup faster.

3. Customer Experience:

• Timing & Frequency: How often should the offer appear? (e.g., only once per session or on every qualifying cart update).

• Offer Presentation: What layout and messaging will grab attention while keeping the experience smooth and intuitive?

4. Inventory & Availability:

• Ensure the items in your upsell have sufficient stock to avoid disappointing customers with unavailable products.

By planning these key elements, you’ll be ready to build an effective pre-checkout upsell that maximizes revenue while providing a seamless shopping experience. Let’s dive in!

Pre-Checkout Upsell Setup

1. Navigate to the StoreFront:

   • Go to StoreFront > Content > Upsells.
     
     

     Open

     

2. Add a New Upsell Path:

   • Click Add Upsell Path in the top-right corner.
     
     

     Open

     

3. Configure as Pre-Checkout:

   • By default, the new upsell is set as a post-checkout upsell.

   • Click Edit on the upsell block.

   • In the Upsell Path Editor, select Pre-Checkout (Upsell Modal) from the Location dropdown and click Save.
     
     

     Open

     

Adding an Upsell Offer

1. Create the Offer:

   • Click the Plus Icon inside the upsell box.

   • When prompted, leave the default setting as Offer and click OK.
     
     

     Open

     

2. General Offer Settings:

   • Name the Offer: Enter a descriptive name for the upsell offer.

   • Add Item IDs: Specify the item(s) that will be added to the cart when the customer accepts the upsell offer. Using a single item ID provides a clear “yes” or “no” decision for the customer, but you can also offer multiple items if the selected offer layout supports it or if you’re comfortable customizing the layout using the Visual Builder. Keep the offer simple to avoid overwhelming the customer.

3. Choose an Offer Layout:

   • Start with a default layout, such as one that displays the item, its options/variations, and buttons for accepting or rejecting the offer.

     Open

     

Pre-Checkout Upsell Triggers

Triggers determine when a pre-checkout upsell will be shown to customers. These triggers can be applied at two levels:

• Upsell Path Level: Apply triggers to the entire upsell path, affecting all offers within it.

• Individual Offer Level: Apply triggers to specific offers within the upsell path for more targeted promotions.

In this example, we’re adding a trigger to an individual offer within the upsell path:

• When Specific Items Are Added: Use individual item IDs or a tag applied to multiple items.

• Based on Cart Contents: Show the offer only if specific items are already in the cart.

To adjust trigger settings:

• Expand Advanced Settings in the upsell offer editor.
  
  

  Open

  

Formatting Pre-Checkout Upsell Content

• Use the Visual Builder to customize the upsell’s content in the upsell editor (not directly within the StoreFront).

• Arrange components to allow users to select item variations and accept or reject offers.
  
  

  Open

  

   

Pre-Checkout StoreFront Setup

The steps in this guide assume a typical StoreFront setup where the Add to Cart button submits an Item Form Component that displays the cart, allowing customers to proceed to checkout. Since we’re adding a pre-checkout upsell, we’ll adjust the Item Form Component to show the Upsell Modal instead.

If a trigger item ID or item tag is specified, the upsell will only appear when the cart contains qualifying items. If no matching items are present, the Add to Cart button will bypass the upsell and function as usual, directing customers to the next appropriate step. This ensures a seamless shopping experience regardless of upsell conditions.

Adjusting the Add to Cart Button Behavior

1. Modify the Hierarchy:

   • Add the Upsell Modal Component in the hierarchy view.

   • In this example, we’re adding the Upsell Modal in the Item Display Container.
     
     

     Open

     

2. Configure the Upsell Modal Component Settings:

   • Specific Path: Select the upsell path name.

   • Once Per: Choose Visit (one session) or Page Load (each time the page loads).

   • After Upsell Complete Action: Set to Checkout.

   • Trigger: Leave as None.

   • Customize the modal’s appearance using style options.
     
     

     Open

     

3. Set the Add to Cart Button Action:

   • Ensure the Action is set to Submit Form Action.
     
     

     Open

     

4. Edit the Item Form Settings:

   • Set After Submission Action to Show/Hide Action.

   • Under Show These, check the upsell modal component you created.
     
     

     Open

     

      

With these adjustments, when a customer clicks the Add to Cart button, it will trigger the form action to display the Pre-Checkout Upsell Modal, provided the item tags match the configured triggers. If the customer accepts the offer, the upsell item will be added to the cart, and the process will continue to checkout. If the customer declines the offer, the checkout will proceed normally, without the upsell item being added.

Important Notes