Overview

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

Requirements

To use this app, you will need:

• An account with Shopify.
• A content type with a field of type Short text or Short text, list.

Usage

Step 1: Install

Steps to install this app:

• Acquire a Shopify Storefront access token to use with the app by following these steps on the Shopify website:

  1. Log in to your store.
  2. From the menu go to Apps > Manage private apps > Create private app.
  3. Fill in your name and email. In the "Admin API" section choose "No access" for all items:
  4. In the "Storefront API" section, click on "Allow this app to access your storefront data using the Storefront API."
  5. From the list of possible permissions, leave only "Read products, variants, and collections" checked.

• Fill in the Storefront access token and your API endpoint (store-name.myshopify.com replacing "store-name" for the actual store name) in the Shopify app installation screen.

• From the list of available fields, select all fields for which you would like to install the Shopify app.

• Click on Install.

This will modify the fields in the selected content types and change their appearance to use the Shopify app.

Step 2: Use the product picker to select products on Shopify

To reference Shopify products from your Contentful entries:

1. Navigate to the Content page.
2. Select or create a new entry of the content type for which you installed the app.
3. Find the field and click on "Select product".
4. Scroll through the available products using the pagination or search through them, select the ones you want and click save.
5. Your selection should now appear like this:

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 product picker widget will allow you select a single product. For fields of type Short text, list the widget will allow you to select multiple products.

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