Checkout Studio

Checkout Studio is the no-code control center for Hosted Checkout. Instead of rebuilding checkout UI or shipping repeated frontend releases, teams can configure the full checkout experience from a dashboard and publish changes instantly.

Access Checkout Studio

Open Checkout Studio, then enter:

storeId
apiKey
environment (staging or production)

Once connected, Studio loads your store’s current checkout configuration.

How publishing works

Connect

Authenticate your store with Store ID, API Key, and environment.

Customize

Use Studio panels to update branding, features, login flows, layout behavior, and payment configuration.

Preview in real time

See changes immediately in a live, full-fidelity checkout environment.

Save and publish

Click Save once. Hosted Checkout starts using the updated config automatically, with no storefront code changes.

Everything you can customize (no code)

Area	What you can configure in Studio	Business impact
Brand appearance	Theme name, full color system (light + dark), typography, component shapes (button/input/card/badge), and responsive drawer/modal/sheet sizing	Match brand identity exactly across every checkout state
Conversion features	Toggle loyalty redemption, coupons, collect-in-store, free-shipping progress, and product recommendations	Run conversion experiments and promotions without engineering cycles
Login experience	Enable login methods (`whatsapp`, `phone`, `email`) and account switching behavior	Adapt authentication to local market behavior and customer preferences
Checkout UX behavior	Default theme mode and drawer direction by device (mobile/desktop)	Optimize usability and conversion for each form factor
Payments	Payment provider routing/selection (including default/auto mode)	Control payment strategy per store without code deployments

Full-fidelity live preview (including edge cases)

Studio uses the real Hosted Checkout application in preview. Brands can validate both design and behavior end to end before publishing.

Scenario category	What you can verify in Studio preview
Cart flows	Empty cart, multi-item cart, quantity updates, recommendation blocks, coupon and loyalty surfaces
Auth flows	Guest vs logged-in behavior, method availability (`whatsapp`/`phone`/`email`), account switching behavior
Address flows	Address forms, saved addresses, and state transitions across checkout steps
Payment flows	Provider-specific payment step presentation and overall checkout continuity
Theme and layout states	Light/dark defaults, drawer direction by device, spacing/sizing behavior across breakpoints

URL overrides and Studio config

Studio controls remote checkout config per store + environment, regardless of whether your storefront uses default host resolution or an SDK url override.

Default mode: SDK resolves to {storeId}.checkout.commercengine.com (or staging subdomain)
Override mode: SDK loads from your explicit url

In both cases, saving in Studio updates Hosted Checkout behavior for that store/environment immediately.

Studio values are the default source of truth for Hosted Checkout. SDK options such as theme can still override behavior per session when needed.

​Access Checkout Studio

Checkout Studio

​How publishing works

Connect

Customize

Preview in real time

Save and publish

​Everything you can customize (no code)

​Full-fidelity live preview (including edge cases)

​URL overrides and Studio config

Access Checkout Studio

How publishing works

Everything you can customize (no code)

Full-fidelity live preview (including edge cases)

URL overrides and Studio config