plugin-shopify

A single React Editor plugin that registers two custom field types — shopifyProduct and shopifyCollection — each rendered as a Chakra UI Combobox with a live search input, backed by the Shopify Storefront API.

Unlike @reacteditor/field-shopify (which exposes per-field factories you call for every field), the plugin binds your store credentials once and lets any component reference the field types by name.

Quick start

npm i @reacteditor/plugin-shopify @shopify/storefront-api-client

import { createShopifyPlugin } from "@reacteditor/plugin-shopify";

const config = {
  plugins: [
    createShopifyPlugin({
      storeDomain: "my-shop.myshopify.com",
      // publicAccessToken is optional — tokenless storefront queries
      // are supported as of 2026.
    }),
  ],
  components: {
    ProductCard: {
      fields: {
        product: { type: "shopifyProduct" },
      },
      render: ({ product }) => <p>{product?.title ?? "No product selected"}</p>,
    },
    CollectionGrid: {
      fields: {
        collection: { type: "shopifyCollection" },
      },
      render: ({ collection }) => (
        <p>{collection?.title ?? "No collection selected"}</p>
      ),
    },
  },
};

The selected ShopifyProduct / ShopifyCollection object is stored as the field value.

Options

createShopifyPlugin is called once and takes:

| Param | Example | Type | Status | | ----------------------- | ----------------------------- | --------------------- | ----------------------------------- | | storeDomain | "my-shop.myshopify.com" | String | Required (unless using client) | | publicAccessToken | "abc123" | String | Optional (tokenless works in 2026+) | | apiVersion | "2026-01" | String | Optional | | client | createStorefrontApiClient() | StorefrontApiClient | Optional | | first | 20 | Number | Optional (default 20) | | debounceMs | 250 | Number | Optional (default 250) |

Tokenless queries

As of Shopify API version 2026, public storefront queries no longer require a publicAccessToken for unauthenticated shops. Omit the token and the client will issue unauthenticated requests against your storeDomain. If your store still requires a token, supply publicAccessToken.

Reusing a client

import { createStorefrontApiClient } from "@shopify/storefront-api-client";
import { createShopifyPlugin } from "@reacteditor/plugin-shopify";

const client = createStorefrontApiClient({
  storeDomain: "my-shop.myshopify.com",
  apiVersion: "2026-01",
});

createShopifyPlugin({ client });

TypeScript

import {
  createShopifyPlugin,
  type ShopifyProduct,
} from "@reacteditor/plugin-shopify";

type MyProps = {
  ProductCard: {
    product: ShopifyProduct;
  };
};

The { type: "shopifyProduct" } / { type: "shopifyCollection" } field types are registered at runtime via the plugin's overrides.fieldTypes. To get full type-checking on the field config, extend your editor config's user field union to include those type strings.

License

MIT © Frontend AI, Inc.