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.

Anchor to RequirementsRequirements

• Checkout Kit installed in your app.

Anchor to Customize the color schemeCustomize 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.

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

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),
    //     )
    // )
}

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
    },
  },
};

Anchor to Customize the checkout titleCustomize 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:

// Set a custom title on the configuration object
ShopifyCheckoutSheetKit.configuration.title = "Custom title"

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

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

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.