--- title: Branding configuration description: >- Learn how to customize the presented checkout experience on Shopify's Checkout Sheet Kit. source_url: html: 'https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration' md: 'https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration.md' --- ExpandOn this page * [What you'll learn](https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration.md#what-youll-learn) * [Requirements](https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration.md#requirements) * [Step 1: Customize the color scheme](https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration.md#step-1-customize-the-color-scheme) * [Step 2: Customize the checkout title](https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration.md#step-2-customize-the-checkout-title) # Branding configuration Checkout Kit allows you to customize its color scheme and title. You can create a native look and feel in your mobile app by dynamically adjusting to a customer's iOS or Android device settings, hard-coding to light or dark mode, or using the same checkout branding that customers see in a merchant's store. This tutorial shows you how to customize your branding. *** ## What you'll learn In this tutorial, you'll learn the following tasks: * Customize the color scheme * Customize the title of the checkout that displays in your mobile app *** ## Requirements * You have an app using Checkout Kit *** ## Step 1: Customize the color scheme Checkout Kit provides various color customization options by setting properties on the `ShopifyCheckoutSheetKit.configuration` object. These options differ slightly by platform. ### i​OS customizations On iOS, you can configure the following color-related properties: * `colorScheme`: Light mode or dark mode. * `.automatic`: Match the user's device light mode/dark mode setting. * `.light`: Force light mode, regardless of device settings. * `.dark`: Force dark mode, regardless of device settings. * `.web`: Match the merchant's custom branding on the store's web checkout. * `backgroundColor`: The color to display in the background of the web view that displays the checkout. * `tintColor`: The color of the progress bar that displays while the checkout web view is loading. Sample code: ## iOS color customizations ```swift ShopifyCheckoutSheetKit.configure { // [Default] Automatically toggle idiomatic light and dark themes based on device preference (`UITraitCollection`) ShopifyCheckoutSheetKit.configuration.colorScheme = .automatic // Force idiomatic light color scheme ShopifyCheckoutSheetKit.configuration.colorScheme = .light // Force idiomatic dark color scheme ShopifyCheckoutSheetKit.configuration.colorScheme = .dark // Force web theme, as rendered by a mobile browser ShopifyCheckoutSheetKit.configuration.colorScheme = .web } // Use a custom UI color ShopifyCheckoutSheetKit.configuration.backgroundColor = UIColor(red: 0.09, green: 0.45, blue: 0.69, alpha: 1.00) // Use a system color ShopifyCheckoutSheetKit.configuration.backgroundColor = .systemBackground // Use a custom UI color ShopifyCheckoutSheetKit.configuration.tintColor = UIColor(red: 0.09, green: 0.45, blue: 0.69, alpha: 1.00) // Use a system color ShopifyCheckoutSheetKit.configuration.tintColor = .systemBlue ``` ### Android customizations On Android, you can configure the following color-related properties: * `colorScheme`: Light mode or dark mode. * `ColorScheme.Automatic()`: Match the user's device light mode/dark mode setting. * `ColorScheme.Light()`: Force light mode, regardless of device settings. * `ColorScheme.Dark()`: Force dark mode, regardless of device settings. * `ColorScheme.Web()`: Match the merchant's custom branding on the store's web checkout. When specifying `ColorScheme.Web()`, you can also provide the following options: * `webViewBackground`: The color to display in the background of the web view that displays the checkout. * `headerFont`: The font color for the checkout's header text, in the app bar. * `headerBackground`: A background color to display in the checkout's app bar. * `progressIndicator`: The color of the progress bar that displays while the checkout loads. Sample code: ## Android color customizations ```kotlin ShopifyCheckoutSheetKit.configure { // [Default] Automatically toggle idiomatic light and dark themes based on device preference. it.colorScheme = ColorScheme.Automatic() // Force idiomatic light color scheme it.colorScheme = ColorScheme.Light() // Force idiomatic dark color scheme it.colorScheme = ColorScheme.Dark() // Force web theme, as rendered by a mobile browser it.colorScheme = ColorScheme.Web() // Force web theme, passing colors for the modal header and background 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 customizations On React Native, you can configure the following color-related properties: * `colorScheme`: Automatic, light, dark, or web mode. * For iOS, you can provide a `colors` object that specifies: * `backgroundColor`: The color to display in the background of the web view that displays the checkout. * `tintColor`: The color of the progress bar that displays while the checkout web view is loading. * For Android, you can provide a `colors` object that specifies: * `backgroundColor`: The color to display in the background of the web view that displays the checkout. * `progressIndicator`: The color of the progress bar that displays while the checkout loads. * `headerBackgroundColor`: A background color to display in the checkout's app bar. * `headerTextcolor`: The font color for the checkout's header text, in the app bar. Sample code: ## React Native color customizations ```javascript const config: Configuration = { colorScheme: ColorScheme.light, colors: { ios: { backgroundColor: '#ffffff', tintColor: '#000000', }, android: { backgroundColor: '#ffffff', progressIndicator: '#2d2a38', headerBackgroundColor: '#ffffff', headerTextColor: '#000000', }, }, }; ``` *** ## Step 2: Customize the checkout title To customize the title of the checkout that displays in your app: * On iOS, assign a title to the `ShopifyCheckoutSheetKit.configuration.title` property. * On Android, override the `checkout_web_view_title` string. Sample code: ## Customize the title ```swift // Hardcoded title, applicable to all languages ShopifyCheckoutSheetKit.configuration.title = "Custom title" ``` ```kotlin Custom title ``` ##### iOS ``` // Hardcoded title, applicable to all languages ShopifyCheckoutSheetKit.configuration.title = "Custom title" ``` ##### Android ``` Custom title ``` *** * [What you'll learn](https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration.md#what-youll-learn) * [Requirements](https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration.md#requirements) * [Step 1: Customize the color scheme](https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration.md#step-1-customize-the-color-scheme) * [Step 2: Customize the checkout title](https://shopify.dev/docs/storefronts/mobile/checkout-kit/configuration.md#step-2-customize-the-checkout-title)