Skip to main content

Shopify

Shopify is a platform for building e-commerce solutions. The built-in Shopify Admin and Storefront services simplify the process of adding a Shopify APIs to your project.

This guide will walk you through connecting the Shopify Admin and Shopify Storefront APIs. Don't have a project yet? Check out this guide for setting one up.

Getting a Shopify Admin API Access Token and API Secret Key (2 minutes)

To connect a Shopify store to a project you'll need to set up a basic custom Shopify app for the purpose of provisioning credentials. The following instructions will guide you through the process of creating a custom shopify app and generating the credentials.

Log into Shopify and navigate to the store you intend to connect to your GraphQL API. Click "Add apps" in the left sidebar. The command panel will open. Click "App and sales channel settings".

To enable custom apps to be created on the store click "Develop Apps for your store".

Confirm you intend to allow custom apps to be used with your store.

Confirm again, you intend to allow custom apps to be used with your store.

Create a custom app called "Custom API".

Now that the custom app has been created, the permitted scopes must be configured.

Select all 71 scopes. By selecting the write scope, the read scope will automatically be selected.

Install the app. The app has been created, but it still needs to be installed.

The custom app for your project has been created and installed and is now ready for use. Copy the "Admin API access token" and "API secret key" to a safe place, so they can be used in the next step which will occur in your project.

Connecting Shopify Admin

Follow Along

Follow along with this guide by checking out our starter project repo. Our starters let you instantly deploy a pre-configured project.

Navigate to your project's dashboard and select the Home tab. Select the Connect Service button.

On the Connect Service page, select Shopify.

You'll be taken to the Shopify Admin service page, where you can name the service. Add your Shopify store name in the .myshopify.com URL field. For example if your store URL is example-store.myshopify.com, then enter example-store. In the "Authentication" section add the Access Token and Secret key copied from the previously created Shopify App's "API Credentials" page.

Select Save in the top-right of the service page to connect your service. You'll be taken back to the API Workbench, where you can start adding queries and mutations to your project.

Connecting Shopify Storefront

Navigate to the API tab of your project and select Connect Service.

Click on Shopify Storefront and you'll be taken to the configuration. Add your Shopify store name in the .myshopify.com URL field. For example if your store URL is example-store.myshopify.com, then enter example-store. In the "Authentication" section add the Access Token copied from the previously created Shopify App's "API Credentials" page.

Adding queries and mutations

You can add Shopify Admin and Shopify Storefront queries and mutations to your project.

In the API tab, expand the Patterns & Services panel on the left and hover your cursor over your Shopify Admin or Shopify Storefront service. Select the three dots that appear and select Add Queries/Mutations.

A dialog will open, which will allow you to search for and select any queries or mutations you wish to add. Select Save when done, and your page will reload with the new queries and schemas.

You can run the query in the API Explorer, or you can select the Workbench tab and select the Play button next to the query you'd like to run. The query will be populated into the API Explorer, and you can run it with the Play button above the API Explorer editor.

Or for a simpler query, you can paste this into your API Explorer:

{
Shopify_products(first:3){
edges{
node{
id
handle
}
}
}
}

For a Storefront query, try:

{
ShopifyStorefront_products(first:3){
edges{
node{
id
handle
}
}
}
}

The Shopify Storefront API is recommended when you want to use Shopify's web checkout experience. Creating a Shopify cart or checkout isn't possible with the Shopify Admin API. Furthermore, to add products to a checkout or cart with the Storefront API, you cannot use product ID's or sellingPlan ID's from the Admin API. Admin API ID's are different from Storefront API ID's for the same products.

  • Shopify Admin API product ID example (for the same product): gid://shopify/Product/75555111090
  • Shopify Storefront API product ID example (for the same product): Z32aVi8vc2hlmeS9Qpf4kdWN0Lzc1MDMwNzk4MDEwBLL

For an example of how you can use both APIs in a NextJS project, check out our Shopify Auth0 starter.

Still need help? Get in touch with us.