User Interface

The default User Interface is a configurable, mobile-friendly, realtime cart & checkout.

To adjust the theme color and other settings, use the Embed Settings.

Interface

The Interface is a compact overlay to allow your customer to easily:

  • See how many items they have in their Cart
  • See the total of the items they have in their Cart
  • Access their Cart to edit the items or Checkout

If one or more authentication providers are enabled in the settings, it will also allow the customer to:

  • Login to their account (or register one)

UI - Interface 1

Login

The Login screen exists when authentication providers are enabled in the settings.

It lets customers select their preferred login method and registers an account if they don't have one.

Available authentication providers are:

  • Email
  • Facebook
  • Google

UI - Interface 1

Account

The Account screen lets customers view and edit their account contact details.

These details are persistent to the customer account.

UI - Profile - Account 1

Orders

The Orders screen lets logged in customers access their previous purchases.

UI - Profile - Orders 1

Addresses

The Addresses screen lets logged in customers view, add & remove addresses from their account.

Addresses are persistent to the customer account and can be used as shipping or billing addresses.

UI - Profile - Addresses 1

Cards

The Cards screen lets logged in customers view, add & remove cards from their account.

This section is only available when Stripe is enabled as a payment integration.

UI - Profile - Cards 1

Cart

The Cart screen provides the ability to quickly adjust the items within the Cart.

UI - Cart 1

Checkout

The Checkout walks the customer through the required data collection for purchasing.

The steps vary depending on the Admin Settings and customer selections.

Checkout - Account

The Checkout - Account screen lets the customer login and ensures they provide contact details.

UI - Checkout - Account 1

UI - Checkout - Account 2

Checkout - Cart

The Checkout - Cart screen provides a last opportunity for the customer to modify their cart.

If the customer logged in on the account step, any cart items from their previous session will be merged in.

UI - Checkout - Cart 1

Checkout - Shipping

The Checkout - Shipping screen lets the customer define their shipping address.

If the order consists of only 'digital' items this screen will be automatically hidden.

UI - Checkout - Shipping 1

After providing the shipping address the system will then determine a shipping quote.

UI - Checkout - Shipping 2

If it is required for your business you can enable the Shipping Notes screen.

This screen will allow the customer to provide their own custom delivery instructions.

UI - Checkout - Shipping 3

Checkout - Billing

The Checkout - Billing screen lets the customer define their billing address.

It is possible to select the same address as the 'Shipping Address'.

This screen is optional and can be enabled/disabled in the Cart Settings.

UI - Checkout - Billing 1

UI - Checkout - Billing 1

UI - Checkout - Billing 1

Checkout - Review

The Checkout - Shipping screen all of the order details for final review.

Checkout - Success

The Checkout - Success screen displays once the transaction has completed successfully.

Checkout - Error

The Checkout - Error screen displays if there is an error with the customers transaction.

Streamlining

If you would like to streamline the Cart & Checkout process, you may wish to disable some features.

  • Account
    The Account screen appears when authentication providers are enabled.
    To hide it, disable all authentication providers.

  • Contact Details
    The Contact Details screen will always appear.

  • Cart Review
    The Cart screen appears when authentication providers are enabled.
    It allows customers to confirm items that have been merged in from a previous session.
    To hide it, disable all authentication providers.

  • Shipping Address
    The Shipping Address screen appears when there are non-digital items in the order.

  • Shipping Quote
    The Shipping Quote screen will always appear.

  • Shipping Note
    The Shipping Note screen appears when it is enabled in the settings.
    To hide it, disable the screen within the settings.

  • Billing Address
    The Billing Address screens appear when the billing address is enabled in the settings.
    To hide them, disable the billing address in the settings.

  • Billing Method
    The Billing Method screen only appears when there is more than one billing method.
    To hide it, enable only one billing method so the customer does not have to make a choice.

  • Review
    The Review screen will always appear.