Storyblok Raises $80M Series C - Read News

What’s the True Total Price of Enterprise CMS? Find out here.

Skip to main content

eCommerce Field-Type Plugin

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.

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
1

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).

settingvaluedescription
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
1
2

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.


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

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
1

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

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
1

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.