Shopify Products
UI ExtensionDeveloped by contentful

Contentful UI Extension to load products from Shopify's Storefront API

Adds a custom UI field to Contentful that allows users to search and select Shopify products.

figure

To make the UI extension work you'll need a valid Storefront API token with unauthenticated_read_product_listings scope and the API endpoint of your Shopify store. By default the UI-extension uses instance parameters which are pre-configured for demo purposes:

See extension.json for the details:

{
  "name": "Shopify Products",
  "id": "contentful-ui-shopify",
  "fieldTypes": ["Object"],
  "srcdoc": "./index.html",
  "parameters": {
    "instance": [
      {
        "id": "apiToken",
        "name": "Shopify Access Token",
        "type": "Symbol",
        "default": "b5392a6d4ba10c47cb4ad1645bf78eb4"
      },
      {
        "id": "apiEndpoint",
        "name": "Shopify GraphQL endpoint",
        "type": "Symbol",
        "default": "https://contentful-demo.myshopify.com/api/graphql"
      }
    ]
  }
}

figure

Assign to a field of a content type

figure

Usage

Make sure you have the Contentful CLI installed:

npm install contentful-cli -g

You are logged in:

contentful login

And have a space selected:

contentful space use

To install the UI Extension:

contentful extension create

To update the UI Extension:

contentful extension update --force
Links
Author
Categories
Ecommerce, Productivity
Permissions

This UI Extension will have the same permissions as the user who uses it.

This UI Extension can be installed only by the space admins. It will be installed in the most recently used space.