{"id":2160,"date":"2023-12-01T11:26:17","date_gmt":"2023-12-01T03:26:17","guid":{"rendered":"https:\/\/five.co\/?p=2160"},"modified":"2024-08-29T14:29:13","modified_gmt":"2024-08-29T06:29:13","slug":"create-a-custom-app-on-the-shopify-api-in-3-steps","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/blog\/create-a-custom-app-on-the-shopify-api-in-3-steps\/","title":{"rendered":"Create a Custom App On The Shopify API In 3 Steps"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Learn How to Quickly Build A Custom App On Shopify Data<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Many businesses that sell products or services online use <strong>Shopify<\/strong>, a software that helps them create and manage their online stores. Shopify&#8217;s e-commerce solution is popular because it is easy to use and reliable. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But even Shopify has limits: that&#8217;s why <strong>many businesses create custom applications that connect to the Shopify API to manage their e-commerce stores more effectively.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, while Shopify is great for e-commerce and order management, it is not designed for operations management. How orders are fulfilled is not managed <em>in<\/em> but <em>outside of <\/em>Shopify. For businesses selling products or services, an incoming order is just the starting point that sets in motion an order fulfillment process. Streamlining this process is something that Shopify does not support. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To effectively serve customers from their Shopify e-commerce stores, businesses need to know how to access, analyze, and interpret the data that Shopify generates and stores. This data can be accessed through<strong> Shopify&#8217;s well-documented API.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog post, we describe how to use Five, a low-code development environment, to build a custom app on top of the Shopify API. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Building a Custom App On Shopify: Prerequisites<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This tutorial will guide you through the process of integrating a Shopify store with Five, an application builder, using the <strong>Shopify API<\/strong>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By the end of this tutorial, you have learned how to develop an external web application that interacts with your Shopify store using Five. This web app can be used by your internal team, business partners, or suppliers, for example.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s what you&#8217;ll need to get started:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Access to a Shopify store<\/strong> with admin privileges.<\/li>\n\n\n\n<li><strong>Access to Five<\/strong>. To get started with a free trial, <a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\">sign up here<\/a>.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">We start by connecting Five to the Shopify API. The connection establishes the Shopify API as a data source inside the Five development environment. Five can then be used to build a graphical user interface (GUI) on the data. This GUI can, for example, contain forms, charts, dashboards, and PDF reports that interact with your Shopify data.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"576\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Five.Co-Create-a-Custom-App-On-The-Shopify-API-with-Five-1024x576.png\" alt=\"\" class=\"wp-image-2175\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Five.Co-Create-a-Custom-App-On-The-Shopify-API-with-Five-1024x576.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Five.Co-Create-a-Custom-App-On-The-Shopify-API-with-Five-300x169.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Five.Co-Create-a-Custom-App-On-The-Shopify-API-with-Five-768x432.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Five.Co-Create-a-Custom-App-On-The-Shopify-API-with-Five.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><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&#8217;t Feel Like Reading?<\/strong><\/span><\/mark>&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Watch the YouTube video instead<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How To Create A Custom App Using The Shopify API | Low-Code For Real Developers | Five.Co\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/2FCGG7KJpJQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Configuring The Shopify API<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Start by logging in to Shopify. To configure the Shopify API, we need to create a custom application for our store. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Log into your Shopify admin dashboard, proceed to <strong>Settings <\/strong>in the bottom left corner of your admin panel, and then click on <strong>Apps and Sales Channels<\/strong>. This section displays all applications currently installed in your store. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. To create a custom application, click the <strong>Develop apps<\/strong> button, which you will find in the top right corner of the page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"471\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-64-1024x471.png\" alt=\"\" class=\"wp-image-2162\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-64-1024x471.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-64-300x138.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-64-768x353.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-64-1536x706.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-64-2048x942.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Inside Shopify, click on Settings &gt; Apps and Sales Channel &gt; Develop Apps<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">If you have not developed any apps on Shopify before, you&#8217;ll be presented with a message that says:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>&#8220;Start developing apps on your store. Develop your own apps to integrate your store\u2019s data with external services or build custom storefronts.<\/em> <em>App development should only be done by trusted developers on your team. Apps can give API access to your data, and that data can be accessed outside of Shopify.&#8221;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Confirm that you would like to proceed by clicking <strong>Allow custom app development<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"732\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-7-1024x732.png\" alt=\"\" class=\"wp-image-3711\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-7-1024x732.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-7-300x214.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-7-768x549.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-7.png 1059w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>To develop custom apps on the Shopify API, you must first allow custom app development<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A Note on Securing Your Data and Access Tokens<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Creating apps on Shopify means that you are generating <strong>access tokens<\/strong> that provide API access to your Shopify data. Keep those tokens safe and do not share them with anyone outside your organization (unless you are working with an external developer). <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Whoever has the token can access your data. That&#8217;s why you should only give staff and collaborators that you trust permission to develop apps for your store.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">3. Next, click on <strong>Create an app. <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"494\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-8-1024x494.png\" alt=\"\" class=\"wp-image-3712\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-8-1024x494.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-8-300x145.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-8-768x370.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-8.png 1089w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">4. Give the application a name. For this guide, we have named our app <strong>OFS<\/strong> for Order Fulfillment Software. Our store is the <strong>fiveteststore<\/strong>. We will refer to both by these names from now on. Click on <strong>Create App.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s what you&#8217;ll see next:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"395\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-9-1024x395.png\" alt=\"\" class=\"wp-image-3713\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-9-1024x395.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-9-300x116.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-9-768x296.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-9.png 1087w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">4. Next, click the <strong>Configure Admin API scopes<\/strong> button. <br>Set the API access scopes, i.e. select the data you wish to send to an external system, such as Products, Orders, Inventory, etc. Confirm by clicking on <strong>Save.<\/strong><br>You can assign read and write permissions for almost any entity stored inside Shopify. Assign these permissions carefully, following a minimum access policy. It is generally best practice to restrict access to only the least amount of data that is needed for the application to perform its functionality. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. Once you have completed the configuration setup, proceed to the <strong>API Credentials<\/strong> tab. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"556\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-10-1024x556.png\" alt=\"\" class=\"wp-image-3714\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-10-1024x556.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-10-300x163.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-10-768x417.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-10.png 1079w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Your API credentials can be found here.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Here, Shopify will prompt you to install your application. Upon clicking <strong>Install app<\/strong>, Shopify will generate an Admin API access token that is limited to the API scopes you have selected in the previous step. This token is only viewable once, so be sure to save it in a secure location for future reference.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"837\" height=\"298\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-removebg-preview-1.png\" alt=\"\" class=\"wp-image-2165\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-removebg-preview-1.png 837w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-removebg-preview-1-300x107.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-removebg-preview-1-768x273.png 768w\" sizes=\"(max-width: 837px) 100vw, 837px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Integrating Shopify With Five<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let\u2019s launch Five and&nbsp;<a href=\"https:\/\/help.five.org\/2.6\/docs\/applications\/adding-managing-applications\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">click the yellow + button to create a new application<\/a>. Assign it a name, such as OFS, 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>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"576\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-1-1024x576.png\" alt=\"\" class=\"wp-image-2166\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-1-1024x576.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-1-300x169.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-1-768x432.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-1.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">We are now going to use the Shopify API that we have just created inside of Five.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Begin by clicking on <strong>Data <\/strong>-> <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:\/\/preview-php85.dzine.org\/five\/blog\/using-webservices-to-connect-to-rest-apis\/\" data-type=\"link\" data-id=\"https:\/\/preview-php85.dzine.org\/five\/blog\/using-webservices-to-connect-to-rest-apis\/\" target=\"_blank\" rel=\"noreferrer noopener\">To know more about it, click here<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"190\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-2-1024x190.png\" alt=\"\" class=\"wp-image-2167\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-2-1024x190.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-2-300x56.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-2-768x143.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-2-1536x285.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/image-2.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">2. Inside the Connection Wizard, click on the <strong>Read List Mapping<\/strong> tab (leave the <strong>General<\/strong> section blank for now). <br>Here we are going to pass in the URLs for our API. Here is the structure of the Shopify endpoint:<\/p>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-center\">https:\/\/{your_store_name}.myshopify.com\/admin\/api\/{api_version}\/{resource}.json<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Replace {your_store_name} with the name of your store, which can be found inside <strong>Shopify <\/strong>> <strong>Settings > Domains. <\/strong><br>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\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a> or <a href=\"https:\/\/shopify.dev\/docs\/api\/admin-rest\" rel=\"nofollow noopener\" target=\"_blank\">here<\/a>. The {api_version} follows the format YYYY-MM. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note<\/strong>: For this guide, we are 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>\n\n\n\n<p class=\"wp-block-paragraph\">3. Add your URL to Five&#8217;s Connection Wizard. It should look something similar to this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"548\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-65-1024x548.png\" alt=\"\" class=\"wp-image-2168\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-65-1024x548.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-65-300x160.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-65-768x411.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-65-1536x821.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-65-2048x1095.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Before we can retrieve data from the API endpoint, we need to add our Admin API access token.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">4. Start by clicking on the Headers Tab just below the URL field. <br>Use <code><strong>x-shopify-access-token<\/strong><\/code> as its <strong>Name<\/strong> (the field contains <strong>content-type<\/strong> as a default). <br>In the <strong>Value <\/strong>field, paste your Admin API access token, replacing <strong>application\/json<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"306\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-11-1024x306.png\" alt=\"\" class=\"wp-image-3715\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-11-1024x306.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-11-300x90.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-11-768x230.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-11-1536x459.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-11-2048x612.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">5. Click <strong>Send<\/strong>. <br>A list with details of all your products will appear. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">6. Next, navigate to the <strong>Field Mapping<\/strong> tab, just to the right of <strong>Headers,<\/strong> to observe how Five interprets your data. <br>Five translates the JSON it receives from Shopify into something resembling a traditional database table, mapping JSON objects onto fields. This is very useful once we want to create forms, for example.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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&#8217;t, make sure to tick the checkbox labeled primary key next to the ID field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">7. Now that we have set up one of our endpoints, repeat this process for the others, i.e. <strong>Read Single<\/strong>, <strong>Update<\/strong>, and <strong>Delete<\/strong>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure to use the following endpoint format for <strong>Read Single<\/strong>, as we are now requesting a single record. <\/p>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-center\">https:\/\/{your_store_name}.myshopify.com\/admin\/api\/{api_version}\/products\/:id.json<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This URL format is required because these actions necessitate a specific product ID. By using the <code>:id<\/code> variable, <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/using-webservices-to-connect-to-rest-apis\/\">Five can dynamically handle this requirement<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, make sure to fill in your access token in the <strong>Header<\/strong> section again and to copy the field mapping inside the <strong>Field Mapping <\/strong>section. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"410\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-12-1024x410.png\" alt=\"\" class=\"wp-image-3716\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-12-1024x410.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-12-300x120.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-12-768x307.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-12-1536x615.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-12-2048x820.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>To retrieve a single product, an ID must be provided.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">8. Repeat these steps for <strong>Create Single, Update Single, <\/strong>and <strong>Delete Single<\/strong> so that all endpoints are configured.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">9. After all these steps our connection to the Shopify API is almost ready! But before saving, remember to give it a name and ID from the <strong>General <\/strong>tab of your <strong>Connection Wizard<\/strong> as shown here:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img width=\"1024\" height=\"558\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-13-1024x558.png\" alt=\"\" class=\"wp-image-3717\" style=\"width:840px;height:auto\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-13-1024x558.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-13-300x164.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-13-768x419.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-13-1536x838.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-13-2048x1117.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Before saving, give your data connection a descriptive name. <\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Checkpoint: Making Sure Your API Is Setup Correctly<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To check whether your API is set up correctly inside Five, click on <strong>Data > Connections.<\/strong> Your newly created connection to the API should be visible here. Click on it to view its details:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"618\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-14-1024x618.png\" alt=\"\" class=\"wp-image-3718\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-14-1024x618.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-14-300x181.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-14-768x463.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-14-1536x927.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-14-2048x1236.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>To confirm if your API is set up correctly in Five, click on <strong>Data > Connections<\/strong><\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">This is what you should see in Five. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In addition to confirming the setup of the endpoints, it&#8217;s also good to confirm the <strong>Parameters. <\/strong>To do so, click on <strong>Parameters<\/strong> and confirm your API token is shown.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Using The Shopify API As a Data Source<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Our custom app is now successfully connected to our Shopify store. The Shopify API can now be leveraged across Five as a data source in various features, including forms, charts, data views, and reports. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For this guide, we will develop a Form through which we can create, read, update, and delete the products from our store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Inside Five, click on <strong>Visual, <\/strong>and then<strong> Form Wizard<\/strong>. <br>In the primary data source lookup, select your API connection as the data source. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Five will take care of populating most of the details for you. By default, all fields from your API will be included in the form, At this stage, you are welcome to modify any settings as you see fit. For example, to remove fields, click on the small error pointing to the right <strong>><\/strong> and remove fields that are not required.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"548\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-66-1024x548.png\" alt=\"\" class=\"wp-image-2169\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-66-1024x548.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-66-300x160.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-66-768x411.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-66-1536x821.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-66-2048x1095.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">2. Now you can click on <strong>Save <\/strong>to store the form.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. Finally, we can run our application by clicking the <strong>Run <\/strong>button in Five&#8217;s top navigation bar.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img width=\"1024\" height=\"190\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-16-2-1024x190.png\" alt=\"\" class=\"wp-image-2007\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-16-2-1024x190.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-16-2-300x56.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-16-2-768x142.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-16-2-1536x285.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-16-2-2048x380.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Clicking the <strong>Run <\/strong>button will open up a new window inside your browser. You can now preview what you have developed in Five.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion: Previewing Our Custom App Built On The Shopify API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In your end-user application, you now have a form that contains all of the products from the store. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"548\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-40-2-1024x548.png\" alt=\"\" class=\"wp-image-2170\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-40-2-1024x548.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-40-2-300x160.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-40-2-768x411.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-40-2-1536x821.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Frame-40-2-2048x1095.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Next Steps<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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>\n\n\n\n<p class=\"wp-block-paragraph\">This integration can help you leverage the power of Five to access, analyze, 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>\n\n\n\n<p class=\"wp-block-paragraph\">This tutorial only scratches the surface of what&#8217;s possible with Five. To learn more about Five&#8217;s features, visit our website or <a href=\"https:\/\/www.youtube.com\/channel\/UCHtkoqKFZxsWBHGS32YQQRA\" rel=\"nofollow noopener\" target=\"_blank\">YouTube channel<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. I am receiving a 401 &#8211; Unauthorized error<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This error means that your authentication is not correct. Check that your header is set up correctly. Use <code>x-shopify-access-token<\/code> and your Shopify access token.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. The API you are trying to get data from responded with: 404 Not Found<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Double-check your endpoint URL. A 404 error message indicates that the endpoint you have provided does not exist. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. What is the Shopify API&#8217;s rate limit?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Shopify REST Admin API supports a limit of\u00a0<strong>40 requests per app per store per minute<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn How to Quickly Build A Custom App On Shopify Data Many businesses that sell products or services online use Shopify, a software that helps them create and manage their online stores. Shopify&#8217;s e-commerce solution is popular because it is easy to use and reliable. But even Shopify has limits: that&#8217;s why many businesses create [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":2174,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[21],"tags":[],"class_list":["post-2160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Five.Co-Create-a-Custom-App-On-The-Shopify-API-In-3-Steps.png",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Five.Co-Create-a-Custom-App-On-The-Shopify-API-In-3-Steps-150x150.png",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Five.Co-Create-a-Custom-App-On-The-Shopify-API-In-3-Steps-300x169.png",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Five.Co-Create-a-Custom-App-On-The-Shopify-API-In-3-Steps-768x432.png",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Five.Co-Create-a-Custom-App-On-The-Shopify-API-In-3-Steps-1024x576.png",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Five.Co-Create-a-Custom-App-On-The-Shopify-API-In-3-Steps.png",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/12\/Five.Co-Create-a-Custom-App-On-The-Shopify-API-In-3-Steps.png",1280,720,false]},"uagb_author_info":{"display_name":"Pranoy Sarkar","author_link":"https:\/\/preview-php85.dzine.org\/five\/author\/f1v5_ed8_au\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn How to Quickly Build A Custom App On Shopify Data Many businesses that sell products or services online use Shopify, a software that helps them create and manage their online stores. Shopify&#8217;s e-commerce solution is popular because it is easy to use and reliable. But even Shopify has limits: that&#8217;s why many businesses create&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/comments?post=2160"}],"version-history":[{"count":0,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2160\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/2174"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=2160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=2160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=2160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}