Upsell / Downsell Widget (Funnel Checkouts only)

The Upsell / Downsell widget is a special-purpose widget that is only available when editing an upsell or downsell inside a funnel step that already contains a checkout.

đź’ˇ Important:

This article focuses specifically on how to configure and style the Upsell / Downsell widget itself.

For a complete understanding of upsell and downsell strategy, funnel order logic, and recommended flows, please refer to the main article on Adding Upsells & Downsells to Funnel Checkouts

This means:

  • The widget does not appear in regular pages, popups, or funnels without a checkout
  • It becomes available only after a checkout step, when adding an upsell or downsell
  • The widget is automatically included when you use a pre-made upsell or downsell template
  • If you start with an empty page or popup, you must add the widget manually for the upsell or downsell to function

The Upsell / Downsell widget is the technical core that:

  • Connects the offer to a product
  • Handles one-click payments
  • Controls accept and decline behavior
  • Triggers tags, lists, and automations
  • Manages button behavior and styling

Without this widget, a page or popup will not function as an upsell or downsell, even if it looks correct visually.

How to Add and Configure the Upsell / Downsell Widget

Add the Uppsell / Downsell widget to an upsell/downsell page or popup by simply opening the widgets tab from the Web Studio controls and drag and drop the widget onto your page or popup.

Navigate to the call-to-action button inside the Upsell / Downsell widget and click Edit to open the Upsell / Downsell settings panel.

This panel controls both what product is offered and how the offer is presented and handled in the funnel.

Add Upsell Product

Click Add Upsell Product to select which product you want to offer as the upsell or downsell.

  • You can choose from any product in your product list, such as:
    • Online courses
    • Coaching sessions
    • Memberships
    • Digital products
  • The selected product is what will be charged automatically if the customer accepts the offer.

This step is required — without a selected product, the upsell or downsell will not function.

Overwrite the Price (Optional)

Enable Overwrite the price if you want to set a custom price specifically for this funnel step.

  • This does not change the product’s default price in your store

    The overridden price applies only inside this upsell/downsell

    Perfect for:

    • One-time offers
    • Limited-time discounts
    • Exclusive funnel-only pricing

Use this option to create urgency or reward customers who continue in the funnel.

Button Text

Customize the Button text to control what the customer sees on the main action button.

  • This is the primary call-to-action

    Use clear, benefit-driven copy such as:

    • “Yes, add this to my order”
    • “Upgrade my access”
    • “Grab the deal”
  • Avoid generic text if possible — the button text strongly affects conversions

Enable Add Decline Link to give the customer a clear and respectful way to decline the offer.

  • The decline link sends the customer directly to the next step in the funnel
  • This reduces friction and keeps the funnel moving smoothly
  • It also helps the customer feel in control of the decision, which often increases trust and overall conversion

You can customize the Decline Link Text, for example:

  • “No thanks”
  • “I’ll skip this”
  • “Continue without this”

In most cases, it is strongly recommended to include a decline link.

Providing a clear “no” option:

  • Reduces hesitation and decision fatigue
  • Prevents users from feeling trapped or pressured
  • Often results in higher acceptance rates for the upsell, paradoxically, because the choice feels safer

💡 Tip – When to Disable the Decline Link

You may choose to disable the decline link if:

  • The offer is mandatory for the next step
  • You are intentionally designing a high-commitment flow

If needed, you can disable the decline link entirely to require an explicit choice – but use this approach intentionally and sparingly.

Show Buttons Next to Each Other (Optional)

Enable Show buttons next to each other to display the accept and decline actions side by side instead of stacked.

When enabled:

  • Creates a balanced and symmetrical visual layout
  • Makes the choice clear and transparent
  • Often works well for confident, low-friction offers where the customer already has high intent

When not enabled (default stacked layout):

  • Buttons are stacked vertically
  • This often works better on mobile devices, where vertical flow is more natural
  • Creates a clearer primary action hierarchy, especially when the upsell requires more consideration

Tips & Best Practices:

  • Use side-by-side buttons for:
    • Low-cost add-ons
    • Clear upgrades with obvious value

    • Audiences familiar with your offers

      Use stacked buttons for:

    • Higher-priced or higher-commitment offers
    • Mobile-first funnels
    • Offers that benefit from a more focused, step-by-step decision
  • If you’re unsure which layout performs best, test both using A/B split testing and let real data guide the decision.

Choosing the right button layout helps reduce friction, improves clarity, and can significantly impact conversion rates — especially on mobile.

Connect to Email Marketing

Use Connect to Email Marketing to link the upsell or downsell to your email lists.

  • Add customers who accept the offer to a specific list

    Useful for:

    • Onboarding sequences
    • Product-specific follow-ups
    • Premium customer segmentation

Click Select Lists to choose which email list(s) should be applied.

Tag Customers on New Order (Optional)

Enable Tag customers on new order to automatically tag customers who accept the upsell or downsell.

  • Tags are powerful for automation and segmentation

    Common use cases:

    • Trigger onboarding emails
    • Start follow-up or nurture sequences
    • Identify buyers of specific offers
    • Retarget customers who declined

Tags allow your funnel to connect seamlessly with the rest of your CRM and automation setup.

đź’ˇ Note:

If the customer sees your upsell or downsell, they do not need to re-enter payment details.

The additional cost is charged automatically, which significantly increases conversion rates.

Styling Options for Upsell & Downsell Buttons

Both the Buy button and the Decline button use the same styling options.

This means you can design them consistently and intentionally, while still using color, layout, and effects to guide attention and behavior.

You access these settings via:

  • Style Buy Button
  • Style Decline Button

The available styling controls are identical for both buttons and are described below.

Button Color

Sets the background color of the button.

đź’ˇ Tips

  • Use a strong, brand-aligned color for the Buy button to draw attention
  • Use a more neutral or softer color for the Decline button to reduce visual dominance

Border Color

Controls the color of the button border.

đź’ˇ Tips

  • Use borders for secondary or subtle buttons
  • A border-only Decline button often feels less aggressive and reduces friction

Add Gradient (Optional)

Enables a gradient background instead of a flat color.

đź’ˇ Tips

  • Gradients can add depth and visual interest
  • Best used sparingly and consistently with your overall design system

Text Style

Controls font family, size, weight, and alignment for the button text.

đź’ˇ Tips

  • Keep button text highly readable
  • Use clear contrast between text and background
  • Avoid overly decorative fonts for call-to-action buttons

Shadow

Adds a shadow effect to the button.

đź’ˇ Tips

  • Subtle shadows help buttons feel clickable
  • Avoid heavy shadows on mobile-heavy funnels, where flat design often performs better

Padding Size

Controls the inner spacing of the button.

đź’ˇ Tips

  • Larger padding creates a more touch-friendly button (great for mobile)
  • Smaller padding can work well for compact layouts

Border Radius

Adjusts how rounded the button corners are.

đź’ˇ Tips

  • Rounded buttons feel softer and more modern
  • Square buttons feel more structured and formal
  • Match your overall brand style for consistency

Border Size

Controls the thickness of the button border.

đź’ˇ Tips

  • Use thicker borders for secondary actions
  • Use no border or thin borders for primary actions

Expand Button to Full Width

Makes the button span the full width of its container.

đź’ˇ Tips

  • Highly recommended for mobile-first funnels
  • Helps create a clear, dominant call to action
  • Especially effective for Buy buttons in stacked layouts

Hover Effect

Defines how the button behaves when hovered over (desktop).

Examples:

  • Slide color to the right
  • Fade
  • None

đź’ˇ Tips

  • Subtle hover effects add interactivity without distraction
  • Avoid overly animated effects that compete with the message

Hover Color

Sets the background color when the button is hovered.

Hover Text Color

Sets the text color on hover.

đź’ˇ Tips

  • Ensure hover colors maintain good contrast
  • Keep hover states consistent across all buttons for a polished feel

Styling Strategy: Buy vs Decline Button

Even though both buttons share the same styling options, best practice is to style them differently:

  • Buy Button
    • Stronger color
    • Higher contrast
    • More visual weight
  • Decline Button
    • Neutral or muted colors
    • Border-only or lighter background
    • Less visual dominance

This guides the user naturally without removing choice.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.