When setting up your store the main goal you have in mind is selling your products. After properly adding other elements to captivate the customer, you must now add the checkout element so they can complete the purchase. Without this, your customers will remain as leads and no conversions will occur. 

How to Add a Checkout Element

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

If you have not customized the page, the checkout element will be the only element added. Click on it to open its settings.

Configure how the element is displayed by altering its properties, this will include:

General

1. Element name: This will help you identify the element in the Layers view.
2. Font Options: Here you can adjust the size and weight of the font, or change the font altogether.

3. Margin & Padding: Choose how the element fits on the page by adjusting the margin and padding settings.

4. Color Options: Customize the colors of the Checkout element. Everything from the background to the text and payment button colors can be changed here.

5. Button Actions: Choose whether to redirect the user to another Store page, or a URL for further sale opportunities or to provide additional information.

6. Text Customization: This allows you to change the text shown in the various sections of the element.

Advanced

1. Sticky Contact: When turned on, this will auto-fill the customer's information if their data was previously captured by a browser cookie.
2. New Contact on Every Purchase: Toggle this feature 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 if the email address entered belongs to a disposable email provider (e.g., temporary email services often used for spam or temporary purposes) to ensure that only valid emails will be entered into the system.

4. Borders & Corner: This allows you to change the appearance of the borders and corners of the element to suit your needs.

5. Shadow: Add dimension and movement to the element by adding box shadows.

6. Form Options: Customize this section to collect only relevant and necessary information, enabling faster checkout.

📌Note: 

• Shipping details fields can only be customized 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.
• 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.

Furthermore, you can restrict the products to certain locations and choose how to collect customer locations.

7. Coupon Options: Offer discounts to your customers using promotional codes by toggling the “Enable Coupon Codes” switch.

8. Custom Class: Enter a custom class in the designated field to unlock additional customization options. To copy the custom CSS, simply click the "Copy" icon located to the right of the reference code.

9. Visibility: Choose whether you want the order form to be visible on mobile devices, desktops, or both by clicking the icon to highlight your preferred option.

Once you have completed customizing the element, click Save to keep the changes or Publish to make them public.

You can now effortlessly drive sales for your store by utilizing this element, enhancing your ability to convert leads into lifetime customers.