Shopify

Overview

The Shopify app allows editors to select products from their Shopify account and reference them inside of Contentful entries.

With Third party orchestration enabled products, product variants and product collections can be fetched through the Contentful GraphQL API.

Requirements

To use Shopify, you will need:

• An account with Shopify.

• A content type with a field of type "Short text" or "Short text, list".

Usage

Step 1: Create an app on Shopify and generate an access token

In this step, you must create an app on Shopify and install it. After the installation, a Storefront access token is generated.

NOTE: The Storefront access token and API endpoint are required to complete the next step Install Shopify app in the Contentful web app.

To learn how to create and install an app on Shopify, refer to the relevant Shopify documentation.

Important: After the app is created and you proceed to selecting API scope, click Configure Storefront API Scopes. Then, select the unauthenticated_read_product_listings checkbox and click Save.

Step 2: Install Shopify app in the Contentful web app

To install the Shopify app in the Contentful web app:

1. Log in to the Contentful web app.

2. In the top pane, click Apps and select Marketplace.

3. Go to Shopify app and click on it. The "App details" window is displayed.

4. Click Install. The “Manage app access” window is displayed.

5. Click the Environments field and select the checkboxes against the environments in which you would like the app to be installed.

6. Click Authorize access. The configuration window is displayed.

7. Under the Configuration area, enter the values in the following fields:

   • Storefront Access Token — Enter the Storefront access token you acquired after completing the installation of an app in Shopify as described in Step 1.

   • API Endpoint — Enter the API endpoint URL — you can find it in the top left of the Settings window in your Shopify account.

8. Under the Assign to fields area, select a field (one or multiple) for which you would like to install the Shopify app. NOTE: The Shopify app can be assigned only to fields of "Short text" or "Short text, list" types.

9. After selecting a field, select an SKU type according to the following options:

   • Product.

   • Product variant.

   • Collection picker.

10. Click Install to selected environments. The Shopify app is installed to the selected environments and fields.

Step 3: Reference Shopify product in an entry

To reference Shopify products, product variants, or collections from your Contentful entries:

1. Log in to the Contentful web app.

2. Navigate to the "Content" tab.

3. Either create a new entry of the content type for which you installed the Shopify app or open an existing one.

4. Find the field and click Select product (alternatively, Select product variant, Select collection — depending on the type of SKU the field is configured to work with).

5. Select the SKUs you would like to be displayed in your Contentful entry.

6. Click Save ... product(s).

Your selection is displayed in the entry editor as in the image below:

Step 4: Enable Third party orchestration

To deliver Shopify's data using the Contentful GraphQL API you must first enable Third party orchestration by selecting the Resolve content on delivery check box in the field editor of your desired content type.

To enable the Resolve content on delivery check box:

1. Log in to the Contentful web app.

2. Navigate to the "Content model" tab and select the content type with the Shopify app field setup.

3. On the field used with the Shopify app, click Edit. The field editor is displayed.

4. In the "Appearance" section, under "Choose how this field should be displayed", select Shopify.

5. Select the Resolve content on delivery check box.

6. Click Confirm.

7. Save your changes.

The Shopify content will be available through the Contentful GraphQL API via the name of the field configure with the Shopify app appended with _data:

shopifyContentTypeCollection {
    items {
      shopifyField
      shopifyField_data {
        title description
      }
    }
  }

FAQ

What is the difference between installing the app for a field of type Short text vs Short text, list

When the app is installed for fields of type "Short text" the SKU picker widget will allow you select a single SKU. For fields of type "Short text, list" the widget will allow you to select multiple SKUs.

How can I query the Shopify Storefront API for the product variants whose IDs I saved in my Contentful entries?

To fetch the data for the product variants you have selected and saved in your Contentful entries, you will need to query the ProductVariant entity from Shopify's GraphQL Storefront API.

Here is an example of a GraphQL query that would fetch some data relevant to the product variant IDs you saved on Contentful:

{
   nodes (ids: [${productVariantIDs}]) {
   id,
   ...on ProductVariant {
      sku,
      image {
         src: originalSrc
      },
      title,
      product {
         id,
         title
      }
   }
   }
}

Replace the productVariantIDs parameter for the IDs you retrieve from Contentful.

How can I query the Shopify Storefront API for the products whose IDs I saved in my Contentful entries?

To fetch the data for the products you have selected and saved in your Contentful entries, you will need to query the Product entity from Shopify's GraphQL Storefront API.

Here is an example of a GraphQL query that would fetch some data relevant to the product IDs you saved on Contentful:

{
   nodes (ids: [${productIDs}]) {
     ...on Product {
       id
       title
     }
   }
}

Replace the productIDs parameter for the IDs you retrieve from Contentful.

How can I query the Shopify Storefront API for the collections whose IDs I saved in my Contentful entries?

To fetch the data for the collections you have selected and saved in your Contentful entries, you will need to query the Collection entity from Shopify's GraphQL Storefront API.

Here is an example of a GraphQL query that would fetch some data relevant to the collection IDs you saved on Contentful:

{
   nodes (ids: [${collectionIDs}]) {
     ...on Collection {
       id
       title
     }
   }
}

Replace the collectionIDs parameter for the IDs you retrieve from Contentful.