Slideout Upsell Widget

Creating the Slideout Upsell Widget

This section guides you through the process of creating and configuring the Slideout Upsell Widget, an effective tool designed to increase Average Order Value (AOV) by dynamically suggesting products within the customer's cart.

Widget Overview

Widget Name: Slideout Upsell
Purpose: Adds a visually engaging upsell or cross-sell section within your dynamic cart as a slideout panel. It suggests related or high-margin products while the customer reviews their cart, helping to increase AOV.
Where It Works: Dynamic Cart
Main Features:
- Appears as a collapsible panel that slides out from the dynamic cart.
- Displays product image, name, and price.
- Allows quick “+ Add” functionality to instantly add items.
- Can include multiple products using manual selection or rule-based logic.
Configuration Options:
- Customize the trigger position and appearance of the slideout tab.
- Select upsell logic (manual or rule-based recommendations).
- Choose the number of products shown.
- Modify font styles, button appearance, and spacing.
- Enable/disable based on cart value or product rules.

Step-by-Step Creation

Click Create Widgets: From your dashboard, click Create Widgets. A new page titled "Add New Widgets" will appear.
Fill in the Details: Fill in the Widget Title and a Short Description for your widget.
Select a Template: If any existing widgets align with your title, they will appear at the bottom of the page. Select the desired template.

Widget Configuration: Content

After clicking Next, you will be taken to the customization page. We will begin with the Content tab.

Product Selection: Since we are using the Manual option, upload the specific products you want to feature as upsells in the slideout panel.
Custom Text: Customize the heading text and the accompanying cart message to encourage customers to view the upsell products.
Discounts: If applicable, define discounts and percentages to apply to the suggested upsell products.

Once the content is set, click Save Changes.

Widget Configuration: Style and Advanced

Style Section

The Style section controls the visual design of your slideout:

Heading Style: Customize the typography of the widget's title.
Product Settings: Adjust the appearance of the product cards, including image size and layout.
Button Style: Ensure the “+ Add” button is prominent and matches your brand colors.

Advanced Options

The Advanced tab provides final control over where and how the widget is displayed:

Device Targeting: Control which devices (Desktop, Tablet, or Mobile) the widget will appear on.
Custom CSS: Use this field to input custom CSS for precise styling that goes beyond the standard options.

Once all sections are complete, click Save. Your Slideout Upsell widget is now created and ready for launch.

Publishing Your Configured Widget Live

This following documentation section provides the final, detailed steps required to publish your fully configured widget and make it visible to customers on your live storefront.

01. How to successfully setup a widget

02. Understanding and Creating Audiences

03. Creating Placements and Zones

04. Campaigns

05. Displaying Your Widgets on the Storefront

Viewing the Live Widget

To see the final result, trigger your dynamic cart on your website. The Slideout Upsell panel should be visible, perfectly integrated with your cart, showing the products you selected.