Strapi

Medusa Plugin - Strapi

Documentation | Website

A plugin for implementing Strapi as CMS for Medusa

Features

• 🔄 Seamless integration between Medusa and Strapi
• 📝 Flexible content management for your e-commerce store
• 🖼️ Rich media management for product images and assets
• 🚀 Extend product information with custom fields and content
• 📱 Headless architecture for omnichannel commerce
• 🔄 Automatic synchronization between Medusa and Strapi

Requirements

This plugin requires:

• Medusa version >= 2.8.0
• Strapi v5 (latest stable)

Installation

1. Install the plugin:

123
npm install @devx-commerce/strapi @strapi/client
# or
yarn add @devx-commerce/strapi @strapi/client

1. Add the plugin to your Copy to clipboardmedusa-config.js:

123456789101112131415
const { defineConfig } = require("@medusajs/medusa"); // or "@medusajs/framework/utils"

module.exports = defineConfig({
  // ... other config
  plugins: [
    // ... other plugins,
    {
      resolve: "@devx-commerce/strapi",
      options: {
        base_url: process.env.STRAPI_URL,
        api_key: process.env.STRAPI_API_KEY,
      },
    },
  ],
});

Setup

Setting up Strapi

1. Install Strapi if you haven't already:

1
npx create-strapi-app@latest my-strapi-cms

1. Start your Strapi server:

12
cd my-strapi-cms
npm run develop

1. Create an API token in Strapi:
   • Go to Settings > API Tokens
   • Create a new full access token
   • Copy the token to use in your Medusa configuration
2. Create Product and Variant collections in Strapi:
   • In your Strapi admin panel, go to Content-Type Builder
   • Create a new collection type called Product
     • Add a title field (Text type)
     • Add a systemId field (Text type, Unique)
   • Create another collection type called Variant
     • Add a title field (Text type)
     • Add a systemId field (Text type, Unique)
   • Save and publish your new collection types
3. Configure environment variables for your Medusa backend:

12
STRAPI_URL=http://localhost:1337
STRAPI_API_KEY=your-api-token-here

Synchronizing data

After installation and setup, the plugin will automatically:

• Create and update products, collections & categories in Strapi when they are modified in Medusa
• Sync product, collection & category metadata between Medusa and Strapi
• Allow extending product data with Strapi's content types

Usage

Once the plugin is set up, you can use Strapi's admin panel to add rich content to your products and use the Strapi API to fetch this content for your storefront.

Example of fetching product content from Medusa (with Strapi fields):

12345678910111213
// In your storefront
async function getProductContent(productId) {
  const response = await fetch(
    `${MEDUSA_BASE_URL}/store/products/${productId}?fields=cms_product.*`,
    {
      headers: {
        "x-publishable-api-key": STOREFRONT_PUBLISHABLE_API_KEY,
      },
    },
  );
  const data = await response.json();
  return data.data[0];
}

Documentation

• Medusa Documentation
• Strapi Documentation
• Plugin Guide