Many businesses that sell products or services online use Shopify, a software that helps them create and manage their online stores. Shopify is popular because it is easy to use and reliable.

But even Shopify has limits: that's why many businesses create custom apps on the Shopify API to manage their e-commerce stores more effectively.

For example, one challenge that these businesses face is how to use and understand the data that their Shopify stores produce. They might want to know how many visitors come to their store, where they come from, what they buy, how they pay, and so on.

Or they might want to add additional data to the data that Shopify collects. This data can help them improve their marketing, sales, and customer service strategies.

But to do that, they need to know how to access, analyze, and interpret the data that Shopify stores. This data can be accessed through Shopify's well-documented API.

In this blog post, we will describe how to use Five, a low-code development environment, to build a custom app on top of the Shopify API.

Building a Custom App On Shopify: Prerequisites

This lab will guide you through the process of integrating a Shopify store with Five using the Shopify API.

By the end of this lab, you'll learn how to develop an external web application that interacts with your Shopify store using Five.

Here's what you'll need to get started:

Access to a Shopify store with admin privileges.
Have Five installed in your system or a cloud subscription that allows us to build custom online database applications. To sign up for a free download, visit https://five.co/sign-up

Once we are equipped with the Shopify API and Five, we will simply connect Five to the API and treat it as a data source for our web app. This enables us to build forms, charts, dashboards and reports on top of the API. We can even query it using simple SQL inside of Five.

Don't Feel Like Reading?

Watch the YouTube video instead

https://www.youtube.com/watch?v=2FCGG7KJpJQ

Step 1: Configuring The Shopify API

To configure the API, we need to create a custom application for our store.

1. Log into your Shopify admin dashboard and proceed to Settings -> Apps and Sales Channels.
This section displays all applications currently installed in your store.

2. To create your custom application, select the 'Develop apps' button, which you will find in the top right corner of the page.

In case you are struggling to find this, check out the screenshot of Shopify's backend admin console below.

3. Give the application a title (for this guide, we've named our store 'fiveteststore', and we will refer to it by this name from now on).

4. Next, click on the 'Configuration' section and set the API access scopes for the data you wish to send to an external system, such as Products, Orders, Inventory, etc.

5. Once you've completed the configuration setup, proceed to the 'API Credentials' tab. Here, Shopify will prompt you to install your application. Upon clicking to install, Shopify will generate an Admin API access token. This token is only viewable once, so be sure to save it in a secure location for future reference.

Step 2: Integrating Shopify With Five

Now, let’s launch Five and click the yellow + button to create a new application. Assign it a name and press save. Then, select Manage to begin developing your application. This is the starting point for creating your custom app on Shopify.

We are going to use the Shopify API that we have just created.

1. Begin by clicking on Data -> Connection Wizard.
The Connection Wizard in Five simplifies the process of linking to REST APIs and setting up API endpoint mappings, streamlining your integration tasks. If you want to know more about it click here

2. Inside the Connection Wizard, click on the Read List Mapping tab. Here we are going to pass in the URLs for our API.

The structure of the URL is:

https://{your_store_name}.myshopify.com/admin/api/{api_version}/products.json

Replace {your_store_name} with the name of your store and replace {api_version} with the latest version of the API which can be found here.

(Note: For this guide, we'll be retrieving product details from the store. To ensure a smooth process, confirm that you have granted product access to the API during Step 1.)

3. Add your URL to Five's Connection Wizard. It should look something similar to this:

Now we need to add our Admin API access token, which we can add it as a header.

1. Start by Clicking on the Headers Tab just below the URL field. Use 'x-shopify-access-token' as its name and in the value paste your Admin API access token.

2. Click 'Send', and a list with details of all your products will appear.

3. Next, navigate to the 'Field Mapping' tab to observe how Five interprets your data. Five translates the JSON it receives from Shopify into something resembling a traditional database table. This is very useful once we want to query this data in SQL.

In Field Mapping, you have the flexibility to modify the data and display types of your fields. Five will automatically recognize the ID field as the primary key. But just in case it doesn't, make sure to tick the checkbox labeled primary key next to the ID field.

4. Repeat this process for the others - for 'read single', 'update', and 'delete' actions, use the following URL format:

https://{your_store_name}.myshopify.com/admin/api/{api_version}/products/:id.json

This URL format is required because these actions necessitate a specific product ID. By using the :id variable, Five can dynamically handle this requirement.

After all these steps our connection is ready! But before saving remember to give it a name and ID from the General tab (we are using the name fiveteststore here as well).

Step 3: Using The Shopify API As a Data Source

Our custom app is now successfully connected to our Shopify store, and the Shopify API can be leveraged across Five as a data source in various features, including forms, charts, data views, and reports.

For this guide, we'll develop a Form through which we can create, read, update, and delete the products from our store.

1. Inside Five, click on “Visual” -> “Form Wizard”. In the primary data source lookup, select your connection.

Five will take care of populating most of the details for you. At this stage, you are welcome to modify any settings as you see fit.

Now you can click on save to store the form, and then we can finally run our application by clicking the Run button in Five's top navigation bar.

Clicking the Run button, will open up a new window on your computer, and you can preview what you've developed in Five.

Conclusion: Previewing Our Custom App Built On The Shopify API

In your end-user application, you now have a form that contains all of the products from the store.

You have successfully created an entire custom app with a fully functional GUI that lets your end-users interact with the Shopify API in just a few clicks. You can click on each record to view their details, even make changes, add new records, and delete them as well.

Next Steps

In this lab, you learned how to integrate a Shopify store with Five using the Shopify API and the Connection Wizard. You developed an external web application that can interact with your store data and perform CRUD operations on your products.

This integration can help you leverage the power of Five to access, analyse, and interpret your Shopify store data. You can also use Five to create other features, such as charts, data views, and reports, to enhance your store management and performance.

This tutorial only scratches the surface of what's possible with Five. To learn more about Five's features, visit our website or YouTube channel.

Create a Custom App On The Shopify API In 3 Steps