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:
