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.
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.
Available integrations
The e-commerce integrations are exclusively available on higher-tier plans. Please refer to the Pricing page for further information.
Setup and application
The following steps describe generically how to set up an 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: Textproducts: 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.
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)
}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)