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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.