Shopify product

A plugin that allows users to search and select Shopify products

This is a Community Plugin! Learn how create your own plugin, or copy and remix existing ones in our documentation

DatoCMS Shopify product plugin

A plugin that allows users to search and select Shopify products.

Configuration

Please specify your Shopify Shop ID and Storefront access token on the plugin global settings. The Shop ID is the prefix of your *.myshopify.com domain — for example, if your shop is foo-bar.myshopify.com, enter foo-bar.

Demo

You can either hook this plugin manually to your Single-line and JSON fields, or have it auto-applied based on a regular expression matched against the field's API identifier (configured on the same settings screen).

If you hook this plugin to a single-line field it will save the product handle.

If you hook it to a JSON field, it will save a JSON containing all the product's info. Like this:

1
{
2
  "id": "1234567890",
3
  "title": "My product",
4
  "handle": "my-product",
5
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra consequat diam. In metus risus, aliquam non massa tempus, gravida commodo orci.",
6
  "onlineStoreUrl": "https://graphql.myshopify.com/products/my-product",
7
  "productType": "T-Shirts",
8
  "priceRange": {
9
    "maxVariantPrice": {
10
      "amount": "40.0",
11
      "currencyCode": "CAD"
12
    },
13
    "minVariantPrice": {
14
      "amount": "40.0",
15
      "currencyCode": "CAD"
16
    }
17
  },
18
  "images": {
19
    "edges": [
20
      {
21
        "node": {
22
          "src": "https://cdn.shopify.com/s/files/1/1312/0893/products/001_39681e15-ce94-48ca-830f-980b11868856.jpg?v=1491851133",
23
          "previewSrc": "https://cdn.shopify.com/s/files/1/1312/0893/products/001_39681e15-ce94-48ca-830f-980b11868856_200x200.jpg?v=1491851133"
24
        }
25
      }
26
    ]
27
  },
28
  "imageUrl": "https://cdn.shopify.com/s/files/1/1312/0893/products/001_39681e15-ce94-48ca-830f-980b11868856.jpg?v=1491851133",
29
  "previewImageUrl": "https://cdn.shopify.com/s/files/1/1312/0893/products/001_39681e15-ce94-48ca-830f-980b11868856_200x200.jpg?v=1491851133"
30
}

Obtain a Shopify API key

To request a Storefront API access token follow these instructions.

Remember to give products read permissions. Demo

Changelog

1.0.10

New selections save full-size imageUrl plus previewImageUrl for the 200x200 preview. Existing JSON field values are not rewritten; reselect products or update stored JSON to refresh old _200x200 imageUrl values.