strapi-plugin-shopify-fields

Strapi's Shopify Fields Plugin

Use your Shopify products in Strapi!

🖌️ Available custom fields

The Shopify Fields plugin currently implements the following custom fields:

• Single Product
• Multiple Products

✨ Supported Strapi Versions

The Shopify Fields plugin is only compatible with Strapi v4.

⚙️ Installation

# if you use NPM
npm install strapi-plugin-shopify-fields

# if you use Yarn
yarn add strapi-plugin-shopify-fields

🔧 Configuration

Creating a private app on Shopify

To use the Shopify Fields plugin, you must create a private app on Shopify and obtain an access token. To do so, you should:

• Open your Shopify store's admin dashboard
• Click on Apps
• Click on Apps and sales channel settings
• Click on Develop apps for your store
• Click on Create an app
• Insert a name for the app in the App name field, eg. Strapi
• Click on Create app
• Click on Configure Admin API scopes
• Check read_products under the Products category
• Click on Save
• Go to the API credentials tab
• Click on Install app
• Copy your access token and store it in your .env file

Configuring the plugin

Open or create the file config/plugins.js and enable the plugin by adding the following snippet:

module.exports = {
  // ...
  'shopify-fields': {
    enabled: true,
    config: {
      apiVersion: '2022-07', // Or one of Shopify's supported API versions
      accessToken: process.env.SHOPIFY_ACCESS_TOKEN, // The environment variable containing your private app's access token
      shopName: process.env.SHOP_NAME, // The environment variable containing your myshopify.com domain
    },
  },
};

Configuring the security middleware

Open the file config/middlewares.js and check the configuration of the strapi::security middleware.

If your file looks like this:

module.exports = [
  'strapi::errors',
  'strapi::security',
  'strapi::cors',
  'strapi::poweredBy',

Replace 'strapi::security' with:

{
  name: 'strapi::security',
  config: {
    contentSecurityPolicy: {
      directives: {
        'img-src': ["'self'", 'data:', 'blob:', 'https://dl.airtable.com', 'https://cdn.shopify.com'],
      },
    },
  },
}

If, instead, your file already presents strapi::security as an object, simply add https://cdn.shopify.com to the img-src array.

🚀 Roadmap

• Automatic sync between your Shopify catalog and Strapi fields
• Improved UI
• Support for collections and metafields