Shopify API Community: Connect with Developers

Introduction to Shopify APIs

Hi, I'm Liz, a member of the developer relations team at Shopify. In this series, we are covering the basics of Shopify app development and the tools available to help you build them. In our last video, we covered Approach, a tool used when building embedded Shopify apps. In this video, we will be covering the bread and butter of Shopify development - the Shopify APIs.

Shopify offers different APIs for different purposes. The Storefront GraphQL API allows you to build out customers' buying experience. This could include building out a completely custom website for an online store, creating a native mobile app, or adding a buying experience into a video game. The Shopify Partner API allows you to access data found in your partner dashboard. You can use this API to automate common tasks or speed up workflows. The API we will be using today is the Admin API, which is the most commonly used in app development. There are both REST and GraphQL versions of this API, and it allows you to read and write shop data, including products, collections, orders, shipping, inventory, and much more.

When making calls to the Shopify Admin API, it is required to have a header on your request named X-Shopify-Access-Token. This will be the access token that was generated for that shop. The access token will be generated when the shop authorizes your app to access its data in the OAuth of the install flow. Shopify has created API libraries that can make the process of sending API calls easier. Both the REST and GraphQL Admin APIs have usage limits, but they are calculated differently. The REST API allows for 40 requests per app per store per minute and replenishes at a rate of two requests per second. The GraphQL API allows for a thousand cost points per app per store per minute and replenishes that 50 cost points per second. Most fields cost one point, and mutations cost 10 points. Though under the extensions key in a response from the GraphQL API, you should see the actual query cost.

Shopify was one of the first adopters of GraphQL, and we really like it. Going forward, you'll find most of the new additions and features to the Admin API will be added to the GraphQL version. So that's the API we'll be using in this video.

Let's open up the code for our app. In the last video, we added a resource picker so merchants could select their products. In this video, we'll be using the GraphQL Admin API to first retrieve the products and then update them with a new randomized price. We'll create a new component called Resource List. We'll add a GraphQL query that will retrieve the products that were selected in the product selector. This query will get the products by the node ID. Next, we'll create a component that will use that GraphQL call and create a list of products in the UI with the return data.

In our index file, we'll add a constant that will decide whether or not to show our empty state. We'll also add our Resource List component that will show our selected products. We're going to update our handle selection function to store the products that were selected by the product selector. Now, if we open the product selector and select some products, they will display in the UI of our app.

Now we can write the code to update our product prices. We'll create a new component called Apply Random Prices. We'll add a GraphQL mutation that can update our product. We'll also add a button. When the button is pressed, it will make GraphQL calls with all the selected products and update the price to a random price. Let's head back to the Resource List component. We're going to add a constructor to keep track of our selected items. We're going to update our list of products to make it selectable and then add in our random price component. Now, when we go into our app, we can select products with the product selector, select them, and update the prices to a random price. If you look at the product in the Shopify Admin, you'll see the prices updated there as well.

In conclusion, the Shopify APIs are a crucial part of app development on the Shopify platform. The Admin API is the most commonly used API, and it allows you to read and write shop data. The GraphQL version of the Admin API is the most up-to-date version and will receive the newest additions and features. By using GraphQL and the Shopify API libraries, you can make API calls more efficiently and effectively. With these tools, you can add new features and extend the functionality of the Shopify platform.

Fulfillment APIs: Building a Stronger Foundation (Shopify Unite Track Session 2019)

Fulfillment API” and the “Fulfillment Services API” to better support types of locations and complex fulfillment workflows. Additionally, we want you to add a fulfillment order notification endpoint to your callback URL to receive fulfillment requests or cancellation requests from Shopify.

Moreover, with the new API, merchants will be able to stock products at all types of locations, providing a great opportunity for developers to help merchants manage and track their inventory. The new API also allows for order management apps to move a fulfillment order to a different location after it’s been created, offering flexibility for different situations and types of merchants.

Overall, the new fulfillment API is fundamental to fulfillment at Shopify and will unlock a world of possibility for merchants and developers. By using the new API and embracing the changes that come with it, developers can create even more powerful and efficient solutions for merchants on the Shopify platform.

Getting Started with Shopify Webhooks

In this series, we are discussing Shopify app development and the tools available for building them. In the previous video, we covered Shopify APIs and how to update product prices. In this video, we will be discussing webhooks and the best practices for using them.

Webhooks:

Webhooks are used when your app needs to stay in sync with Shopify's data or when you want your app to take action in response to a Shopify event. Instead of using the API to check for changes, you can register a webhook subscription, specify the event or topic to be notified about, and the destination where the message should be sent.

Common use cases for webhooks include sending notifications to customers, collecting data for data warehousing, integrating with other software or services, and cleaning up or deleting data after a shop has uninstalled your app.

Best Practices:

After receiving a webhook, respond to Shopify as soon as possible with a 200 message. Shopify will wait for five seconds for a response, and if none is received or an error response is received, Shopify will retry the webhook up to 19 times in the next 48 hours.

A common practice used to ensure a quick response is to add the webhook to a queue and process it with a deferred job instead of processing it inline with the request.

Code:

In our sample app, we can see the webhook subscription being registered in the server.js file. We specify the topic, route, and function used to handle the webhook.

To verify that the webhook received is from Shopify, use the data in the message, your shared secret, and compute an HMAC with the same algorithm, and compare for equality.

Webhooks are a powerful tool for Shopify app development, and understanding how to use them can greatly improve the functionality and efficiency of your app. By following best practices and utilizing the Shopify API libraries, you can easily manage and process webhooks to provide a seamless experience for your users.

API Deprecations at Shopify - 2021-04 Edition

In this article, we will be discussing the breaking changes that have been released on the Shopify platform. We will be focusing on the changes that were released in the years 2019 and 2020.

2019:

1. In version 201907, a new field, graphql min id, was added to webhooks. This could cause a breaking change for those using the Shopify app gem lower than 10.0.0 and a rails version lower than 5.2.1.1.

2. In version 201907, a field was removed from the collects endpoint. The featured field was removed and will no longer be available.

3. In version 201907, page-based pagination was removed and a cursor-based system was implemented instead. This change will affect many endpoints.

4. In version 201910, inventory levels were separated into their own separate inventory level. Adjusting inventory quantity directly on a variant is no longer possible.

5. In version 201

Custom Storefronts at Shopify | Shopify Unite 2021

Hi everyone, my name is Zach and I'm a director of product here at Shopify, leading our custom storefront effort. What I think most people know is headless, truth be told this is my first ever unite, so I'm really happy to be here and to get the chance to chat with many of you. I'm looking forward to your feedback and some of your harder questions.

Shift in Priorities:

I think the simple truth is that over the past couple of years, our APIs and headless offerings haven't gotten as much attention as we would like. Last year we had big plans, but then like all companies, our roadmaps were affected by COVID and we had to make some necessary adjustments. But I think today represents a big shift in our priorities and we're really going all in on making sure that Shopify is the best platform for building custom commerce experiences on top of.

The First Big Step:

I think there are really two big parts to this shift. The first part is what Ilya talked about earlier today with the big investments that we're making in our APIs both on the performance and capability side, and while we're by no means done, I see this as the first big step. You should expect us to continue iterating and improving here on a regular cadence moving forward.

Hydrogen and Oxygen:

The second part of that shift is what Toby announced with Hydrogen and Oxygen. This is really us bringing JavaScript and React into the Shopify ecosystem as first-class citizens right alongside Liquid. And of course, these Hydrogen experiences will be built directly on top of the same APIs we've been talking about.

Questions:

I think you're going to really like where we're headed. Now I'm sure there are going to be a bunch of questions of both Hydrogen and Oxygen, and we'll try our best to answer wherever we can. But remember, these are brand new technologies, and they're still very much a work in progress. We'll share what we can't today, but I would also encourage you to sign up for updates at Shopify Dev Hydrogen.

Morgan:

With that, I want to introduce you to Morgan, who I think many of you might already know, to talk a bit more about the APIs and what's available starting today. Thanks, Zach. Hey everyone, my name is Morgan, and I'm a product manager working on custom storefronts. Some of you may remember me from Unite 2019 and our panel on the power of unique shopping experiences with the storefront API. Great to connect with you folks again, and for everyone else, looking forward to chatting over Discord shortly.

Immediate Pain Points:

So our main priority for Unite was really doubling down on the storefront API. We wanted to address some of the immediate pain points for our existing users. Ilya has already walked through some great examples of this functionality, so I won't do that again, but I do want to be clear about what's available right now and what still needs some tweaking based on your feedback.

New Space:

So version 202107, which is available as of July 1st, will feature international pricing, local pickup, selling plans, and metafields in the unstable version of the API. You'll see the cart and filtering for collections, and we also have a preview of the new schema, which Ilya mentioned. Both the stable and unstable features are actually covered in tutorials available on Shopify Dev, so be sure to check those out. But what I'm the most excited about actually is the new space that we've created, which is this public repo for engaging with you, our community. This is a chance for us to get feedback on some of these items as we're building them or even before we've started building, so that we can ensure we're really addressing your needs.

GitHub Discussion Feature:

Okay, so it's a pretty standard GitHub repo, but the biggest difference here is that we're using GitHub's new discussion feature. So we have four categories here, and the first one is help. Pretty standard, this is where you can come for help and ask your questions if you're getting stuck, and maybe even answer some questions for those in the community as well. We do have the frequently asked questions pinned at the top, and we'll try to keep that updated as we go.

Ideas and Requests:

Next up, ideas and requests. This category is empty right now, but it's ready for all of the feedback that you have for us on general functionality, perhaps on developer ergonomics. Let us know what you'd like to see in terms of improvements to the storefront API.

RFC Section:

For more specific feedback, we've created this RFC section, and this is where we, the product team, need your help in order to finalize something that we're working on. So you'll see here we have a few different requests for common issues already. Please jump in and give us your feedback on the cart as you play around with it in unstable. You'll also see, for example, that we have this new overview of the schema evolution. So take a look, read through some of the changes that are happening. You'll see a detailed list here, and again, let us know your feedback before we lock things in.

Show Intel Section:

And then lastly, we have the show Intel section. We love seeing the creative uses of the storefront API, so please share them loud and proud and let us know what you've been able to build with this API. This platform is really going to be a great way for us to be more collaborative with you, our developers, but also be transparent about some of the things that we're working on as well. So I'm looking forward to having a central place for connecting with you moving forward, but let's kick off the convo right now in Discord and open it up to you for some questions for the product team who are here with us today.

Building Your First Shopify App with Node.js and Express // Andrew McCauley | Shopify Partners

Hey everyone, thanks for joining us on this free webinar! Today, we'll be talking about how to build your own Shopify app using Node.js and Express. My name is Andrew McCauley, and I lead the developer API support team here at Shopify.

- Today, we'll be building a basic app using Node.js and Express

- We'll focus on building a public app that can be installed on multiple shops using OAuth authentication

- Some things you'll need: Mac OS, a tunneling service like ngrok or Forward HQ, Node.js (version 8.1.1), NPM (version 5.16.0)

Steps:

1. Sign up for a partner account on Shopify

- Choose Custom App Development as the reason for creating an account

2. Create a development store

- This will be the shop that we test our app on

3. Create an app on Shopify

- Add your app name, app URL, and whitelisted redirection URLs

- Take note of your API key and API secret

4. Install required packages for our app using NPM

- Express, dotenv, cookie, uuid, request, request-promise

5. Create an environment file to save our environment variables

- Save our API key and API secret as environment variables

6. Create our app's foundation with index.js

- Set up constants for our packages and environment variables

- Add a simple hello world get route

7. Create our install route in index.js

- Set up a constant for the shop passed in as a query parameter

- Set up a nonce package to create a state constant for security

- Build our install URL with client ID, scopes, state, and redirect URI

- Redirect to the install URL

8. Create our callback route in index.js

- Set up a constant for the query parameters sent by Shopify (shop, H Mac, code)

- Verify the state cookie matches the echoed state

- Return a 403 message if the state cookie doesn't match

9. Test our app and