Configure checkout branding

Checkout Kit themes checkout through an appearance setting with two modes: storefront branding, which uses your store's checkout branding, or app appearance, which uses Checkout Kit's built-in light or dark style. Embedded checkout adapts its layout for your app, so it might differ from checkout in a browser. You can also customize the checkout title and colors.

Anchor to RequirementsRequirements

• Checkout Kit installed in your app.

Anchor to Choose an appearanceChoose an appearance

Set appearance to one of two modes:

• .storefront() (default): Pull your store's checkout branding from the Shopify admin.
• .app(colorScheme): Use Checkout Kit's light or dark style. Choose .automatic() to follow the device's light or dark mode, or .light() or .dark() to set it explicitly. Each color scheme takes an optional customize block for the native chrome around checkout.

On React Native, set appearance.type to CheckoutAppearanceType.storefront for storefront branding or CheckoutAppearanceType.app for Checkout Kit styling. For the app appearance, choose appearance.colorScheme (CheckoutColorScheme.automatic, .light, or .dark) and put any color overrides in appearance.colors.

ShopifyCheckout.configure { config in
  // Storefront branding (default)
  config.appearance = .storefront()
  // Or use Checkout Kit's built-in light or dark style
  config.appearance = .app(.automatic())

  // Customize the native chrome around checkout
  config.appearance = .app(.automatic().customize { colors in
    // Background color of the checkout web view
    colors.webViewBackgroundColor = .systemBackground
    // Progress bar color while checkout loads
    colors.progressIndicatorColor = .systemBlue
    // Close button color; defaults to the system tint
    colors.closeIconTintColor = .label
  })
}

ShopifyCheckout.configure {
    // Storefront branding (default)
    it.appearance = CheckoutAppearance.Storefront()
    // Or use Checkout Kit's built-in light or dark style
    it.appearance = CheckoutAppearance.App(ColorScheme.Automatic())

    // Storefront branding with custom native chrome colors:
    it.appearance = CheckoutAppearance.Storefront().customize {
        headerBackgroundColor = Color.ResourceId(R.color.header_background)
        headerTitleColor = Color.ResourceId(R.color.header_title)
        progressIndicatorColor = Color.ResourceId(R.color.progress_indicator)
    }
}

import {CheckoutAppearanceType, CheckoutColorScheme} from '@shopify/checkout-kit-react-native';

const config = {
  appearance: {
    type: CheckoutAppearanceType.app,
    colorScheme: CheckoutColorScheme.automatic,
    colors: {
      ios: {
        light: {
          webViewBackgroundColor: '#ffffff',
          progressIndicatorColor: '#000000',
          closeIconTintColor: '#000000',
        },
        dark: {
          webViewBackgroundColor: '#1a1a1a',
          progressIndicatorColor: '#8a85ff',
          closeIconTintColor: '#ffffff',
        },
      },
      android: {
        light: {
          webViewBackgroundColor: '#ffffff',
          progressIndicatorColor: '#2d2a38',
          headerBackgroundColor: '#ffffff',
          headerTitleColor: '#000000',
          closeIconTintColor: '#000000',
        },
        dark: {
          webViewBackgroundColor: '#1a1a1a',
          progressIndicatorColor: '#8a85ff',
          headerBackgroundColor: '#1a1a1a',
          headerTitleColor: '#ffffff',
          closeIconTintColor: '#ffffff',
        },
      },
    },
  },
};

In SwiftUI, ShopifyCheckout reads the shared appearance and title when it's displayed, and its modifiers override those values for that view only. They don't change the shared configuration, other checkout views, or preloads, and a checkout that's already on screen doesn't restyle later. Call ShopifyCheckout.configure for anything a preload should pick up:

Anchor to Customize the checkout titleCustomize the checkout title

Checkout displays a localized default title in the header. Replace it with a custom string, such as your app's name or a localized label:

// Set a custom title, or override the shopify_checkout_kit_title
// localization key for per-locale titles
ShopifyCheckout.configure {
  $0.title = "Custom title"
}

ShopifyCheckout.configure {
    it.title = "Custom title"
}

const config = {
  title: 'Custom title',
};

Anchor to Customize the sheet presentation on AndroidCustomize the sheet presentation on Android

On Android, ShopifyCheckout.present(...) opens a bottom sheet. CheckoutSheetOptions provides defaults, so you don't need to configure sheet for ordinary use. Change its options only when you need to customize the corner radius, maximum width on large screens, title alignment, toolbar elevation, close icon, scrim color, drag handle, snap points, or drag and tap-away dismissal.

To keep the previous Android dialog's square corners, start-aligned title, and raised toolbar, set these sheet options:

This changes the bottom sheet's styling; it doesn't restore the v3 dialog presentation.

Anchor to Next stepsNext steps

Authenticate checkouts

Sign buyers in to prefill checkout with saved addresses and payment methods.

Handle offsite payments

Bring buyers back to your app after offsite payment redirects.

Accelerated checkouts

Add Shop Pay and Apple Pay buttons for one-tap purchases on product and cart pages.