I’m currently working on a mobile app project built on Shopify, and for the checkout process, we’re utilizing the Shopify Checkout SDK. While we’ve been able to customize the checkout extensively from the backend, we’ve encountered an issue with the “Pay Now” button.
By default, the button color is blue, but according to our brand guidelines, it should be red. We’re looking for a way to change the color of the “Pay Now” button to red.
We’ve already referred to the following resources for configuration:
Hey @Sooraj_Kumar The Checkout Sheet Kit’s colors configuration only controls the native modal wrapper (like the header and background of the sheet), not the actual checkout button content, so the “Pay Now” button styling is inherited from your store’s checkout branding settings. To change the button color to red, head to Settings → Checkout → Customize in your Shopify Admin and update the button color under the Colors section in the checkout editor, and this will automatically reflect in your mobile app’s checkout.
If you’re on Shopify Plus and want more control, you can also use the Checkout Branding API to programmatically set button colors. One thing to note though: if you have Shop Pay enabled, customers eligible for Shop Pay will see the branded purple Shop Pay button instead, but these methods will update the standard “Pay Now” button for other payment flows. Hope this helps!
Just came across this and thought of another thing that may be useful to try!
If you’ve performed the above steps to configure the theme and still aren’t seeing the colors you expect, then the final step is to ensure you configure the colorScheme to .web
Docs on how to change the colorScheme can be found in:
Hey @PraveenAdroitminds - thanks for the update. The missing piece is most likely on the SDK side: by default, the Checkout Sheet Kit uses its own color scheme (.automatic) rather than your store’s custom branding, which could be why you’re still seeing the blue button.
Can you try setting your colorScheme to ColorScheme.web in your React Native configuration (as @KieranOsgood mentioned above)? This should tell the SDK to use your store’s actual checkout branding instead of the defaults. You can find the details on how to do that here. If you’ve already tried that and it’s still not reflecting, could you share your exact Configuration object and the version of checkout-sheet-kit-react-native you’re on? That’ll help us dig deeper. Let me know how it goes!
