Skip to main content

Shopify

Shopify is a platform for building e-commerce solutions. TakeShape's custom Shopify service simplifies the process of adding a Shopify Admin API to your project. To connect Shopify's other APIs, you can use our generic REST or GraphQL providers.

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 TakeShape you'll need to set up a basic custom Shopify app for the purpose of provisioning credentials for TakeShape. 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 TakeShape. 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 "TakeShape Custom".

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 TakeShape 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 TakeShape.

Connecting Shopify Admin to a TakeShape project

Follow Along

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

Navigate to your TakeShape 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 to a TakeShape project

Get started now

You can jump right into using the Shopify Storefront API with our Shopify Storefront Starter pattern.

To manually set up Shopify Storefront, follow the instructions below.

Navigate to the Home tab of your project and select Connect Service. Select the generic GraphQL service.

Give the service any Name you'd like. Under Authentication, add X-Shopify-Storefront-Access-Token to the Header field, and add your Shopify Storefront Access Token to the Token field (follow Shopify's instructions to get one). Select Save in the top-right, and follow the instructions on the dialog next to configure API Indexing.

Adding queries and mutations

You can add Shopify Admin and Shopify Storefront queries and mutations to your TakeShape 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 with TakeShape, check out our Shopify Auth0 starter.

Still need help? Get in touch with us.