- Help center home
- Getting started
- Content model
- Managing content
- Working with entries
- Working with media
- Working with translations
- Managing users
- Roles
- Account settings
- Administration
- Content orchestration
- Compose
- Launch
- Workflows
- How to get help and support
- Guides
- Contentful certification
- Contentful glossary
- Manage cookie consent
- Apps
- Usage Limit
- Marketplace
Shopify
On this page
- Overview
- Requirements
- Usage
- Step 1: Create an app on Shopify and generate an access token
- Step 2: Install Shopify app in the Contentful web app
- Step 3: Reference Shopify product in an entry
- Step 4: Enable Third party orchestration
- FAQ
- What is the difference between installing the app for a field of type Short text vs Short text, list
- How can I query the Shopify Storefront API for the product variants whose IDs I saved in my Contentful entries?
- How can I query the Shopify Storefront API for the products whose IDs I saved in my Contentful entries?
- How can I query the Shopify Storefront API for the collections whose IDs I saved in my Contentful entries?
![Apps Shopify Cover](png/apps-shopify-cover-2.png)
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:
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.
![Apps Shopify Installation](png/image-28.png)
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:
![Apps Shopify Selected Products](png/apps-shopify-selected-products.png)
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:
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 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.