When setting up your store, the main goal is selling your products. Once you've added other elements to capture the customer's attention, you need to add the checkout element so they can complete their purchase. Without it, customers will stay as leads and no conversions will happen.

How to Add a Checkout Element

To get started, open your Store Builder and edit the Checkout Page.

If you haven't customised the page yet, the checkout element will be the only one on there. Click it to open its settings.

Configure how the element is displayed by adjusting its properties. These include:

General

  1. Element name: Helps you identify the element in the Layers view.
  2. Font Options: Adjust the size and weight of the font, or change the font altogether.

  1. Sticky Contact: When turned on, this auto-fills the customer's information if their data was previously captured by a browser cookie.
  2. New Contact on Every Purchase: Toggle this on or off to choose whether a new contact record should be created for each purchase.
  3. Validate Disposable Email: When enabled, the system checks whether the email address entered belongs to a disposable email provider (such as temporary email services often used for spam or short-term purposes), ensuring only valid emails are stored.

  1. Button Actions: Choose whether to redirect the user to another Store page, a URL for further sale opportunities, or to provide additional information.
  2. Text Options: Lets you modify the text displayed in the various sections of the element.

Form Options: Customise this section to collect only the information you need, making checkout faster for your customers.

  • Full Name Validation: Enable this to verify the full name provided by each user in the relevant field.
  • Enable Billing Address: Activates a billing address section to collect address information from your contacts. Note that the billing address section is not connected to tax calculations.
  • Toggle Shipping: Choose whether to show or hide the shipping fields.
  • Auto-complete Address: When enabled, the system suggests addresses as customers type, reducing input time and improving the checkout experience.
  • Enable Postal Code and Country: Requires contacts to provide their postal code and country, specifically for integration with NMI and Authorize.net.
  • Enable Notes at Checkout: Allows your contacts to add extra information or special requests during checkout for your review.

📌Note: Shipping details fields can only be customised if Shipping has been toggled on.

The following fields can be marked as Hidden, Optional, or Mandatory: Phone Number, Address, Country / State, City, and Zip / Postal Code. By default, fields in this section will be set to Mandatory.

📌Note: Shipping rates may be affected if certain fields are missing in the Shipping Details section. For live rates from multi-carrier platforms like Shippo, all fields need to be submitted by the user.

You can also restrict products to certain locations and choose how to collect customer locations.

  1. Coupon Options: Offer discounts using promotional codes by toggling the "Enable Coupon Codes" switch.
  2. Terms & Conditions: When enabled, the checkbox is mandatory, meaning checkout cannot proceed without acceptance.
  3. Color Options: Customise the colours of the Checkout element, from the background to the text and payment button colours.

Styles

  1. Margin & Padding: Control how the element sits on the page by adjusting the margin and padding settings.
  2. Borders: Change the appearance of the borders and corners of the element to suit your needs.
  3. Shadow: Add depth and dimension to the element by adding box shadows.
  4. Visibility: Choose whether the order form appears on mobile devices, desktops, or both by clicking the icon for your preferred option.
  5. Custom Class: Enter a custom class in the designated field to unlock additional customisation options. To copy the custom CSS, click the "Copy" icon to the right of the reference code.

Once you're happy with the element, click Save to keep your changes or Publish to make them live. You can now drive sales through your store using this element, converting more leads into long-term customers.