In this mini lecture we will walk through the steps needed to build and deploy a Shopify app that extends the buyers experience by suggesting additional products to add to their cart prior to checkout.
Shopify is the second most used e-commerce platform worldwide, with 20% of the top 1 million live websites worldwide being powered by Shopify. It's particularly dominant in the United States and several large and well-known brands use Shopify including Nestle, Pepsi, Unilever, Kylie Cosmetics, Vogue, and Gymshark.
Shopify apps are built on a variety of Shopify tools to create a great merchant experience. At the time of writing this tutorial there were over 8,000 apps published in the Shopify App Store, not including all of the custom apps built for specific stores.
There is also a high demand for Shopify React Developers which makes the combination of Shopify and React skills particularly valuable.
This mini lecture is based on Shopify an existing pre-purchase product offers tutorial but also introduces additional tools (which ones? GraphiQL, Theme Editor) and context to help further your understanding of Shopify's tech stack and ecosystem.
Before we do anything let's take a first take a look at what we will be building and how we can manage our app in the Shopify Theme Editor.
Demo the deployed app and adding/positioning the app in the Theme Editor.
In this tutorial, you'll learn how to do the following tasks:
-
Create a basic checkout UI extension that renders some text in the checkout flow.
-
Run the extension locally and test it on a development store.
-
Show an initial loading state for the products to be offered.
-
Fetch and filter cart lines from the Storefront API, to display to customers.
-
Add a cart line to an order.
-
Deploy your extension code to Shopify.
Additionally you will learn:
- To install and use the Shopify GraphiQL app within the store Admin
- Position the app at different extension points in the Checkout Theme Editor
- Deploy the app on Gadget.dev
- You've signed up for a free Gadget.dev account.
- You've created a Partner account.
Confirm everyone has created a free Gadget.dev account and a Shopify Partner account.
In order to work with checkout extensions we need to create a development store with checkout extensibility developer preview enabled.
Login to shopify.com/partners and click on Add store button.
Choose Create a store to test and build
Give your store a unique name/url and choose Checkout extensibility from the Developer Preview dropdown.
Now you will be able to open the store's Admin console.
Under Sales channels > Online Store click View your store.
Back in Shopify Partners click on the Apps side navigation link and then click the Create app button.
Assign the app a name and click Create
Once the app is created we will be provided Client crednetials, including the Client ID and Client secret, both of which we will be needed later when creating a new app on Gadget.
- Login to Gadget.dev
- Create a new Gadget app (name must be unique in the
gadget.appnamespace.) - Click
Click to Shopifybutton
Add your Shopify Client ID and Client Secret keys.
Connect to Shopify.
Choose Product for the scope.
Copy the App URL and Allowed redirection URL from Gadet to our new Shopify app.
Click Save
Open app in VSCode and delete the Web folder and then run:
npm run devHere you will be prompted to choose the Partner Organization
And then choose No, connect it to an existing app
Once the previous steps are completed start the app by running:
npm run devYou will be prompted to install the @shopify/create-app package
Choose node
Assign your app a name.
Once completed you should see the following success message.
Once the previous steps are completed start the app by running:
npm run dev
At this point we can ctrl + c to quit as the app won't respond just yet.
Now that the Shopify Cli has successfully created a project its time to generate an extension. This requires providing the following info:
- Type of extension
- Extension name
- What tech will we be building in
Create the extension by running:
npm run shopify app generate extension 
Click on the app we just built.
Click the Select store button.
Choose your store.
Provide quick overview of the by reviewing the Sample Code.
Run npm run dev to start the local environment.
This will provide a Preview URl so copy/paste that into a new tab to open the Developer Console.
Now click checkout ui extension to open Shopify Checkout and render the extension. If everything was successful you should see the extension rendered on the top left of the app.
