Checkout Variant System Configuration

Project Zero lets you choose the checkout layout through a single setting, without changing your integration. The default multi-step checkout is unchanged; you opt in to a different layout when you are ready.

Enabling a Variant

Set the variant in your project's settings.js:

checkout: {
  variant: 'one-page',
  options: { enableEditMode: true, autoAdvance: true, stickyMobileCta: true }
}

• settings.checkout.variant — a string that selects the layout (see below).
• This is a build-time configuration value — not an admin-panel or API setting.
• If the value is missing or unrecognized, checkout falls back to multi-step. (On a fresh project the variant is not set, so checkout defaults to multi-step until you add the key.)

Available Variants

Variant	Description
multi-step (default)	Classic two-step wizard: Shipping, then Payment, with a side order summary.
one-page	Single-page checkout: Contact, Address, Shipping and Payment shown as stacked accordion sections that auto-advance as each is completed.
accordion	Same layout as one-page (alias).
basket-and-checkout	The one-page flow with the cart shown on top, so basket editing and checkout live on one unified page.

Fine-Tuning (Optional)

settings.checkout.options toggles behavior within a variant:

• enableEditMode
• autoAdvance
• stickyMobileCta
• showOrderReview
• showTrustBadges
• gtmEnabled
• compactMode

Switching and Compatibility

• No data migration. All variants share the same checkout state and data layer, so switching is a configuration change only.
• The default multi-step checkout and its components are untouched — nothing is removed.

basket-and-checkout turns the basket page into a redirect to checkout (cart and checkout become one page). If you rely on a standalone basket page, choose a different variant.