Overview

UltraCart's Visual Builder provides a powerful and intuitive way to create and manage upsell and downsell funnels. This functionality allows you to design post-checkout offers visually, without needing to write any HTML, CSS, or JavaScript.

The Visual Builder is a significant upgrade that empowers you to maximize incremental revenue from your existing customer base. It offers a streamlined, drag-and-drop interface that simplifies the entire process, from designing your offers to analyzing their performance.

Key Benefits

• Visual Design Interface: Build your upsell pages with a visual editor, eliminating the need for coding.

• Drag-and-Drop Configuration: Easily configure and reorder your offer paths and specific offers with a simple drag-and-drop system.

• A/B Experimentation: Quickly create and run A/B experiments on different paths and individual offers to optimize performance.

• Responsive Design: All upsell pages created with the Visual Builder are fully responsive and mobile-friendly, ensuring a seamless experience for all customers.

• Integrated Video Support: Effortlessly embed videos from popular services like YouTube, Vimeo, and Wistia to enhance your offers.

• Real-time Performance Metrics: Track key metrics in real time, including true net incremental revenue, so you can understand the direct impact of your funnels.

• Advanced Analytics: The system automatically tracks critical data points such as abandons and refunds, providing a complete picture of your funnel's performance.

• Easy Duplication: Copy entire upsell paths between multiple StoreFronts, saving you time and effort when managing multiple brands.

To get started, expand the Content section (Tab) of your StoreFront and click on Upsells.  If you do not see Upsells, then you are not running a theme that supports them.

Open

Create a Path

The first thing that you want to do is create a path by clicking on the Add Upsell Path button.  A path is a sequence of offers that a customer will experience during the checkout if they have an item in their cart that triggers the path.  A customer will go through each path that they qualify for starting at the top of the page and working their way to the bottom.

Open

Path Settings

Once you have created a Path you can also configure Path settings to trigger what path a customer might see based on different factors. To view the Path settings simply click on the Pencil Icon on the right as shown below.

Open

This will open the Upsell Path Editor.

Open

Upsell Path Editor Settings

Simply click Save at the bottom of the model to set and changes to the setting you would like to make.

Creating an Upsell Offer

Click on the + button to create your first step. 

A prompt will appear on the screen.  We're going to create an Offer so click on OK as shown below.

Open

When the editor appears, there are 5 minimum things that you must complete.  They are:

1. Give the offer a meaningful name (not visible by the customer)

2. When ready, set the offer to active.

3. Choose the item(s) that are being upsold to the customer.

4. Pick one of the pre-defined layouts that you want to start with.  After selecting your layout click on the preview of the offer to launch the visual editor for the upsell.  Make whatever content adjustments to the offer that you want.  Note that the first two pre-defined layouts use a textblock of "lorem ipsum" as a placeholder.  So make sure you change that to some meaningful marketing verbiage.

5. Save

Open

Offer Settings

Advanced Settings

Triggers Criteria

Open

Suppression Criteria

Open

Accessory Item Settings

Open

Offsite Settings

Open

Other Settings

Open

Path View

Now that we have our first offer created, let's look at how it shows in the path.  When you hover over the offer you will see a grey popup set of tool icons along with a DOWNSELL option.  There is also a quick toggle to make the offer active (blue) OR inactive (grey).

Open

View Upsell Type

You can now sort your upsells by Pre and Post upsell after, this will allow you to filter your upsells to see just the offers that are offered post checkout or one that may be offered Pre checkout.

Open

• All Upsells - This will simply show all the offers currently configured

• Post Checkout - This will allow you to filter to only see Post Checkout upsells.

• Pre Checkout - This will allow you to filter to only see Pre Checkout upsells.

Upsell Status

You can use the “Upsell Status” drop-down list to filter your upsell offers between “Active”, “All”, and “Archived”. This will be useful when you have a large number of upsell offers.

Open

• Active - will display all offers that are not archived. NOTE: This includes both path’s and offers that have the have not been marked as archived via the three doth menu, so these will include both active and inactive offers, so longs as they have not been archived.

• All - This will display all of the paths and offers, both active and archived.

• Archived - Will display archived Path’s/Offer's.

Upsell Pagination

The Upsell page will now show up to 50 offers, anything over 50 offers will be split out into additional pages. Each page will display 50 offers, in the example below we have 83 offers so we would see 50 offers on page 1 and 33 offers on page 2.

Open

Upsell Archive

With the new Upsell Status system we are also introducing the ability to Archive upsell paths, this will allow upsells to be hidden from view to reduce confusion and clutter on the Storefronts Upsell Screen. You can archive an upsell by hovering over the 3 dots to the right of the Path and clicking on Archive as shown below.

Open

Once a path has been archived it will only be viewable by changing the Upsell status mentioned above to either All or Archived. You can also remove an Path from the Archive by again hovering over the 3 dots and clicking on Unarchive as shown below. You will also notice a new Archived status display for any Paths that are currently archived.

Open

Editing the Path Settings of an Existing Path

Clicking the pencil in the top right corner of the path row will open this dialog window:

Open

Path Settings

Open

You can edit the:

Creating an Offer Experiment

Hover over an offer and click the experiment icon as shown below.

Open

Now that the single offer is contained in an experiment we can hover over the offer and use the duplicate tool as shown below.

Open

We now have two offers within an experiment.  Since there are two offers, each one will receive 50% of the traffic.  If there were three offers in an experiment then each one would receive 33.33%, etc. (Please note that the traffic percentage is fixed between the experiment offers.)

Open

Open

Creating a Path Experiment

You can also create A/B tests for a particular path.  These can be used to test different sequences or combinations of offers to see what is the optimal arrangement.  To create a test you can either click the "Add Variant Path" button or duplicate an existing path as shown below.

Open

Once you have two or more variants to a path, you will see that the traffic is going to be split between the variant paths.

Open

After a winner has been determined you can click the promote tool for the variant path winner.  The looser will automatically be removed. 

Open

Drag and Drop

You can drag and drop offers/experiments to rearrange their position within the path or move them into new paths.  You can also drag and drop offers into or out of an experiment.  See the video below.

Viewing Statistics

To view the statistics enter the start/end dates and then click the view button as shown below.

Open

For each offer you will see the following statistics

• Conversion percentage

• Average Visitor Revenue (AVR)

• Average Visitor Profit (AVP) - requires configuration of cost of goods sold (COGS) on your items

• Views

• Transactions (TRANS)

• Revenue (REV)

• Per Sale Revenue (PSR)

• Abandons

• Declines - number of people that clicked no to the offer.

For each of the paths you will also see:

• Average Visitor Revenue (AVR)

• Average Visitor Profit (AVP)

• Views

• Transactions (TRANS)

Webinar Video: Upsell After Visual Builder

Advanced Topics

Replacing default Yes-No buttons with custom Yes-No buttons

Using custom buttons in place of the defaulted 'Yes'& 'No' buttons for your upsell offer is a simple process. 

To modify the button images, edit your upsell offer, then highlight a button in the Visual Editor then clicking the "setrtings" icon or clicking the 'S' hotkey:

Open

In the settings panel that opens you can edit the button by:

• Changing the default button text and customizing the text and background colors, etc.

• Adding sub-text

• Applying an icon

• Uploading a custom image

Open

Offsite Content

One of the advanced features of the StoreFront Upsell system is the ability to have an offsite page as part of the upsell sequence.  Below is a screenshot of the portion of the advanced configuration associated with offsite content.

Open

Here is what the three fields represent:

If your offer page contains multiple items that the customer to choose from you can redirect back to the Offsite Confirm Yes URL and specify ?ADD=ItemId parameter on the URL.

Frequently Asked Questions

Q: When I create the VB version of the upsell, will it automatically replace the legacy one, or will I need to switch it over, or delete the old one? What's the mechanism that switches from the old to the new?
A: Once you have created an upsell offer in the Visual Builder, it will take over and the old offers will be ignored. You will not need to delete the old offers for the VB offers to take affect.

Q: How do I test to see if I got my upsell offers configure correctly?
A: Place a test order to verify that the correct offers for the checkout scenario appear. If you do not see the expected offers, email support referencing the test OrderId and a description of any offers that were expected to be displayed but did not appear. UltraCart support will inspect the server-side shopping cart logs to troubleshoot the issue and then report back to you.

Q: I am trying to add an item as a trigger item to a path, but the item is not being accepted. Why is that?
A: If an item has the item option enabled 'Exclude from search' then it cannot be added to the upsell path as a trigger item. Edit the item and remove that setting, then go back to configure it as a trigger item in the path.

Q: We have had a few customers reporting that they were unable to click the 'yes/no thank's buttons in an upsell after offer, what could cause that to randomly occur? 
A:  The yes no buttons require Javascript to be enabled. IF the customer has disabled Javascript in their browser, that will prevent them from being able to click either option. Their order will be captured by the upsell after inactivity closer routine.

Q: When a customer purchases an item from a Storefront upsell, how do I configure the upsell offer so that the upsell item, if selected, will replace the trigger item in their cart? 
A: In the Upsell Offer editor, go to the Trigger Criteria section and locate the Items area. Check the "Remove Trigger Item" checkbox. When the ‘Remove Trigger Item’ checkbox setting is enabled, this will automatically remove the original trigger item from the customer's cart when they accept the upsell offer, effectively replacing it with the upsell item.