External references with Shopify


You can integrate External references with Shopify. With External references you can retrieve Shopify products, product variants and product collections through the Contentful GraphQL API. This way, you can get all the information you need in a single API call to create a great customer experience.

Enable External references for Shopify 

To enable External references for Shopify:

  1. Set up access in the Shopify Admin Tool. For more information about setting up access, see the Shopify documentation.  

  2. Log in to the Contentful web app.

  3. Configure the credentials needed inside the Contentful Shopify App configuration screen. For more information on how to set up the credentials, see step 2 of the Shopify page. 

  4. Navigate to the “Content model” tab and select the content type you want to retrieve data from with External references.

  5. Click +Add field and add a new field of type “Text”.

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

  7. Select the Resolve content on delivery check box.

  8. Click Confirm.

  9. Save your changes.

Query Shopify data in Contentful using the GraphQL API

To query Shopify data in Contentful using the GraphQL API:

  1. Open your preferred GraphQL client or use an online IDE. You can also use our GraphQL Playground app.

  2. Insert the following GraphQL query as an example, replacing "ENTRY_ID" with the ID of the product you want to query:

      topicProduct(id: "ENTRY_ID") {
        sys {
        thirdPartyReferenceFieldName_data {

  3. Run the query.

For more information on adjusting your GraphQL API queries and possible errors, see the technical External references and GraphQL API documentation.

NOTE: You can also query the Shopify Storefront API yourself. For more information, see the Storefront API Shopify documentation.

Additional resources

For a more in-depth explanation on how to set up Shopify with External references, see the following video:

Was this helpful?
add-circle arrow-right remove style-two-pin-marker subtract-circle remove