Build a Pre-Purchase Checkout Extension for Shopify

Table of Contents

1. Introduction
2. Creating a New Gadget App
3. Connecting to Shopify
4. Importing Shopify Data Models
5. Setting Up API Scopes
6. Connecting Gadget App to Shopify App
7. Installing the Gadget App on a Store
8. Syncing Shopify Product Data to Gadget Database
9. Modifying the Embedded Frontend
10. Saving Selected Product to Metafield
11. Building the Checkout UI Extension
12. Adding Metafield as Input
13. Allowing API Access for the Extension
14. Updating the Extension Code
15. Previewing the Extension
16. Deploying the Extension
17. Final Thoughts

How to Build a Pre-Purchase Checkout UI Extension for Shopify using Gadget

Today, I'm going to show you step by step how to build a pre-purchase checkout UI extension for your Shopify store using Gadget. This tutorial will guide you through the process of creating a new Gadget app, connecting it to your Shopify store, importing data models, setting up API scopes, and installing the app on a store. We will also cover syncing Shopify product data to the Gadget database, modifying the embedded frontend, and saving the selected product to a metafield. Finally, we will build the checkout UI extension, add metafield as input, allow API access, and deploy the extension for preview and publication.

1. Introduction

In this tutorial, we will learn how to leverage the power of Gadget to build a pre-purchase checkout UI extension for Shopify. This extension will allow you to enhance the checkout experience for your customers by offering them additional product options before they make a purchase. By the end of this tutorial, you will have a fully functional checkout extension that can be installed on any Shopify store.

2. Creating a New Gadget App

The first step in building our pre-purchase checkout UI extension is to create a new Gadget app. We will use the Gadget CLI to scaffold our app and set up the necessary backend and frontend infrastructure. Once the app is created, we will have a Postgres database, a serverless Node backend, and a hosted React frontend ready to use.

3. Connecting to Shopify

After creating the Gadget app, the next step is to connect it to Shopify. We will establish a Partners connection, which will give our app the necessary permissions to build app extensions and embedded frontends. This connection will allow us to select products to be offered in the checkout and keep our Gadget database in sync with the Shopify store.

4. Importing Shopify Data Models

To access Shopify data in our Gadget app, we need to import the necessary data models. In this case, we will import the "Product" data model, which will allow us to read product information from the Shopify store. By selecting the appropriate API scopes and models, we can specify the level of access our Gadget app has to the Shopify store data.

5. Setting Up API Scopes

Before we confirm our connection to Shopify, we need to choose the API scopes that our app will have access to. API scopes define the specific actions and data that our Gadget app can interact with in the Shopify store. In this tutorial, we will select the "read product" scope, which grants our app the ability to retrieve product information.

6. Connecting Gadget App to Shopify App

Once we have selected the API scopes, we can confirm our connection to Shopify. This step will establish the link between our Gadget app and the Shopify app. We will copy the clientID and secret from the Gadget app and paste them into the Shopify Partners dashboard. This connection will enable our Gadget app to communicate with the Shopify store and access the selected API scopes.

7. Installing the Gadget App on a Store

After establishing the connection between the Gadget app and the Shopify app, we can proceed to install the Gadget app on a Shopify store. This step involves selecting a store and installing the app. With Gadget, we don't need to write any authentication code as it is handled for us. The app will be immediately installed on the selected store.

8. Syncing Shopify Product Data to Gadget Database

Once the Gadget app is installed on the store, we need to sync the Shopify product data to the Gadget database. This ensures that our Gadget app has the most up-to-date information about the products available in the store. By clicking the sync button, we can initiate the syncing process and import the necessary Shopify data models into the Gadget app.

9. Modifying the Embedded Frontend

With the Gadget app connected to Shopify and the product data synced, we can now modify the embedded frontend to create a custom UI for the pre-purchase checkout extension. In this step, we will add code to the ShopPage.jsx file to create a dropdown menu that allows the customer to select a product to be offered during the checkout process. We will use the Gadget hooks to retrieve the Shopify product data and populate the dropdown menu.

10. Saving Selected Product to Metafield

Once the frontend is modified, we need to save the selected product to a metafield in the Shopify store. This metafield will store the product information that will be used as input for the checkout UI extension. We will create a new action in Gadget that handles this process and saves the product ID to the metafield. By defining the necessary parameters and making a GraphQL request, we can store the selected product ID in the metafield.

11. Building the Checkout UI Extension

Now that the selected product is saved to the metafield, we can proceed to build the checkout UI extension. This extension will be displayed during the checkout process and will allow the customer to view and select the pre-purchase offer. In this step, we will modify the extension's toml file to set the metafield as an input and enable API access. We will also update the extension code to retrieve the product information and display it in the checkout UI.

12. Adding Metafield as Input

To make use of the saved product ID in the checkout UI extension, we need to configure the metafield as an input. This will allow us to pass the product ID as a parameter when making a storefront API request. By updating the toml file and specifying the metafield namespace and key, we can ensure that the metafield is available for input in our extension code.

13. Allowing API Access for the Extension

In order for our checkout UI extension to make storefront API requests, we need to enable API access. This will allow the extension to retrieve the necessary product information from the Shopify store. By setting the "apiAccess" capability to true in the toml file, we grant the extension the required permissions to interact with the Shopify store's API.

14. Updating the Extension Code

With the metafield configured and API access enabled, we can now update the extension code to fetch the product information and display it in the checkout UI. We will use the Gadget hooks to make a storefront API request and retrieve the product's title, image, variant, and price. We will also add functionality to add the selected product to the cart using the Gadget applyCartLinesChange hook.

15. Previewing the Extension

Before deploying the extension, it is important to preview it to ensure that it is working as intended. We can use the Shopify CLI to start a development app and preview the extension in a checkout environment. By testing the extension's functionality and user interface, we can identify any issues or improvements that need to be addressed before deployment.

16. Deploying the Extension

Once the extension has been thoroughly tested and approved, it is time to deploy it for publication. We will use the Shopify CLI to push the extension code to the Partners app and create a new version. This version can then be published, making the extension available to be installed on any Shopify store. We will also configure the extension's placement in the checkout to ensure proper visibility and functionality.

17. Final Thoughts

Building a pre-purchase checkout UI extension for Shopify using Gadget is a powerful way to enhance the customer experience and drive sales. By leveraging the capabilities of Gadget and Shopify's API, you can create a seamless and intuitive checkout process that offers additional product options to your customers. With the step-by-step instructions in this tutorial, you have all the tools and knowledge you need to build your own extension and take your Shopify store to the next level. Happy coding!