Checkout widget

Products & Bump Offers

The Checkout widget allows you to place a complete, conversion-optimized checkout anywhere on your website — including pages, funnels, popups, blog posts, and circles — with just a few clicks.

Unlike traditional checkout pages, the Checkout widget is highly modular and gives you granular control over both what is sold and how customers interact with the offer.

With the Checkout widget, you control:

• which products are sold
• how customers select products
• whether the checkout uses selected products or the cart
• how upsells (bump offers) are presented
• how much choice or guidance the customer has before purchase

To add the checkout to a page, simply select the Checkout widget and drag it into your layout.

Once placed, the checkout configuration panel opens automatically.

Products tab

After adding the Checkout widget, the first and most important step is configuring the Products tab.

This section defines the commercial logic of the checkout — what the customer is actually buying and how the buying decision is made.

In the Products tab you define:

• what the customer is buying
• how products are selected
• whether the checkout uses selected products or the shopping cart
• how many products can be purchased at once

Product modes

The Checkout widget supports two different product modes, depending on how your sales flow is structured.

Product Select

Product Select is used when you want this checkout to sell specific products selected directly inside the widget.

In this mode, the checkout is fully self-contained — products are defined in the widget itself and are not dependent on previous pages.

This mode is ideal for:

• sales pages
• funnels
• single-offer checkouts
• bundles or packages
• pricing tables that lead directly to checkout

You control exactly which products appear and how they are presented.

Cart Checkout

Cart Checkout is used when customers add products to a cart earlier in the journey, and this checkout should handle everything currently in the cart.

In this mode, the checkout does not define products itself — it simply processes what the customer has already chosen.

This works especially well for:

• multi-step funnels
• shop-style product listings
• add-to-cart pages followed by checkout
• upsell / downsell flows that modify the cart

This mode creates a more traditional e-commerce experience.

Selecting products (Main Products)

When using Product Select, you configure your offer in the Main Products section.

This is where you decide which products are visible in the checkout and in what order.

From the main products section you can:

• Select products to include in the checkout
• Reorder selected products to control how they appear

The display order matters.

Products shown first receive the most attention and often convert better, especially on mobile.

Customer selection behavior

Once products are selected, you can control how customers are allowed to interact with them.

These options define whether the checkout is:

• guided (you choose for them),
• selective (they choose one),
• or flexible (they choose multiple).

Allow customers to change the quantity to buy

This option allows customers to adjust the quantity of a product before purchasing.

Typical use cases include:

• physical products
• tickets or seats
• add-ons where buying more than one makes sense

For digital products or memberships, this option is often disabled to avoid confusion.

Allow customers to choose the product to buy

When enabled, all main products are displayed as radio buttons, meaning the customer can select only one product.

This is perfect for:

• pricing tiers (Basic / Pro / Premium)
• membership levels
• “choose one plan” offers
• mutually exclusive products

This setup creates clarity and reduces decision fatigue.

Let customers choose multiple products

This option allows customers to select multiple products at the same time.

Important notes:

• At least one product must be selected
• The customer can combine products freely

This is especially useful for:

• bundles
• build-your-own offers
• resource libraries
• add-on heavy offers

It gives customers flexibility while still ensuring a purchase is made.

Bump Offers

Bump Offers are optional add-on products shown directly inside the checkout.

They are designed to increase the average order value by offering a complementary product that can be added with a single click — without interrupting the checkout flow.

Bump offers work best when they are:

• low-friction
• clearly beneficial
• closely related to the main purchase

Adding bump offers

To add a bump offer, navigate to Bump Offers > Edit > Add Bump

Each bump offer is a real product from your store, not a special or duplicate item. This means it:

• uses the same pricing rules
• follows the same tax and delivery logic
• can trigger automations and tags

Bump position

You can control where bump offers appear in the checkout.

• Below customer information, above the checkout buttons

  This placement gives maximum visibility.

  The bump appears just before the final purchase action, when buying intent is highest.

  Best for:

  • high-performing bumps

  • simple, easy-to-understand add-ons

    Below the order summary

    This placement is more subtle and appears after pricing totals are visible.

    Best for:

  • optional enhancements
  • less aggressive upsells
  • audiences sensitive to pressure

Bump layout

You can choose how bump offers are visually presented:

• Show as radio buttons – clean and minimal
• Show as buttons – more prominent and action-driven

The layout should match your overall checkout tone and brand style.

Editing a Bump Offer

Each bump offer has its own detailed settings panel.

• Bump product

  Select the product that will be added to the order when the bump is accepted.

  Only one product can be connected to each bump.

  Text & messaging

  Each bump includes three key text fields:

  • Bump headline

    A short attention-grabbing hook (for example: “Add this to your order”)

  • Bump title

    The product name

  • Bump description

    A concise explanation of value and benefit

Clear, benefit-driven copy works best here.

Default behavior

When Active by default is enabled, the bump is pre-selected, and the customer must actively opt out.

This can significantly increase conversion but should be used carefully depending on:

• audience expectations
• regional regulations
• brand positioning

Visual options

To help the bump stand out visually, you can enable:

• Show product image
• Show badge
• Badge text (for example “Best value”, “Most popular”, “Limited” or similar)
• Background color
• Bump style
  • With shadow
  • With dashed border

These visual controls help separate the bump from the main checkout content and draw attention without disrupting the flow.

Checkout Styling

Checkout Styling gives you complete control over how your checkout looks, feels, and performs.

Beyond visual branding, these settings directly influence clarity, trust, usability, and conversion rate – especially on mobile.

All styling options are available in the Styling tab of the Checkout widget and are applied in real time, so you can instantly see how your changes are applied.

Checkout Design Type

The Checkout Design Type defines the overall structure, layout, and visual flow of your checkout experience.

It determines how customer information, payment details, and the order summary are arranged on the page.

You can choose between three checkout layout styles, each optimized for different devices, content types, and conversion goals.

Two-column checkout (left)

A structured layout where customer details and payment fields appear in one column, while the order summary is displayed in a separate column.

This layout provides clarity by separating input fields from order details.

Best for:

• Desktop-first experiences
• Physical products and shipping-based checkouts
• Longer order summaries or multiple products
• Customers who want to review their order while checking out

Why choose this layout?

The two-column checkout makes it easier for customers to verify pricing, quantities, and totals without leaving the checkout flow, which can increase confidence and reduce friction.

Single-column checkout (middle)

A vertical layout where all checkout elements are stacked in a single column.

This layout creates a focused, linear flow that guides the customer step by step from top to bottom.

Best for:

• Short and simple checkouts
• Digital products and memberships
• Mobile-first experiences
• Minimalist sales pages

Why choose this layout?

The single-column checkout reduces visual distractions and works especially well on smaller screens, making it ideal for fast purchases and impulse-friendly offers.

Split-view checkout (right)

A visually distinctive layout that clearly separates checkout sections using stronger visual contrast and layout division.

This design is more expressive and allows branding and layout to play a bigger role in the checkout experience.

Best for:

• Brand-heavy websites
• Campaigns and product launches
• High-ticket offers
• Checkouts where design and perceived value matter

Why choose this layout?

The split-view checkout helps elevate the perceived quality of the offer and creates a premium, intentional buying experience – especially effective when design and trust signals are key.

Checkout Step Process

This setting controls how many steps the checkout is divided into.

Available options

• 1-Step Checkout

  All customer information and payment details are shown on a single screen.

  Best for:

  • Warm traffic
  • Low-friction digital purchases

  • Fast impulse buys

    2-Step Checkout

    Step 1: Customer information

    Step 2: Payment details

    Best for:

  • Abandoned cart recovery
  • Funnels where email capture is important

  • Slightly higher-priced products

    3-Step Checkout

    Step 1: Name & email

    Step 2: Shipping or address details

    Step 3: Payment

    Best for:

  • Physical products
  • International shipping
  • Complex offers with multiple inputs

Customer & Billing Details Styling

This section controls the visual styling of all form fields and section headings.

Color controls

• Headings Color – section titles
• Fields Background Color – input field backgrounds
• Fields Text Color – text inside fields
• Fields Border Color – outlines around inputs

Typography

• Text Font Family

  Applies to all checkout text and form labels.

Layout & Spacing

• Background Color – background behind the form
• Padding Size – spacing inside the form container
• Border Radius – rounded corners for fields and containers

Rounded corners generally feel softer and more modern, while square edges feel more technical.

Custom Section Titles

You can fully customize the text labels for each checkout section:

• Customer Information Title
• Shipping Address Title
• Billing Address Title
• Shipping Method Title
• Payment Method Title

Checkout Wrapper Styling

The checkout wrapper controls the outer container of the entire checkout widget.

Available settings:

• Checkout Background – solid color or transparent
• Padding Size – spacing around the entire checkout
• Border Radius – rounding for the full checkout block

This is useful when embedding checkout inside content-heavy pages or funnels.

Step Titles (for Multi-step Checkouts only)

For 2-step and 3-step checkouts, you can customize step labels:

2-step checkouts

• Step-1 Title (e.g. “Personal Information”)
• Step-2 Title (e.g. “Payment Information”)

3-step checkouts

• Step-1 Title (e.g. “Personal Information”)
• Step-2 Title (e.g. “Address”)
• Step 3 Title (e.g. "Payment Information")

Clear step naming improves orientation and reduces abandonment.

Order Summary – Style

The order summary is a critical trust element that reassures customers before payment.

Visual controls

• Order Summary Background
• Text Color
• Text Font Family

Display options

• Show Shadow – creates a card-like appearance
• Show Product Images – displays thumbnails next to products

Spacing

• Padding Size – controls readability and visual balance

Checkout Buttons – Style

These buttons drive the final conversion.

Visual styling

• Button Background Color
• Button Text Color
• Add Gradient – optional depth effect

Typography

• Text Font Family
• Font Size

Button text

• Button Text (Next Step)

  Example: “Continue”

• Button Text (Complete Order)

  Example: “Complete Order”, “Pay Securely”, “Get Instant Access”

Layout option

• Expand button to full width

  Highly recommended for mobile devices.

Secure Badge – Settings

Security indicators increase confidence at the most sensitive moment.

Customization options

• Text Color
• Lock Text (e.g. “Secured with 256-bit encryption”)
• Shield Text (e.g. “Guaranteed Safe Checkout”)

You can also toggle whether the Secure Checkout badge is displayed.

Additional Display Options

Additional Display Options allow you to fine-tune how information and visual elements are presented in the checkout, helping you balance clarity, trust, and conversion by showing only what’s relevant to the customer.

Price presentation

• Show regular price with strikethrough when item is on sale

  Highlights savings and increases perceived value.

Mobile optimization

• Show order summary above customer information on mobile

  Ensures customers see what they’re buying immediately.

• Expand checkout to full viewport height

  Creates a focused, distraction-free checkout experience — ideal for funnels.

Product Options Style

Controls how selectable products appear when multiple options are shown.

Available styles:

• Default style
• Selected option is highlighted

Checkout Settings

The Checkout Settings tab lets you control what happens before, during, and after a customer completes their purchase. This is where you fine-tune the checkout’s behavior, reduce friction, and connect purchases to your broader systems such as memberships, email marketing, and automations.

These settings are especially important for optimizing conversion rate, customer experience, and post-purchase flows.

Thank you page

After a successful purchase, you can decide exactly where the customer should be sent.

You can redirect customers to:

• A custom Thank You page on your website
• Any page in your site
• A specific funnel step
• An external URL (for example a Facebook group, onboarding form, or booking link)

Allow discounts

Enable this option if you want customers to be able to use discount codes at checkout.

• Works with discounts created in your store settings

  Completely optional per checkout

  Useful for:

  • Campaigns and launches
  • Affiliates and partners
  • Limited-time promotions

Enable Customer Registrations

When enabled, customers can create an account automatically at the end of checkout.

This means:

• A member profile is created
• Customers can log in for future purchases
• Checkout fields are auto-filled on repeat purchases

You can track all registered customers under Contacts > All contacts & Members

Best for:

• Memberships
• Courses and programs
• Repeat-purchase businesses
• Long-term customer relationships

Address Collection (Optional)

Do not ask for address when selling digital goods, services, or memberships

This setting removes address fields when they’re not required.

• Ideal for:
  • Digital products
  • Services
  • Memberships
  • Online programs
• Reduces form friction
• Speeds up checkout completion

Connect to Email Marketing

After a successful purchase, customers can automatically be added to:

• Your internal email lists, or
• An external email provider (for example Mailchimp)

This allows you to:

• Send onboarding emails
• Deliver purchase confirmations
• Trigger post-purchase sequences
• Segment buyers from non-buyers

Tag customers on new order

When enabled, customers receive one or more tags upon purchase.

Tags can be used to:

• Segment customers by product
• Trigger automations
• Filter audiences for campaigns
• Personalize future communication

Examples:

• purchased-course-a  
• checkout-vip-offer  
• member-active  

Tags are especially powerful when combined with:

• Email automations
• CRM workflows
• Upsell and cross-sell logic

Customize Fields

This section gives you fine-grained control over what information you collect during checkout.

You can choose to:

• Ask for company information
• Ask for phone number
• Ask for country
• Ask for state / region
• Ask for city
• Ask for ZIP / postcode
• Add a second address line
• Ask for additional information – here you can create your own custom properties
• Mark individual fields as required or optional

Common use cases

• B2B checkouts → Company name required
• Physical delivery → City, ZIP, country required
• Events → Phone number required
• International sales → Country + state enabled