Make every checkout unmistakably yours

Go beyond Shopify's native styling limits. Checkout Components' Branding Editor gives you real-time control over every visual detail - colours, buttons, logos, layouts, and more.

Install for free Book a call

5.0/5.0

+500 installs

Got a question? Reach out to alex@basestack.com.au

TRUSTED BY OVER 500+ SHOPIFY PLUS BRANDS

VISUAL EDITOR

Skip the code. Use the visual editor.

Without Checkout Components, every branding change requires a GraphQL mutation. Our visual editor gives you the same control with a simple UI and a real-time preview - no code, no deploys, no surprises.

With Checkout Components

Simple visual editor with live preview

Without - raw GraphQL

Complex mutations, no preview, error-prone

colorScheme.graphql

mutation colorSchemeUpdate(
  $profileId: ID!
  $input: CheckoutBrandingInput!
) {
  checkoutBrandingUpsert(
    checkoutProfileId: $profileId
    checkoutBranding: $input
  ) {
    checkoutBranding {
      customizations {
        global {
          colorSchemes {
            scheme1 {
              primaryButton {
                background
                foreground
              }
              control { background border }
            }
          }
        }
      }
    }
  }
}

Pick your brand colours from a simple palette picker and see them cascade across your checkout in real time. No GraphQL required.

PROFILES & VERSIONING

Test safely. Roll back with confidence.

Work across multiple branding profiles - live and draft with every change logged and one-click revertible.

Production

Updated 2 days ago

Live

Staging

Updated 1 week ago

Draft

Summer campaign

Updated today

Draft

PROFILES

Switch profiles instantly

Swap between live and draft profiles with a single click. A clear live indicator ensures you never accidentally edit production.

Edit history

Click a save to compare and optionally revert.

17 February 2026

Branding saved

11:01 am

Branding saved

10:59 am

Branding saved

10:57 am

View more (8 more)

VERSION CONTROL

One-click revert

Every save is logged automatically. Click any save point to compare and optionally revert - no developer required.

Compare with previous version

Comparing version from 02/17/2026 11:01 AM with current.

Red highlights show old/removed values. Green highlights show new/added values.

{

"designSystem": {

"colors": {

"schemes": {

"scheme2": {

"base": {

"accent": "#9ec1cc",

"background": "#f4f4f0",

"background": null,

"border": null,

"decorative": "#9ec1cc",

DIFF VIEWER

Visual diff comparison

Click any save to see exactly what changed. Red highlights show removed values, green shows new - then dismiss or revert.

SEE WHAT YOU CAN DO

Infinite brand possibilities

From bold and colourful to minimal and sophisticated - see how merchants use the branding editor to create checkout experiences that are unmistakably theirs.