Shopify
Overview
The Shopify app allows editors to select products from their Shopify account and reference them inside of Contentful entries.
With the Custom external references feature 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:
Log in to the Contentful web app.
In the top pane, click Apps and select Marketplace.
Go to Shopify app and click on it. The "App details" window is displayed.
Click Install. The “Manage app access” window is displayed.
Click the Environments field and select the checkboxes against the environments in which you would like the app to be installed.
Click Authorize access. The configuration window is displayed.
Under the Configuration area, enter the values in the following fields:
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.After selecting a field, select an SKU type according to the following options:
Product.
Product variant.
Collection picker.
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:
Log in to the Contentful web app.
Navigate to the "Content" tab.
Either create a new entry of the content type for which you installed the Shopify app or open an existing one.
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).
Select the SKUs you would like to be displayed in your Contentful entry.
Click Save ... product(s).
Your selection is displayed in the entry editor as in the image below:
Step 4: Enable Custom external references
To deliver Shopify's data using the Contentful GraphQL API you must first enable Custom external references 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:
Log in to the Contentful web app.
Navigate to the "Content model" tab and select the content type with the Shopify app field setup.
On the field used with the Shopify app, click Edit. The field editor is displayed.
In the "Appearance" section, under "Choose how this field should be displayed", select Shopify.
Select the Resolve content on delivery check box.
Click Confirm.
Save your changes.
The Shopify content will be available through the Contentful GraphQL API via the name of the field configured with the Shopify app appended with _data:
Third party orchestration Shopify query
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 allows you select a single SKU. For fields of type "Short text, list" the widget allows you to select multiple SKUs.
How can I get localised content from Shopify using Custom external references?
To receive localised content from Shopify, while making use of Custom external references, you have to provide the locale by using Shopify's @inContext directive on your Contentful query.
Here is an example of a GraphQL query that fetches the Shopify data in the German locale:
Shopify GraphQL - External reference localisation
query @Shopify_inContext(language: DE) {
shopifyContentTypeCollection {
items {
shopifyField
shopifyField_data {
title description
}
}
}
}
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 have to query the ProductVariant entity from Shopify's GraphQL Storefront API.
Here is an example of a GraphQL query that fetches some data relevant to the product variant IDs you saved on Contentful:
Shopify GraphQL - Product variants
{
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 have to query the Product entity from Shopify's GraphQL Storefront API.
Here is an example of a GraphQL query that fetches some data relevant to the product IDs you saved on Contentful:
Shopify GraphQL - Products
{
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 have to query the Collection entity from Shopify's GraphQL Storefront API.
Here is an example of a GraphQL query that fetches some data relevant to the collection IDs you saved on Contentful:
Shopify GraphQL - Collections
{
nodes (ids: [${collectionIDs}]) {
...on Collection {
id
title
}
}
}
Replace the collectionIDs parameter for the IDs you retrieve from Contentful.