---
title: Configure checkout branding
description: >-
  Choose between storefront branding and Checkout Kit's built-in light or dark
  styles, and customize the checkout title, colors, and Android sheet options.
source_url:
  html: 'https://shopify.dev/docs/storefronts/mobile-next/checkout-kit/configuration'
  md: >-
    https://shopify.dev/docs/storefronts/mobile-next/checkout-kit/configuration.md
---

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

***

## Requirements

* [Checkout Kit](https://shopify.dev/docs/storefronts/mobile/checkout-kit) installed in your app.

***

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

## Choose an appearance

##### Swift

```swift
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
  })
}
```

##### Kotlin

```kotlin
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)
    }
}
```

##### React Native

```javascript
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',
        },
      },
    },
  },
};
```

**Note:**

Storefront appearance uses your store's checkout settings: the colors, logo, and fonts configured in the Shopify admin. It doesn't support dark mode. The additional controls of the checkout branding API require [Shopify Plus](https://help.shopify.com/en/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plus-plan). On other plans, `.storefront` displays checkout without custom branding.

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:

## SwiftUI modifiers

```swift
ShopifyCheckout(checkout: url)
  .appearance(.app(.dark().customize { colors in
    colors.progressIndicatorColor = .systemBlue
    colors.webViewBackgroundColor = .black
  }))
```

***

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

## Customize the checkout title

##### Swift

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

##### Kotlin

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

##### React Native

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

***

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

## Customize the sheet presentation

```kotlin
ShopifyCheckout.configure {
    it.sheet = CheckoutSheetOptions {
        cornerRadiusDp = 24f
        maxWidthDp = 640f
        scrimColor = Color.SRGB(0x52000000)
        dragHandle = CheckoutSheetDragHandle { visible = true }
        dismissal = CheckoutSheetDismissal {
            dragToDismissEnabled = true
            tapAwayToDismissEnabled = false
        }
    }
}
```

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

## Use the previous Android dialog styling

```kotlin
ShopifyCheckout.configure {
    it.sheet = CheckoutSheetOptions {
        cornerRadiusDp = 0f
        titleAlignment = CheckoutSheetTitleAlignment.START
        toolbarElevationDp = 4f
    }
}
```

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

***

## Next steps

[Authenticate checkouts\
\
](https://shopify.dev/docs/storefronts/mobile/checkout-kit/authenticate-checkouts)

[Sign buyers in to prefill checkout with saved addresses and payment methods.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/authenticate-checkouts)

[Handle offsite payments\
\
](https://shopify.dev/docs/storefronts/mobile/checkout-kit/offsite-payments)

[Bring buyers back to your app after offsite payment redirects.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/offsite-payments)

[Accelerated checkouts\
\
](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview)

[Add Shop Pay and Apple Pay buttons for one-tap purchases on product and cart pages.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview)

***