Create a Custom App On The Shopify API In 3 Steps
Tags: shopify, api, customapp, programming
Published: 2023-12-10 23:18:20

<!-- wp:heading -->
<h2 class="wp-block-heading">Learn How to Quickly Build A Custom App On Shopify Data</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Many businesses that sell products or services online use <strong>Shopify</strong>, a software that helps them create and manage their online stores. Shopify is popular because it is easy to use and reliable. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Building a Custom App On Shopify: Prerequisites</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This lab will guide you through the process of integrating a Shopify store with Five using the <strong>Shopify API</strong>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>By the end of this lab, you'll learn how to develop an external web application that interacts with your Shopify store using Five. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here's what you'll need to get started:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Access to a Shopify store with admin privileges.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>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 <a href="https://five.co/sign-up">https://five.co/sign-up </a></li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2175,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/12/Five.Co-Create-a-Custom-App-On-The-Shopify-API-with-Five-1024x576.png" alt="" class="wp-image-2175"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color"><span style="color: #f1ebda; background-color: #4588d8; font-size: calc(12px + 0.390625vw);"><strong>Don't Feel Like Reading?</strong></span></mark>&nbsp;</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Watch the YouTube video instead</p>
<!-- /wp:paragraph -->

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

 %}

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 1: Configuring The Shopify API</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To configure the API, we need to create a custom application for our store. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>1. Log into your Shopify admin dashboard and proceed to Settings -&gt; Apps and Sales Channels. <br>This section displays all applications currently installed in your store. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>2. To create your custom application, select the 'Develop apps' button, which you will find in the top right corner of the page.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In case you are struggling to find this, check out the screenshot of Shopify's backend admin console below. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2162,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/12/Frame-64-1024x471.png" alt="" class="wp-image-2162"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>3. Give the application a title (for this guide, we've named our store '<strong>fiveteststore</strong>', and we will refer to it by this name from now on). </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2165,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2023/12/image-removebg-preview-1.png" alt="" class="wp-image-2165"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 2: Integrating Shopify With Five</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now, let’s launch Five and&nbsp;<a href="https://help.five.org/docs/applications/create-an-application" target="_blank" rel="noreferrer noopener">click the yellow + button to create a new application</a>. Assign it a name and press save. Then, select&nbsp;<strong>Manage&nbsp;</strong>to begin developing your application. This is the starting point for creating your custom app on Shopify.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2166,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/12/image-1-1024x576.png" alt="" class="wp-image-2166"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>We are going to use the Shopify API that we have just created. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>1. Begin by clicking on <strong>Data </strong>-&gt; <strong>Connection Wizard</strong>. <br>The Connection Wizard in Five simplifies the process of linking to REST APIs and setting up API endpoint mappings, streamlining your integration tasks. <a href="https://five.co/blog/using-webservices-to-connect-to-rest-apis/" data-type="link" data-id="https://five.co/blog/using-webservices-to-connect-to-rest-apis/">If you want to know more about it click here</a></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2167,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/12/image-2-1024x190.png" alt="" class="wp-image-2167"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>2. Inside the Connection Wizard, click on the Read List Mapping tab. Here we are going to pass in the URLs for our API.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The structure of the URL is:</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","level":4} -->
<h4 class="wp-block-heading has-text-align-center">https://{your_store_name}.myshopify.com/admin/api/{api_version}/products.json</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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 <a href="https://shopify.dev/docs/api/release-notes" data-type="link" data-id="https://shopify.dev/docs/api/release-notes">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>(<strong>Note</strong>: 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.)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>3. Add your URL to Five's Connection Wizard. It should look something similar to this:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2168,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/12/Frame-65-1024x548.png" alt="" class="wp-image-2168"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Now we need to add our Admin API access token, which we can add it as a header. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>1. Start by Clicking on the Headers Tab just below the URL field. Use '<code><strong>x-shopify-access-token</strong></code>' as its name and in the value paste your Admin API access token.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>2. Click 'Send', and a list with details of all your products will appear. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>3. Next, navigate to the '<strong>Field Mapping</strong>' 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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In <strong>Field Mapping</strong>, 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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>4. Repeat this process for the others - for 'read single', 'update', and 'delete' actions, use the following URL format:</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","level":4} -->
<h4 class="wp-block-heading has-text-align-center">https://{your_store_name}.myshopify.com/admin/api/{api_version}/products/:id.json</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This URL format is required because these actions necessitate a specific product ID. By using the <code>:id</code> variable, <a href="https://five.co/blog/using-webservices-to-connect-to-rest-apis/">Five can dynamically handle this requirement</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After all these steps our connection is ready! But before saving remember to give it a name and ID from the <strong>General </strong>tab (we are using the name fiveteststore here as well).</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 3: Using The Shopify API As a Data Source</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For this guide, we'll develop a Form through which we can create, read, update, and delete the products from our store.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>1. Inside Five, click on <strong>“Visual” -&gt; “Form Wizard”</strong>. In the primary data source lookup, select your connection. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2169,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/12/Frame-66-1024x548.png" alt="" class="wp-image-2169"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Now you can click on save to store the form, and then we can finally run our application by clicking the <strong>Run </strong>button in Five's top navigation bar.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2007} -->
<figure class="wp-block-image"><img src="https://five.co/wp-content/uploads/2023/10/Frame-16-2-1024x190.png" alt="" class="wp-image-2007"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Clicking the <strong>Run </strong>button, will open up a new window on your computer, and you can preview what you've developed in Five.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Conclusion: Previewing Our Custom App Built On The Shopify API</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In your end-user application, you now have a form that contains all of the products from the store. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2170,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/12/Frame-40-2-1024x548.png" alt="" class="wp-image-2170"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Next Steps</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This tutorial only scratches the surface of what's possible with Five. To learn more about Five's features, visit our website or <a href="https://www.youtube.com/channel/UCHtkoqKFZxsWBHGS32YQQRA">YouTube channel</a>.</p>
<!-- /wp:paragraph -->