Customizing Shopify Checkout — Checkout Extension

Shopify has launched a much awaited extension — Checkout Extension which will help in customizing Shopify checkout flow and reduces the developer restrictions on appending some additional inputs or features on checkout flow.

Customizing Shopify Checkout — Checkout Extension let app developers build custom functionality that merchants can install at defined points in the checkout flow like capturing or showing a product offer before or after customers completes the order payment.

• Checkout UI Extension : Appending something in between the checkout flow like before or after customer selects a shipping method or puts his contact details.
• Post Purchase Checkout Extension : Appending something after customer makes a purchase.

Post Purchase Checkout

Post-purchase checkout extensions allow merchants to add a page after the order is confirmed, but before the thank you page.

Here I am explaining the flow through Shopify CLI .

• After choosing the app, choose the Post Purchase Extension from the extension list shown and write an appropriate name for your extension.
• Choose the javascript libraries to create template. I am using Shopify react here.

• A new folder will be created with your extension name, navigate to the new folder and to make the extension feature available for your app, register and push the extension by using shopify extension register and shopify extension push commands.
• After these commands now you will be able to see the created extension on your app’s extension section for which you have created the same. Now to check the working status of extension on your store you need to enable and publish the extension.

Modification of Post-purchase page

Now visit the extension folder and update the src/index.js file to make the changes according to your requirement. After updating the extension file it is mandatory to unpublish and publish the extension to reflect the change on corresponding page (here its post-purchase page). To overcome this limitation the developer can use ngrok to make and check the changes on runtime. Follow the below steps for this:

• Create an account on ngrok and you will be provided with an authentication token.
• Navigate to your extension folder and run shopify app tunnel auth <your ngrok auth token> , this will connect your extension code with ngrok server.

No need to make multiple orders or publish and unpublish your extension multiple times to view the changes, just update the file as per your need and develop your extension.

The Checkout UI Extension is still in beta phase, so once it is available for developers I will update it here too.

Thanks for reading my blog, hope it will help you in building.

Originally published at https://webkul.com on August 12, 2022.