Integrate Shopify with Strapi

Integrate Strapi with Shopify to enhance e-commerce flexibility, streamline content management, and optimize user experience across your online store

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

What Is Shopify?

Shopify is a leading e-commerce platform that allows businesses to create, manage, and scale their online stores. Shopify provides a range of customizable templates, tools, and features designed to streamline the process of selling products online.

With Shopify, entrepreneurs and established businesses alike can manage inventory, process payments, and track orders from a centralized dashboard. It also integrates with various third-party apps and services to extend functionality, such as marketing, shipping, and accounting. Known for its user-friendly interface, Shopify is a popular choice for both beginners and experienced merchants looking to build and grow their e-commerce presence.

Why Use Strapi With Shopify?

Integrating Strapi’s headless CMS with Shopify enhances the flexibility of your e-commerce site while leveraging Shopify’s robust commerce infrastructure. Shopify handles product data, inventory, and transactions, while Strapi manages rich content, marketing materials, and custom experiences. By connecting these platforms via eCommerce and Strapi API integrations, you can seamlessly manage your online store’s content and commerce.

Key Benefits of Integrating Shopify with Strapi

The primary benefit is content flexibility. While Shopify excels in product management, it can be limiting when it comes to complex editorial experiences. Strapi, as a customizable headless CMS, allows for rich product narratives, multilingual content, and sophisticated landing pages, all seamlessly integrated with your Shopify data.

The performance also improves. By separating content management from e-commerce, you can optimize each system independently. Content can be cached through CDNs, while product data remains dynamic. This separation typically can boost page load speeds and increase conversion rates.

Additionally, you’re no longer confined by Shopify’s theme limitations. Strapi lets you build progressive web apps, mobile apps, or use any frontend framework while retaining full commerce functionality—perfect for frontend developers.

Architectural Advantages

This headless approach enables each system to scale independently, addressing the limitations of traditional CMS setups. With Strapi, your content team can work efficiently while Shopify handles commerce operations smoothly. Plugins make setup simple, ensuring real-time data synchronization through webhooks and secure API connections. Technologies like GraphQL further enhance data querying capabilities, offering developers robust tools for building advanced e-commerce applications.

How to Integrate Strapi with Shopify

This step-by-step guide covers the complete integration process, from initial setup to a fully functional Shopify-Strapi connection.

Prerequisites

Your system needs 2 CPU cores and 4GB of RAM minimum (8GB recommended) with at least 32GB of disk space. Install Node.js and npm/yarn. Choose PostgreSQL for production or SQLite for development.

You'll need an active Shopify store with admin access to create private apps and configure webhooks.

Setting Up Your Strapi Project

Create your Strapi project and build for production:

npx create-strapi-app@latest my-shopify-project
cd my-shopify-project
NODE_ENV=production npm run build

Select PostgreSQL during setup and provide your database connection details.

Configuring Shopify API Access

In your Shopify admin, navigate to Apps and click on 'Develop apps' in the top right. Create a new app with these permissions:

Read access: products, orders, customers
Write access: products (if updating from Strapi)

Generate your API credentials and install the official Shopify Node.js library:

npm install @shopify/shopify-api

Enforcing Secure Credential Management

Create a .env file (add to .gitignore):

SHOPIFY_API_KEY=your_api_key_here
SHOPIFY_API_SECRET=your_api_secret_here
SHOPIFY_ADMIN_API_ACCESS_TOKEN=your_access_token_here
SHOPIFY_SHOP_NAME=your_shop_name
SHOPIFY_API_VERSION=2023-04
SHOPIFY_WEBHOOK_SECRET=your_webhook_secret_here

Create a configuration file:

// config/shopify.js
module.exports = ({ env }) => ({
  apiKey: env('SHOPIFY_API_KEY'),
  apiSecret: env('SHOPIFY_API_SECRET'),
  accessToken: env('SHOPIFY_ADMIN_API_ACCESS_TOKEN'),
  shopName: env('SHOPIFY_SHOP_NAME'),
  apiVersion: env('SHOPIFY_API_VERSION'),
  webhookSecret: env('SHOPIFY_WEBHOOK_SECRET')
});

Implementing Webhooks for Data Synchronization

Set up webhooks for product events in Shopify via the Admin API or through your app's configuration in the Shopify Partners dashboard. If you're new to this, here's a guide on using webhooks in Strapi. For local development, expose your environment using Hookdeck CLI:

npm install -g @hookdeck/cli
hookdeck listen 1337/api/shopify/webhook

Create a webhook controller:

// api/shopify/controllers/webhook.js
'use strict';

const crypto = require('crypto');

module.exports = {
  async handleProductWebhook(ctx) {
    const hmac = ctx.request.headers['x-shopify-hmac-sha256'];
    const calculatedHmac = crypto
      .createHmac('sha256', process.env.SHOPIFY_WEBHOOK_SECRET)
      .update(JSON.stringify(ctx.request.body), 'utf8')
      .digest('base64');
    
    if (calculatedHmac !== hmac) {
      return ctx.unauthorized('Invalid webhook signature');
    }
    
    const webhookTopic = ctx.request.headers['x-shopify-topic'];
    const productData = ctx.request.body;
    
    switch (webhookTopic) {
      case 'products/create':
        await strapi.services.product.create({
          shopifyId: productData.id.toString(),
          title: productData.title,
          description: productData.body_html,
          price: productData.variants[0].price
        });
        break;
      case 'products/update':
        await strapi.services.product.updateByShopifyId(
          productData.id.toString(),
          {
            title: productData.title,
            description: productData.body_html,
            price: productData.variants[0].price
          }
        );
        break;
    }
    
    return ctx.send({ received: true });
  }
};

Testing Your Integration

Create a test product in Shopify and verify the webhook creates a corresponding Strapi entry. Monitor webhook delivery through Shopify's admin interface logs.

Test automated scenarios:

// tests/integration/shopify.test.js
describe('Shopify Integration Tests', () => {
  it('should create product from webhook', async () => {
    const testProduct = {
      id: 123456789,
      title: 'Test Product',
      body_html: 'Test description',
      variants: [{ price: '29.99' }]
    };
    
    const response = await request(strapi.server)
      .post('/api/shopify/webhook')
      .set('x-shopify-topic', 'products/create')
      .set('x-shopify-hmac-sha256', calculateHmac(testProduct))
      .send(testProduct);
      
    expect(response.status).toBe(200);
    
    const createdProduct = await strapi.services.product.findOne({
      shopifyId: '123456789'
    });
    expect(createdProduct.title).toBe('Test Product');
  });
});

Your integration is now ready for production deployment. You can begin building content-driven shopping experiences that differentiate your store from the competition.

Example Project: Build an E-commerce Backend with Shopify and Strapi

This e-commerce solution demonstrates production-ready Shopify-Strapi integration patterns. The project combines Shopify's commerce engine with Strapi's content management flexibility to create a scalable headless commerce platform.

Project Structure

The modular architecture maintains a clear separation between commerce and content operations:

strapi-shopify-integration/
├── api/
│   └── shopify/
│       ├── controllers/
│       ├── services/
│       └── routes/
├── config/
│   ├── shopify.js
│   └── middleware.js
├── plugins/
└── webhooks/

This structure supports secure webhook handling and automated data synchronization. The project includes Strapi plugin configuration for seamless Admin API integration.

Key Implementation Details

The project addresses critical integration challenges through proven patterns. Here's an example of the HMAC verification implementation that secures your webhook endpoints:

// api/shopify/services/webhook.js
const crypto = require('crypto');

module.exports = {
  verifyShopifyWebhook(data, hmacHeader, secret) {
    const generatedHash = crypto
      .createHmac('sha256', secret)
      .update(data, 'utf8')
      .digest('base64');
    
    return crypto.timingSafeEqual(
      Buffer.from(generatedHash),
      Buffer.from(hmacHeader)
    );
  },
  
  async processProductUpdate(productData) {
    // Synchronize product data with Strapi
    const existingProduct = await strapi.query('product').findOne({ 
      shopifyId: productData.id 
    });
    
    if (existingProduct) {
      return strapi.query('product').update(
        { id: existingProduct.id },
        { 
          title: productData.title,
          description: productData.body_html,
          price: productData.variants[0].price,
          // Additional fields...
        }
      );
    } else {
      // Create new product logic
    }
  }
};

The synchronization service maintains data consistency with automatic retry mechanisms for failed API calls.

The implementation utilizes the @strapi-community/shopify plugin with custom controllers for advanced functionality. Product lifecycle events (creation, updates, deletions) trigger webhook handlers that maintain synchronization between both systems. The Shopify Fields plugin extends content management capabilities beyond standard commerce fields.

To set up the project locally:

Clone the repository
Configure Shopify API credentials in your .env file
Register webhook endpoints in your Shopify admin panel
Run yarn develop to start your Strapi instance
Test the integration with a sample product creation

This foundation handles production-scale traffic while maintaining security standards and performance requirements for enterprise e-commerce applications.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours, Monday through Friday, from 12:30 pm to 1:30 pm CST: Strapi Discord Open Office Hours.

For more details, visit the Strapi documentation and the Shopify documentation.