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.

Types of Checkout Extensions

• 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.

Checkout Extension Requirements

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 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 template. I am using 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.

• After publishing the extension , to view the extension functionality on store front enable the Post-purchase page setting.
  Visit 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 payment. You can modify this page as per your app’s requirement.

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.

• Now shopify extension serve to 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 you index.js file , it will automatically reflect at you 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.

nidhi joshi
6 Badges

12 August 2022