This document covers the upsell after process for legacy screen branding theme checkouts and storefronts that do not have the Visual Builder enabled themes. 

Navigation

Upsell After

Upsell After offers allow you to present your customers with one or more offers for additional products after they click the finalize order button. Customers who have committed to purchase from you are very likely to add additional products to their order at this point in the purchase process. For example if you sell printers a logical upsell would be the USB cable or additional toner cartridge. The customer may have forgotten to add these to their cart while browsing, but would be interested in adding them to their order.

Offers - An offer is the individual sales offer shown to the customer. The customer can be shown as many offers as you want to configure.
Paths (Optional) - Allows the merchant to organize the sequence of offers that are shown to a customer. Most merchants should have a single path. Multiple paths can be used when split testing different sequences or when specific paths are hard coded on item buy links

The following is a sample of what an upsell screen might look like with inserted graphics and text.

You can add screen branding to it as well see the example below where you see the header placed in it.

What type of items should I Upsell?

Qualifiers for Upsell could be anything that is either related to the item being purchased, a service that might appeal to the customer, or a product that would appeal to the target demographic of the customer that is purchasing. Let's say that you sell a Body Building Supplement Drink Mix. You might want to Upsell your Quick Energy Protein Bars. This is a complementary product that may not have otherwise been seen by the customer.

How does the Upsell system work?

After the customer clicks the finalize order button the system checks to see if any Upsell offers are triggered by the items that they are purchasing. If the customer meets the criteria then the Upsell pages will be displayed, one after another, in priority order, until all the Upsells are shown. A timer is set on the customer's shopping cart to make sure their shopping cart turns into a completed order even if the customer closes the browser during the Upsell pages. This allows the merchant to run the customer through a gauntlet of typically one to seven pages of products. Each Upsell page will feature a single product. The customer will be asked to click yes or no as to whether they want to add the item to their cart. If the customer clicks "yes", the item is added. UltraCart will recalculate totals (tax, shipping, etc) and the payment will then be processed.

Upsell After Configuration

There are two sections to UltraCart's Upsell section; Offers and Paths.

Store Wide Options

Do not offer customers anything they've purchased in the past.

 This feature is based on the customer email address and will block the upsell if they have purchased any of the items being offered in the past.

Offers

To add a new Upsell Offer, click on the "new" button to the right of the Offers title. You will be taken to the Upsell After Offer Editor screen.  To see how an upsell will look during the checkout process you can click the preview button. Use the "trigger item" and "suppression item" configuration fields, to determine the logic of which offers are displayed according to the customers' initial selection of items at checkout.

Upsell Offer Editor

The Upsell After offer editor is where you define the details of the upsell after offer(s) that will be presented to your customers during their checkout, when they meet the defined criteria.

Navigation

Editor Sections

 The Upsell Offer editor has 4 sections to it:

1. Items (Required)
2. Options
3. Trigger/Suppression
4. HTML (Required)

Each offer has numerous options that are configurable on it.  Below is a screenshot of the upsell offer editor and a description of each of the configuration fields.

There are a lot of different configuration options on an upsell offer.  The tables below provides descriptions of what each configuration field does.

Each offer will have a Offer Name which will be your description of the offer. After you have given the offer a name, you will then need to configure at least the required sections of the upsell after offer.

Items Section

Options Section

Trigger/Suppression Section

HTML Section

Using Graphics in your Before/After HTML

Storefront - New UI

Before your graphic can be displayed in the offer screen, you'll upload it in the file manager in the storefront menu:

<img src="https://demo.ultracartstore.com/FleaSoap.gif" />

 Screen Branding Themes - Old UI

Before your graphic can be displayed in the offer screen, it must be uploaded to the Graphics Library. For more information, see the Screen Branding/Graphics Library section of the UltraCart Reference Manual. The following is a sample HTML image source tag that you would use to display a graphic that resides in UltraCart's Graphics Library:

<img src="/cgi-bin/UCGraphic?MERCHANTID=DEMO&FILENAME=FleaSoap.gif" />

Custom Yes/No buttons in the Upsell Offer

Altering the appearance of the Yes No buttons

You may use css to alter the appearance of the Yes No buttons.
The buttons are outputted within the following html block (which is subject to change; test your screens!)

<table class="ucUpsellButtonTable">
          <tbody><tr>
            <td>
              <div id="ucUpsellYesButtonId" class="ucUpsellYesButton">
                <input border="0" type="image" class="ucUpsellYesButtonOverlay" alt="Yes" src="/checkout/images/spacer.gif" name="yes">
              </div>
            </td>
            <td>
              <div id="ucUpsellNoButtonId" class="ucUpsellNoButton">
                <input border="0" type="image" class="ucUpsellNoButtonOverlay" alt="No" src="/checkout/images/spacer.gif" name="no">
              </div>
            </td>
          </tr>
        </tbody></table>

The buttons are input images pointing to spacers. They are surrounded by <div> blocks that use a background image to show the actual button. This allows for maximum browser compatibility.

Here's an example you could add to a style tag with the <before> section, placed in between opening and closing (<head> ...button code here... </head>) head tags as the first part of the of the HTML section of the upsell offer editor:

.ucUpsellNoButton {
background-image: url(https://www.mysite.com/reallycoolbuttons/no.gif);
background-repeat: no-repeat;
height: 45px;
width: 82px;
}
.ucUpsellNoButtonOverlay {
height: 45px;
width: 82px;
}
.ucUpsellYesButton {
background-image: url(https://www.mysite.com/reallycoolbuttons/yes.gif);
background-repeat: no-repeat;
height: 45px;
width: 82px;
}
.ucUpsellYesButtonOverlay {
height: 45px;
width: 82px;}

Swapping the order of the Yes No button

Some merchants wish to make the No button appears before the Yes button on a page. This requires additional html code, but can be achieved.
First, hide the default buttons.

.ucUpsellButtonTable { display:none; }

In the footer section of your upsell html, add the following, styling them as you see fit.:

<table>
    <tr>
        <td>
            <img src="/checkout/images/upsellNo.gif" onclick="ucSelectNo()" style="cursor:pointer">
        </td>
        <td>
            <img src="/checkout/images/upsellYes.gif" onclick="ucSelectYes()" style="cursor:pointer">
        </td>
    </tr>
</table>

This will display the two buttons, with the No button first. The onclick events will handle the form submission.

Multiple sets of yes no buttons on an upsell page

Merchants employing this usually have a long upsell page, and wish to place yes/no buttons a third of the way down the page, and then again at the end of the page.

Steps Involved

1. Hide the existing buttons
2. Add your buttons

Hide the existing buttons

The upsell after configuration page has text fields labeled Before and After. These text areas allow you to place html markup before and after the <form> section of the html page. Within the <form> section are the standard yes/no button. To hide the button, you need to wrap the <form> section of the page within a div that is hidden.

1. Add the opening div tag at the bottom of the Before section.
2. Add the closing div tag at the top of the After section.
3. Add css to stylize the div tag such that it is invisible.

The image below illustrates these three steps. 

Add your buttons

The upsell page, when generated by UltraCart, will contain numerous javascript helper methods. Two of them (ucSelectYes and ucSelectNo) are needed to add custom buttons. Because you cannot edit the html within the form element, any buttons you add in the Before or After section will be outside the <form> tags. Simply adding <input> elements in the Before or After will not work.

The standard method is to use large, eye-catching images for the yes and no buttons, wrapping them in hyperlinks that call ucSelectYes and ucSelectNo.
Here is a sample block for a yes and no button:

<table width="485" align="center">
    <tr>
        <td>
            <a href="javascript:ucSelectYes()">
                <img src="http://www.mystore.com/images/upsell_yes_big_button.jpg" />
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:ucSelectNo()">
                <img src="http://www.mystore.com/images/upsell_no_big_button.jpg" />
            </a>
        </td>
    </tr>
</table>

If this were your yes/no buttons, you could repeat the code block above wherever you wished to place buttons.
The image below shows two sets of custom buttons on an upsell page. You could have as many as you deem necessary. 

Paths

To add a new Upsell Path, click on the "new" button underneath the Paths title.  You will be taken to the Upsell Path Editor screen. 

Path Visualizer

The path visualizer is a simple tool that allows you to visualize the different routes through the upsell path that the customer can end up going.  Below is a screen shot of the upsell visualizer and explanation of the starting parameter fields.

Below is an example of the output generated by the upsell visualizer.

 Advanced Javascript Methods For Upsell Customization

We've already given you a taste for using the JavaScript methods in the tutorial Multiple sets of yes no buttons on an upsell page.  This document will describe all of the JavaScript methods available on the page upsell after page.

ucSelectItem

function ucSelectItem(value, quantity);

You can select a specific item on the upsell by calling:

ucSelectItem("ITEMID", 1);

ucSelectMultiple

function ucSelectMultiple(multipleSelectionDetails);

You can select a specific items on the upsell by calling the method with a CSV string like itemId,quantity,itemId,quantity,...

ucSelectMultiple("FOO,1,BAR,2");

ucSelectYes

function ucSelectYes();

You can select this upsell by calling the method:

ucSelectYes();

ucSelectYesWithQuantity

function ucSelectYesWithQuantity(quantity);

You can select this upsell with a quantity by calling the method:

ucSelectYesWithQuantity(2);

ucSelectNo

function ucSelectNo();

You can decline this upsell by calling the method:

ucSelectNo();

Upsell After FAQ

This document covers common questions regarding Upsell After.

Order failed during the auto closing of an upsell order

We got an order from a customer, and it was rejected because

This order failed during the auto closing of an upsell order.

 Alternatively, we see this message appearing in the merchant comments for the order:

Whenever someone enters into the upsell section of the checkout process the system starts a 45 minute timer. At the end of the 45 minute timer the system automatically finalizes their order. This occurs if the customer closes out their web browser before going all the way to the receipt. If the credit card fails to charge successfully during the finalization step then the order goes into the Accounts Receivable with a note on it. You should followup with the customer to obtain valid credit card information so that the order can be processed.

How long can a customer be inactive during the upsell after?

When a customer enters the upsell process the system sets a flag on their shopping cart session and starts a 45 minute inactivity time.  Each time the customer progress through an upsell the timer resets.  If the 45 minute timer expires (because the customer leaves the checkout process or is inactive for too long) then the system turns the cart into an order.

Is the PayPal Express Checkout payment compatible with upsell after offers?

Yes, but with limitations. For example, if the initial purchase item is a non shippable item, it won't be able to trigger an upsell offer that contains a shippable item (this is due to the fact that the shipping calculation steps within paypal would not have been triggered during the initial checkout.)

Which order tokens are valid for use in the upsell after offers?

The following order tokens are functional in the upsell after offer screens:

Q: Can I fire tracking code on the upsell page instead of the receipt?

A: No.

Reason: During the upsell process, UltraCart has not attempted a payment or generated an order ID.  If you try to fire a conversion pixel on the upsell page then you will suffer the following limitations:

1. You will not have an order id to pass to the 3rd party.
2. You will not know that the payment was successful and could fire it when a declined card happens which would result in the affiliate expecting to get paid.
3. You would not be accounting for the full revenue of the order.

Q: Can UltraCart fire the conversion pixels when the upsell closer generates the order in the background?

A: No.

Reason: The upsell closer is a background process that turns idle abandoned carts from the upsell process into orders.  Conversion pixels are typically JavaScript code and have to be fired by the same web browser that contains the cookies originally set for the conversion to be tracked properly.

Q: Is there a way to track affiliate sales for upsells that abandon?

A: Yes, if you use UltraCart's internal affiliate system.

Reason: UltraCart's affiliate system persists the information normally stored in only cookies by other affiliate systems onto the actual shopping cart record.  When the upsell closing process occurs, UltraCart is able to account for the affiliate commission as well.

Q: I have to have XYZ third party affiliate system.  What can I do about tracking?

A: Make the upsells reasonable.  Customers want to see their receipt.  If you don't make the customer watch a 30 minute video before you allow them continue through the upsell then the customer will typically drive to the receipt (clicking no on everything they don't want).  Also, don't make the upsell sequence feel like the Upsell Guantlet of Doom that the customer thinks will never end.  Show them a few upsells and generate the additional revenue.

Q: I need to bypass the default upsell after path for a specfic item purchase link, can I do that?

Sometimes you may need to by-pass your configured upsell offers.This can be accomplished by creating an additional upsell after path, configured with none of the steps enabled within the path and saving the path with zero percent traffic. Then on the buy link of the item, append the new "empty" upsell after path to the buy link URL using the "upsellPathCode" parameter:

Q: I have an upsell offer that has options on it and its not running during the checkout process even though it meets the trigger and suppression criteria, why is that?

A: The upsell after tool supports options on the upsell item only if the option is a drop-down list. No other option types are not supported at this time and will be suppressed during the checkout.

Q: We are a long time merchant. We are presently have upsell after offers configured and they are going through the Screen Branding Themes checkout, using a custom API checkout form on the front-end. How does the Upsell After offer integration differ among the various implementations? (Custom Checkout and legacy screen branding themes, and newer storefronts themed checkouts?

A: There is no real difference in functionality between the legacy screen branding theme based checkout and the Storefront themed checkout, as it applies to the Upsell After Offer portion of the checkout process (other than the actual layout of the Upsell After offer screens. You'll definitely want to migrate towards the SF from the legacy as it gives a superior mobile experience. 

You can determine which upsells that a customer sees by configuring a path:

https://ultracart.atlassian.net/wiki/display/ucdoc/Upsell+After#UpsellAfter-Paths

You may configure one path that is suitable for brand A and another path that is suitable for brand B.

To trigger a specific path, there are two ways to accomplish this:

• Legacy Screen Branding or StoreFront checkout pass the UpsellPathCode parameter to the UCEditor buy link URL:
https://ultracart.atlassian.net/wiki/display/ucdoc/Parameters+that+can+be+passed+to+UCEditor
• REST Checkout API set the upsellPathCode property on the cart and perform an update prior to the checkout handoff call.
https://ultracart.atlassian.net/wiki/display/ucdoc/UltraCart+REST+Checkout+API#UltraCartRESTCheckoutAPI-Cart

As you can see from this documentation, paths can be specified regardless of the checkout methodology that you’re employing.

Related Documents

Advanced JavaScript Methods for Upsell Customization

Customize the Yes No buttons on an Upsell After screen

Multiple sets of yes no buttons on an upsell page

Upsell Offer Editor

Overview

The Upsell After offer editor is where you define the details of the upsell after offer(s) that will be presented to your customers during their checkout, when they meet the defined criteria.

Navigation

Editor Sections

 The Upsell Offer editor has 4 sections to it:

1. Items (Required)
2. Options
3. Trigger/Suppression
4. HTML (Required)

Each offer has numerous options that are configurable on it.  Below is a screenshot of the upsell offer editor and a description of each of the configuration fields.

There are a lot of different configuration options on an upsell offer.  The tables below provides descriptions of what each configuration field does.

Each offer will have a Offer Name which will be your description of the offer. After you have given the offer a name, you will then need to configure at least the required sections of the upsell after offer.

Items Section

Options Section

Trigger/Suppression Section

Using Graphics in your Before/After HTML

Storefront - New UI

Before your graphic can be displayed in the offer screen, you'll upload it in the file manager in the storefront menu:

<img src="https://demo.ultracartstore.com/FleaSoap.gif" />

Screen Branding Themes - Old UI

Before your graphic can be displayed in the offer screen, it must be uploaded to the Graphics Library. For more information, see the Screen Branding/Graphics Library section of the UltraCart Reference Manual. The following is a sample HTML image source tag that you would use to display a graphic that resides in UltraCart's Graphics Library:

<img src="/cgi-bin/UCGraphic?MERCHANTID=DEMO&FILENAME=FleaSoap.gif" />

This page explains how to have multiple sets of yes/no buttons on an upsell page. Merchants employing this usually have a long upsell page, and wish to place yes/no buttons a third of the way down the page, and then again at the end of the page.

Steps Involved

1. Hide the existing buttons
2. Add your buttons

Hide the existing buttons

The upsell after configuration page has text fields labeled Before and After. These text areas allow you to place html markup before and after the <form> section of the html page. Within the <form> section are the standard yes/no button. To hide the button, you need to wrap the <form> section of the page within a div that is hidden.

1. Add the opening div tag at the bottom of the Before section.
2. Add the closing div tag at the top of the After section.
3. Add css to stylize the div tag such that it is invisible.

The image below illustrates these three steps.

Add your buttons

The upsell page, when generated by UltraCart, will contain numerous javascript helper methods. Two of them (ucSelectYes and ucSelectNo) are needed to add custom buttons. Because you cannot edit the html within the form element, any buttons you add in the Before or After section will be outside the <form> tags. Simply adding <input> elements in the Before or After will not work.

The standard method is to use large, eye-catching images for the yes and no buttons, wrapping them in hyperlinks that call ucSelectYes and ucSelectNo.
Here is a sample block for a yes and no button:

<table width="485" align="center">
    <tr>
        <td>
            <a href="javascript:ucSelectYes()">
                <img src="http://www.mystore.com/images/upsell_yes_big_button.jpg" />
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:ucSelectNo()">
                <img src="http://www.mystore.com/images/upsell_no_big_button.jpg" />
            </a>
        </td>
    </tr>
</table>

If this were your yes/no buttons, you could repeat the code block above wherever you wished to place buttons.
The image below shows two sets of custom buttons on an upsell page. You could have as many as you deem necessary.