Skip to main content

Branding configuration

Checkout Sheet 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.

Anchor to What you'll learnWhat 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

Anchor to RequirementsRequirements

  • You have an app using Checkout Sheet Kit

Anchor to Step 1: Customize the color schemeStep 1: Customize the color scheme

Checkout Sheet Kit provides various color customization options by setting properties on the ShopifyCheckoutSheetKit.configuration object. These options differ slightly by platform.

Anchor to iOS customizationsiOS 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

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

Anchor to Android customizationsAndroid 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

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

Anchor to React Native customizationsReact 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

const config: Configuration = {
colorScheme: ColorScheme.light,
colors: {
ios: {
backgroundColor: '#ffffff',
tintColor: '#000000',
},
android: {
backgroundColor: '#ffffff',
progressIndicator: '#2d2a38',
headerBackgroundColor: '#ffffff',
headerTextColor: '#000000',
},
},
};

Anchor to Step 2: Customize the checkout titleStep 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

// Hardcoded title, applicable to all languages
ShopifyCheckoutSheetKit.configuration.title = "Custom title"
<string name="checkout_web_view_title">Custom title</string>
Was this page helpful?