E-commerce

Storyblok’s official e-commerce integrations allow content creators to select products and categories from an existing e-commerce backend directly from the Visual Editor.

The e-commerce integrations are field plugins that fetch data directly from the e-commerce platform and access it in the Visual Editor. After one or more products or categories have been selected, a subset of the available data from the e-commerce platform is stored in the story object. The amount of data that is stored is limited deliberately, as the data is only intended as a reference. When fetching stories using Storyblok’s Content Delivery API, the included product and/or category IDs can be used for a subsequent API request, fetching the required data directly from the e-commerce platform. This approach ensures that the most up-to-date data is retrieved.

Note

In an e-commerce context, data can be outdated quickly due to, for example, changes in availability or discounts. As a result, storing such data in Storyblok would be problematic, as every change from the e-commerce side would require a synchronization. Fetching the relevant directly from the e-commerce platform ensures an accurate representation on the frontend.

A visual representation of developers and editors using an e-commerce backend and Storyblok to distribute content across multiple channels through an API layer.

Official integrations

Our official e-commerce integrations are developed, maintained, and supported in-house.

BigCommerce

Centra

CommerceLayer

Commercetools

Saleor

Salesforce Commerce Cloud

SAP Commerce Cloud

Shopify

Shopware

Spryker

Sylius

Vendure

Tip

The e-commerce integrations are exclusively available on higher-tier plans. Please refer to the Pricing page for further information.

Community integrations

The following e-commerce integrations are created and maintained by our developer community. Support is provided by the creator, not our team.

Magento

Magento 2 module by Wind & Kite.

Setup and application

The following steps describe generically how to set up an official e-commerce integration and retrieve data. For more specific setup instructions, please refer to the available integrations linked above.

In the Block Library, create a new nestable block with the technical name featured_products. Add the following fields to the schema:

• title: Text
• products: Plugin

In the Custom Type dropdown of the products field, select one of the e-commerce integrations, e.g. sb-shopify or sb-centra. In the Source section, provide the API credentials of your e-commerce platform.

Note

The limit option defines a maximum number of entries that can be selected. The selectOnly option restricts the available options to either only products (product) or only categories (category).

The API response from the single-story endpoint includes the product data in the items array of the featured_products field of the story.

{
  "featured_products": {
    "items": [
      {
        "id": "gid://shopify/Product/7788021645465",
        "sku": "product-001",
        "name": "Product 001",
        "type": "product",
        "image": "https://cdn.shopify.com/s/files/1/0501/4120/0537/files/product-001.jpg",
        "handle": "product-001",
        "variants": false,
        "description": "A description for Product 001."
      },
      // ...
    ],
    "plugin": "sb-shopify"
  }
}

The following example in JavaScript illustrates how product data can be fetched on the frontend using subsequent API requests to Storyblok and, in this example, Shopify.

import { storyblokInit, apiPlugin } from '@storyblok/js'
import Client from 'shopify-buy'

const { storyblokApi } = storyblokInit({
  accessToken: 'your-storyblok-access-token',
  use: [apiPlugin],
})

const shopifyClient = Client.buildClient({
  domain: 'your-shop-name.myshopify.com',
  storefrontAccessToken: 'your-storefront-access-token',
})

try {
  const { data } = await storyblokApi.get('cdn/stories/home', {
    version: 'draft',
  })

  const { story } = data

  const productId = story.content.body[0].featured_products.items[0].id

  const product = await shopifyClient.product.fetch(productId)
  console.log(product)
} catch (error) {
  console.log(error)
}

Note

The specific method of retrieving data from the e-commerce backend depends on the provider and its APIs. Please refer to the documentation of your chosen e-commerce platform.

Moving beyond the fundamentals, several additional approaches with or without using Storyblok’s e-commerce integrations are conceivable, for example:

• Fetch a selection of products from a category ID selected in Storyblok and add filtering methods provided by the e-commerce API to enhance the UX
• Allow content creators to overwrite product metadata, such as the title or description, directly in Storyblok
• Manually map a single product to a dedicated product story
• Fetch products by matching story slugs, circumventing the requirement to manually select a product in a designated field (this approach can be particularly attractive when dealing with large quantities of products)
• Create blocks without designated e-commerce fields that automatically render a selection of products based on metrics (e.g., best-selling, latest, most expensive) or meta attributes (e.g., tags, collections, categories)

Related resources

Getting Started with Next.js Commerce and Storyblok

How to Build a Storefront with Nuxt and BigCommerce

Building Headless eCommerce Integrating Storyblok & Swell in Nuxt 3