I've been looking at the Shopify API to create a Shopify APP (public) that changes the checkout page ever so slightly. What I'd like to achieve is to add a button (like Apple Pay, but open to change requirements based on what would be possible). The service that we would offer is to deliver the items to the customer directly, so the journey would like this:
- There is a bit of code that validates the customer's address and if is within a serviceable area. If it is, we show the button "Checkout with US" for the customer.
- The customer clicks on the button and get redirected to our page where the customer can select an time slot for the delivery to take place.
- Our API would then contact Shopify API and create the order
- Customer is redirected to Shopify, the cart is empty but order is present in the Shopify admin.
Looking at the Admin, I have developed our API and everything is already in place apart from being able to add the button and the JS code (that checks whether the address is within the serviceable area) in the checkout page. How and where can I find information about modifying the checkout page (ideally for all types of Shopify subscribers, not to the top tier only).
Lulu here from the Shopify Support team. Thanks for reaching out here, and I'll be more than happy to help you out.
There isn’t actually the ability to edit the code for the checkout unless you are on Shopify plus or working with a client on Shopify plus. The primary reasons behind not being able to edit the checkout CSS are around security, responsiveness, and maintaining PCI compliance. If we had customized checkouts, any updates or improvements that we wanted to make would have to be made on a store-by-store basis. As you can imagine, this would take a very long time! It would also make the customer suffer if the checkout was then glitchy/not updated correctly.
We still allow you to customize your checkout style (as noted in this guide), such as changing the colours and adding a banner to the top of the checkout page. However, ultimately these systems are in place with the primary focus of making our platform more secure for you and your customers. There are no workarounds for this at the moment. Let me know if you have any further questions at all, I am happy to help in any way I can!
Lulu | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
Hi @Lulu ,
Thanks for the prompt answer!
I'd like to clarify my question a bit just to make sure we're on the same page. What I'd like to achieve is to add a button on the checkout page. On the best case scenario, the button would be visible based on an API call to our API (or as a result of a JS function which would simply be a regex validation). On the worst case scenario, the button would be visible like Apple/google Pay all the time.
I'd like to achieve this via my publicly listed App. Are you saying that to have this button added at the checkout is not possible at all (mind you, to add via the public app that would be approved by Shopify)?
Thanks again and kind regards