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

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

setting value description
endpoint string (required) url to your endpoint
token string (required) secret access token from your eCommerce API
limit integer (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

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 Provider Tutorial Link
BigCommerce BigCommerce Tutorial
Shopify Shopify Tutorial
Shopware Shopware Tutorial
Commercetools Commercetools Tutorial
Sylius Sylius 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

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

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

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.