/
StoreFront Checkout

StoreFront Checkout

UltraCart’s checkout customization tools empower merchants to design a seamless and optimized checkout experience that aligns with their business needs and customer expectations. Whether you're looking to improve conversion rates, reinforce branding, or collect key customer data, the Visual Builder allows deep customization—all without writing a single line of code.

At the core of this system is the StoreFront Visual Builder, a drag-and-drop interface that lets you rearrange components, change layout structure, add conditions, and preview in real time.

Important: Checkout is one of the most critical parts of your store. While UltraCart offers full control, editing checkout improperly can lead to broken user flows or lost conversions. Always test thoroughly.

Prerequisites:

  • An existing item or live storefront to trigger checkout

  • Store administrator access

Step-by-Step Instructions

1. Launching the Visual Builder for Checkout

  1. Log into your UltraCart account.

  2. Navigate to your StoreFront and add any product to your cart to initiate checkout.

    • If your StoreFront is in Checkout Only mode, go to Items → Item Management, click the link icon next to an item, then select Open in a new window under Basic Link.

  3. Once in the checkout page, click the Edit button in the top-left corner of the page. This opens the Visual Builder.

2. Understanding the Visual Builder

  • The Hierarchy Panel on the right shows the structural layout of your checkout.

  • Checkout elements are grouped under the CHECKOUTFORM container.
    This container must remain intact. It provides cart context and handles logic for items, payments, error modals, shipping, and customer input fields.

3. Editing Checkout Components

  • Select any component (e.g., Contact Info, Shipping, Cart Summary) to:

    • Move it up/down the page

    • Show/hide elements based on conditions

    • Rename labels, update placeholders

    • Add/removal optional sections (gift options, marketing checkboxes)

Tip: You can use Conditional Visibility to show/hide sections based on logic (e.g., show pickup options only if certain item types are in the cart).

4. Save and Test

  • After editing, Save your changes.

  • Place test orders using different:

    • Devices (mobile, tablet, desktop)

    • Browsers

    • Item types (digital vs. physical)

    • Payment methods

Best Practices & Tips

  • Keep it simple. Don’t clutter checkout with unnecessary content.

  • Test on all device types. Many customers complete purchases on mobile.

  • Retain essential elements. Never remove the CHECKOUTFORM container or required fields like billing/shipping info.

  • Use conditions wisely. Show or hide sections based on customer input or cart contents to streamline the experience.