Getting started with Shopify checkout extensions

Shopify launched a new family of features named “Checkout extensions” in order to tackle the “problem” of checkout customizations. This set of features allows us to add new functionalities and new user interface features to the Shopify Plus stores.

The biggest issue developers and store owners alike have is that to even have the option to access checkout.liquid, a store needs to be on Shopify Plus. And once you do modify the checkout.liquid, all the updates that will be done later on need to be done manually. Which is, as you probably are aware, somewhat problematic.

With the new checkout extensibility options, the developers and store owners will be able to customize, scale and upgrade checkout more easily. Still only on Shopify Plus, though.

Types of checkout extensions

The checkout extensions are currently divided into four main groups:

Online store

• Theme app extension 

Discounts and checkout

• Checkout UI 
• Function – Order discount 
• Function – Product discount 
• Function – Shipping discount 
• Post-purchase UI 

Analytics

• Web pixel 

Merchant admin

• Subscription UI 

One of the cool options is that we will now be able to further customize the checkout layout, and also have the option to set up the field for customization via the WYSIWYG editor, or NO-CODE, if you will. That means the store owner who is not familiar with the code will be able to customize the checkout layout (more so than before). There will be some limitations here obviously, because checkout is an extremely important step in the conversion process, and going too wild with creative efforts could seriously affect the sales. Basically, these will be branding changes mostly using CSS, but via the NO CODE visual editor.

We will also be able to create apps to add additional functionality to the checkout, like adding upsells (“You may also like” type of products) to the checkout, or collecting additional data.

You can check out some examples in the official Shopify documentation.

This will all be done using the already familiar Shopify CLI commands, creating an app, and generating extensions.

Choosing the tech stack

We have the option to select the language we want to work with developing the checkout extensions:

Which template would you like to use?

node
PHP
Ruby

And if we select node, for example, a further choice is given:

  TypeScript 
  JavaScript 
  TypeScript React 
  JavaScript React 

Build with a Checkout UI extension

Let’s create a checkout extension app. First we will create a folder where our app will live. Power up the Terminal, navigate to the folder (using cd command) where you want to start working and create a new folder. I have placed my folder on the desktop, so I will first navigate to it:

cd Desktop

And then create a new folder:

mkdir checkout-extensions

And now I will access that folder:

cd Desktop/checkout-extensions/

Perfect. Let’s get this show on the road. First, we will create a Shopify app. I am using Yarn here, but you can also use npm or pnpm:

yarn create @shopify/app

Once this is completed, we will be asked to enter our app’s name:

yarn create v1.22.19
[1/4]  Resolving packages...
[2/4]  Fetching packages...
[3/4]  Linking dependencies...
[4/4]  Building fresh packages...
success Installed "@shopify/create-app@3.23.0" with binaries:
      - create-app

Welcome. Let’s get started by naming your app. You can change it later.
? Your app's name? 
> luxury-trade-app
  ──────────────────────────────

When the name is entered, we will be able to choose the template. Options are:

• node
• PHP
• Ruby

Nice. If you check your folder now, you will see there has been some changes there!

Now we need to navigate to the folder which was created and named per our app name and enter the following to our Terminal:

yarn generate extension

Once we have generated the extension, we will have an option to select which type of extension we want to create:

  Type of extension? … 

  Online store
  Theme app extension 

  Discounts and checkout
  Checkout UI 
  Function - Order discount 
  Function - Product discount 
  Function - Shipping discount 
  Post-purchase UI 

  Analytics
  Web pixel 

  Merchant admin
  Subscription UI 

We will then name our extension, and choose the tech we want to work with:

  Type of extension? · Checkout UI
  Your extension's working name? · Hartt Check extension
  What would you like to work in? … 
  TypeScript 
  JavaScript 
  TypeScript React 
  JavaScript React 

Once we select our preference, we need to install the dependencies by running the:

yarn dev

We will be asked to log into our Shopify Partner’s account:

To run this command, log in to Shopify Partners.
? Press any key to open the login page on your browser

And when we do, we will get a success message:

If this is the first time you are running dev for this project, you will configure your options by answering a few questions:

Which Partners organization is this work for? … 

Create this project as a new app on Shopify? · Yes, create it as a new app

Which development store would you like to use to view your project? 

When you answer these, you should get a success message:

Success! Converted igorbujas.myshopify.com to a Test store.

To make your local code accessible to your dev store, you need to use a Shopify-trusted tunneling service called ngrok.

Sign up and get an auth token: https://dashboard.ngrok.com/get-started/your-authtoken. You can sign up with your Github account. Once you get your token and paste it in the Terminal, you should be good to go.

If you get this, see if you were logged out of the CLI and log back in.

And that’s it. You are ready to start developing your own checkout app.

The checkout extensions are very new and fresh from the oven, so I intend to add my thoughts and more info when I collect the experience of using these features on real-life projects, as opposed to just testing on the dev stores.