Interstitial Upsell Widget
The Interstitial Upsell Widget is a powerful cross-selling tool that presents a modal-style promotion between page transitions (e.g., when a user clicks to navigate from a Collection Page to a Product Page). It encourages users to accept a complementary or higher-value offer before proceeding, boosting Average Order Value (AOV) without disrupting the current page view.
| Attribute | Description |
| Widget Name | Interstitial Upsell Widget |
| Core Purpose | Displays a full-screen, dismissible pop-up promotion during site navigation to offer a high-converting upsell or cross-sell with a time limit. |
| Where It Works | Webpage (Activated by user navigation clicks). |
| Key Features | Modal-style prompt; configurable skip button; direct "Add to Cart" functionality; optional timer for urgency. |
| Limitations | Only works on Webpages; not available on Cart or Checkout pages. Effectiveness can be reduced if the user immediately dismisses the pop-up. |
Configuration Options
The widget is configured using the standard three-tab structure: Content (logic and messaging), Style (visuals), and Advanced (technical settings).
1. Step-by-Step Widget Creation
-
Click Create Widgets in your Dynamatic dashboard.
-
On the "Add New Widgets" page, fill in the Widget Title and a brief description.
-
Search for and select the Interstitial Upsell Widget.
-
Click Next.
-
Select your preferred visual template from the available options (typically 5 templates) and click Select.
2. Content Tab: Logic and Triggers
 |
 |
 |
 |
 |
 |
The Content section defines the offer, the product set, and the display logic.
| Setting | Functionality | Detail |
| Product Selection | Defines the recommended items presented in the pop-up. | Products can be added Manually (hand-selected), via Feeds (dynamic groups), or through advanced options. |
| Trigger Products | Sets the specific products whose presence in the cart (or on the page) triggers the interstitial pop-up. | You can select one or multiple products that must be viewed or added to cart to activate the offer. |
| Timer | Creates a sense of urgency for the offer. | Set a countdown timer to display inside the modal. The user must act before the timer expires. |
| Pop-up Placement | While the widget is full-screen, this may control the internal positioning of the content. | Define the internal title, subtitle, and overall message structure. |
| Display Elements | Customizes what the customer sees on the modal. | Configure the visibility of the product card title, price, stock, vendor, and variant picker options. |
| CTA Button | Controls the buttons on the pop-up. | Customize the text and appearance of the main CTA (Add to Cart) and the Skip and Go button. |
| Discount | Applies savings to the upsell item. | Configure the discount offered on the product(s) presented in the interstitial. |
3. Style Tab: Visual Customization
The Style section allows you to customize the widget's aesthetic features:
-
Layout Options: Customize the overall modal background, colors, and layout structure.
-
CTA Button: Control the background color, text color, font size, and font weight for the action buttons.
-
Product Card: Customize the appearance of the product information, including card borders and text colors.
4. Advanced Tab: Final Refinements
The Advanced tab is for final display control and custom code implementation:
-
Device Setting: Select the specific devices (Desktop or Mobile) where the widget should be visible.
-
Custom CSS: Input custom CSS code for advanced styling not covered by the standard options.
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
05. Displaying Your Widgets on the Storefront