Storyblok Raises $80M Series C - Read News

Skip to main content

eCommerce Field-Type Plugin


On May 13th, 2024, Storyblok started gradually rolling out a new design for its Visual Editor. Therefore, the Visual Editor product screenshots depicted in this resource may not match what you encounter in the Storyblok App. For more information and a detailed reference, please consult this FAQ on the new Visual Editor design.

Get access to the eCommerce integrations

Currently, the eCommerce integration plugin is only available for our enterprise customers, but you can get in touch with us to request access.

Section titled Setting Up the eCommerce Field-Type Plugin

After you install the plugin, select it in your editor under custom type on any field that has the field-type Plugin. To get to the settings, just click the little settings icon next to the field {1} inside any component like the Product Slider.

Configure Plugin in Storyblok

First set the Custom Type in the field-type plugin we just installed. Then enter information in the API endpoint and token {2} fields. Finally, enter information in the limit field (to limit the number of elements to select) and the selectOnly field (to define whether you want to select only products or categories).

endpointstring (required)url to your endpoint
tokenstring (required)secret access token from your eCommerce API
limitinteger (optional)this limits the amount of items to select
selectOnly‘product’ or ‘category’ (optional) this limits the selection to either products or categories
Storyblok Plugin Settings

Section titled Configuring the Field-Type Plugin in Storyblok

After you get your API endpoints and credentials you can configure the field-type. In the previous tutorial we already set up a Storefront structure in Storyblok. Now open the Home entry and let's start configuring our plugins.

Section titled Getting Your API endpoints

If you don't have your API endpoints yet, check the tutorial for your eCommerce provider.

eCommerce ProviderTutorial Link
BigCommerceBigCommerce Tutorial
ShopifyShopify Tutorial
ShopwareShopware Tutorial
CommercetoolsCommercetools Tutorial
SyliusSylius Tutorial

Section titled Adding Products

If we click on Define schema for our product field-type on one of our components, for example on the Product Feature Component, we need to enter the endpoint and token depending on the eCommerce API you're using {1}. With selectOnly = product, we limit the selection to products (no categories). With limit = 1 we allow only one product to be selected in this field.

Product Plugin Setup
Product Plugin Setup

After setting up your endpoints, click the select products button to see all of the products that were fetched from your eCommerce provider.

Select Products
Select Products

Section titled Adding Categories

When we click on Define schema for the field-type plugin in our Product Grid Component we created earlier, we must enter the endpoint and token depending on the eCommerce API you're using {1}. With selectOnly = category, we limit the selection to categories. If we don't define a limit, we can select as many categories as we want in this field.

Category Plugin Selection
Category Plugin Selection

After setting up the plugin correctly and clicking the button to select categories, we can see a selection of categories and add the ones we need.

Category PlugIn Select

If you're working with the storefront we set up in the storefront tutorial, you should be able to select products and categories for the different components we created. Go through the different components with the plugin field-type, set up the field-type with the endpoints, and select some products and categories. The result of selecting products should be similar to the image below {1}.

Selected Products

Once you were able to set up and select some products within Storyblok, you can continue with our Nuxt.js or Next.js storefront tutorials to see how to connect everything to the Storyblok and eCommerce APIs.