> ## Documentation Index
> Fetch the complete documentation index at: https://www.commercengine.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout Studio

> A no-code dashboard for configuring Hosted Checkout with real-time preview and instant publishing.

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

<Card title="Checkout Studio" icon="https://images.tarkai.com/Commerce_Engine/Brand%20Assets/02%20-%20Glyph/png/CE_glyph.png" href="https://studio.checkout.commercengine.io" cta="Open Checkout Studio">
  Open Checkout Studio, then enter:

  * `storeId`
  * `apiKey`
  * `environment` (`staging` or `production`)

  Once connected, Studio loads your store's current checkout configuration.
</Card>

## How publishing works

<Steps titleSize="h3">
  <Step title="Connect">
    Authenticate your store with Store ID, API Key, and environment.
  </Step>

  <Step title="Customize">
    Use Studio panels to update branding, features, login flows, layout behavior, and payment configuration.
  </Step>

  <Step title="Preview in real time">
    See changes immediately in a live, full-fidelity checkout environment.
  </Step>

  <Step title="Save and publish">
    Click **Save** once. Hosted Checkout starts using the updated config automatically, with no storefront code changes.
  </Step>
</Steps>

## 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.

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