Build and deploy your own Shopify checkout extension: A step-by-step guide

I came across the Shopify checkout extension and decided to do a proof of concept to demo it to a client. Since this is a new feature with limited preview to only Shopify Plus store merchants, I couldn’t find any straightforward tutorial on deployment. There are good tutorials on YouTube on how to build it in development, but I couldn’t find solutions for deploying it on a live server.

In this tutorial, I will assume that you are new to Shopify development and break down the concepts.

Prerequisites

• Familiarity with React development using TypeScript
• A Shopify Partner account
• Familiar with a reverse proxy such as Nginx
• Ngrok setup
• A new Shopify demo store

Initializing the Project

Create a new Shopify app with the following command:

npm init @shopify/app@latest

After that, change to the checkout-demo directory and run npm run dev. You will be prompted to log in to Shopify.

Once logged in via browser, go back to the terminal and choose your organization, app name, and the development store. A ngrok URL will be generated. Use it to install your app.

Creating the Checkout Extension

To add a new extension to this app, run:

npm run shopify app generate extension

From the wizard, choose checkout UI, give it a suitable name, and select TypeScript React. Then run npm run dev again. You will see a link to the dev console.

Product Recommendation

Now I’ll use a fake API to get a product recommendation. Change the directory to extensions/checkout-demo-ext/src.

Add network permission by opening shopify.ui.extension.toml and adding:

[capabilities]
network_access = true

Copy and paste the following code in extensions/checkout-demo-ext/src/index.ts:

import { useState, useEffect } from 'react';
import {
  render,
  Banner,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => <App />);

function App() {
  const [productPlacement, setProductPlacement] = useState("Loading product recommendation...");

  useEffect(() => {
    fetch('https://fakestoreapi.com/products/9')
      .then(res => res.json())
      .then(json => setProductPlacement(`${json.title} ($${json.price})`));
  })
  return (
    <Banner title="checkout-demo-ext">
      {productPlacement}
    </Banner>
  );
}

Preparing for Deployment

Copy the below environment variables to a new file and get the relevant keys:

SHOPIFY_API_KEY=<Client ID from Shopify Partner > Apps > Client Credentials>
SHOPIFY_API_SECRET=<Client Secret>
HOST=https://your-domain.com
SCOPES=write_products
PORT=8081

Copy the below nginx config to /etc/nginx/sites-enabled/your-domain.com:

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:8081/;
    }
}

Web Setup

We need a CLI token for production deployment. Go to Shopify Partners Settings > CLI Token > Manage Token. Generate and copy the SHOPIFY_CLI_PARTNERS_TOKEN.

Go to the web/ directory and install dependencies:

cd web/
npm install dotenv
npm install -g pm2

Create a .env file under web and place all the environment variables. Then open web/shopify.js and add:

import * as dotenv from 'dotenv';
dotenv.config()

Start the web server:

pm2 start index.js --name 'Checkout UI'

Deployment

Build the app:

SHOPIFY_API_KEY=<Client ID> SHOPIFY_API_SECRET=<Client Secret> SCOPES=write_products HOST=https://your-domain.com PORT=8081 npx shopify app build

Deploy:

SHOPIFY_CLI_PARTNERS_TOKEN=<CLI token> SHOPIFY_API_KEY=<Client ID> SHOPIFY_API_SECRET=<Client Secret> HOST=https://your-domain.com PORT=8081 npx shopify app deploy

Note: Your previous development deployment will still be on the website and may throw errors during testing. I suggest creating different stores for dev/prod testing.

Activating the Plugin

Log in to the development store. Go to the checkout editor.

On the bottom left, check the “Add an app” folder and you should see your plugin there.