Back to integrations

Integrate Medusa with Strapi

Learn how to properly integrate Strapi with Medusa and make these two systems work for you.

tweet selection
Medusa and Strapi Integration.png

    These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

    What is Strapi?

    Strapi is the leading open-source headless CMS offering features, like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern frontend frameworks.

    Explore the Strapi documentation for more details.

    What is Medusa?

    medusa homepage.png

    Medusa is an open-source headless commerce engine that provides all the essential tools to build modern e-commerce platforms. It exposes APIs for product management, orders, checkout, and more, thus allowing you to build custom storefronts with your preferred front-end framework.

    Why Integrate Strapi with Medusa?

    By combining Strapi’s CMS capabilities with Medusa’s commerce engine, you create a content-rich, highly customizable e-commerce platform where:

    • Product and catalog content can be managed in Strapi,
    • Commerce logic and transactions are handled by Medusa,
    • Your frontend consumes content and commerce data through APIs.

    This separation allows:

    1. Flexible content modeling: Create custom product pages, landing pages, and marketing content in Strapi.
    2. Two-way data sync: Keep product data consistent between Medusa and Strapi.
    3. Personalized experiences: Serve rich content and commerce data to multiple channels or storefronts. Strapi

    How the Integration Works

    • Medusa stores commerce data (products, variants, orders, pricing).
    • Strapi manages enriched content tied to that data (extended descriptions, marketing copy, SEO fields, media assets).

    Integrate Medusa with Strapi

    Step 1. Set Up a Medusa Application

    npx create-medusa-app@latest

    Follow the prompts to generate your Medusa backend and, optionally, the Next.js storefront.

    Step 2: Set Up Strapi

    In a separate directory, bootstrap a new Strapi application:

    npx create-strapi@latest my-strapi-app
cd my-strapi-app
npm run dev

    Create your admin account and launch the Strapi admin panel.

    Step 3: Define Product Content Types in Strapi

    Create collection types in Strapi for:

    • Product
    • Product Variant
    • Product Option
    • Product Option Value

    Each content type should include fields that map to Medusa IDs and relationships.

    Step 4: Install Strapi Client in Medusa

    From your Medusa project directory, install the Strapi client:

    npm install @strapi/client

    Next, create a new directory in your Medusa app:

    1src/modules/strapi

    Create a Strapi Client Loader

    This initializes the Strapi client when the Medusa server starts.

    Example code snippet:

    1import { strapi } from "@strapi/client";
2
3export default async function initStrapiClientLoader({ container, options }) {
4  if (!options?.apiUrl || !options?.apiToken) {
5    throw new Error("Strapi API URL and token are required");
6  }
7  const strapiClient = strapi({
8    baseURL: options.apiUrl,
9    auth: options.apiToken,
10  });
11  container.register("strapiClient", asValue(strapiClient));
12}

    You’ll configure the module so Medusa has the Strapi API details (URL, token, locale).

    Step 5: Sync Data Between Systems

    A. From Medusa → Strapi Medusa emits events (e.g., on product creation/update) that you can hook into:

    • Fetch data from Medusa entities
    • Push it into Strapi via the Strapi API

    B. From Strapi → Medusa

    • Strapi webhooks notify Medusa when content changes (e.g., updated descriptions).
    • Medusa handlers then update internal states or trigger business logic accordingly.

    This two-way sync ensures both systems stay aligned.

    Step 6: Display Unified Data in a Frontend

    Once Strapi and Medusa are synchronized:

    • Pull product, variant, option, and content data
    • Combine them in your storefront API calls
    • Render content + commerce pages with frameworks like Next.js

    The official guide includes a full example using the Medusa Next.js Starter.

    Want More Details?

    For detailed instructions and additional information, refer to the full guide Read the full guide.

    Need Fully-Managed Hosting?

    Try Strapi Cloud Strapi Cloud is a fully-managed cloud hosting for your Strapi project.

    With Strapi Cloud:

    • Get everything you need to run your Strapi project in production.
    • Deploy Strapi to Production in just a few clicks with no vendor lock-in.

    • Gain complete control by collaborating with your team, managing custom domains, monitoring real-time logs, and more.

    Strapi Quick Start

    The Open-Source Headless CMS for AI powered Websites and Apps

    tweet selection