Blogs

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

Customizing Shopify Checkout lets 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 complete the order payment.

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

Checkout Extension Requirements

• Install the latest Node.js
• Install Shopify CLI
• install yarn
• Enable these settings of your Shopify app

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.

• Login into the Shopify partner  account.
  shopify login

• Now choose the app for which you want to create the extension by using the below command:
  shopify extension create

• 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 a 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 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 the extension on your store you need to enable and publish the extension.

• After publishing the extension, to view the extension functionality on the storefront enable the Post-purchase page setting.
  Visit the store's checkout setting and link the Post-purchase page configuration with your app (for which you have created the extension), follow the below image –

• Now the customer will be redirected to a new post-purchase page after making a payment. You can modify this page as per your app's requirements.

Modification of the 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 the corresponding page (here it's the 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.

• Now shopify extension serveto start a local server. You will be provided with a query string, append this to your store's post-purchase page which will appear after you make an order, now update your index.js file, and it will automatically reflect on your post-purchase page.

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 on Webkul.com