---
title: Configure checkout branding
description: Customize the checkout color scheme and title with Checkout Kit.
source_url:
  html: 'https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration'
  md: 'https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration.md'
---

# Configure checkout branding

Checkout Kit displays checkout with a default color scheme and title. You can match the color scheme to the buyer's device settings, force light or dark mode, or pull your store's branding from the Shopify admin. Set a custom title in the checkout header.

***

## Requirements

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

***

## Customize the color scheme

Set the `colorScheme` property to one of these values:

* `.automatic` (default): Follow the device's light or dark mode.
* `.light` or `.dark`: Force light or dark mode.
* `.web`: Match the store's checkout branding from the Shopify admin.

## Customize the color scheme

##### Swift

```swift
// Color scheme: .automatic (match device), .light, .dark, or .web (match store branding)
ShopifyCheckoutSheetKit.configuration.colorScheme = .automatic

// Background color of the checkout web view
ShopifyCheckoutSheetKit.configuration.backgroundColor = .systemBackground

// Progress bar color while checkout loads
ShopifyCheckoutSheetKit.configuration.tintColor = .systemBlue
```

##### Kotlin

```kotlin
ShopifyCheckoutSheetKit.configure {
    // Color scheme: Automatic (match device), Light, Dark, or Web (match store branding).
    // Default:
    it.colorScheme = ColorScheme.Automatic()

    // Or, with Web mode and custom colors:
    // it.colorScheme = ColorScheme.Web(
    //     Colors(
    //         webViewBackground = Color.ResourceId(R.color.web_view_background),
    //         headerFont = Color.ResourceId(R.color.header_font),
    //         headerBackground = Color.ResourceId(R.color.header_background),
    //         progressIndicator = Color.ResourceId(R.color.progress_indicator),
    //     )
    // )
}
```

##### React Native

```javascript
const config = {
  // Color scheme: automatic, light, dark, or web (match store branding)
  colorScheme: ColorScheme.light,
  colors: {
    ios: {
      backgroundColor: '#ffffff', // Background color of the checkout web view
      tintColor: '#000000',       // Progress bar color while checkout loads
    },
    android: {
      backgroundColor: '#ffffff',       // Background color of the checkout web view
      progressIndicator: '#2d2a38',     // Progress bar color while checkout loads
      headerBackgroundColor: '#ffffff',  // App bar background color
      headerTextColor: '#000000',        // Header text color in the app bar
    },
  },
};
```

**Note:**

The `.web` color scheme pulls branding from your store's checkout settings but doesn't support dark mode. Custom checkout branding requires [Shopify Plus](https://help.shopify.com/en/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plus-plan). On other plans, `.web` displays checkout without custom branding.

***

## Customize the checkout title

The checkout sheet displays a default title in the header bar. You can 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 on the configuration object
ShopifyCheckoutSheetKit.configuration.title = "Custom title"
```

##### Kotlin

```xml
<!-- Override the checkout_web_view_title string resource -->
<string name="checkout_web_view_title">Custom title</string>
```

##### React Native

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

***

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

***