Storyblok Raises $80M Series C - Read News

Skip to main content

Commerce Layer


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.

The Commerce Layer Field Type extension allows users to select products and SKU lists from Commerce Layer and enhance or list the information with Storyblok.

Section titled Functionality

Storyblok users can search within the Commerce Layer product catalogue and pick products from a grid:

Commerce Layer Products

Commerce Layer Products

Additionally, they can switch between different markets and select products that are available in a specific location.

Market options dropdown

Market options dropdown

When selecting a product from a specific location, the output will be extended by the market number:

  "plugin": "sb-commerce-layer",
  "items": [
      "name": "Black Women T-Shirt with White Logo (L)",
      "id": "BdplSqQREN",
      "sku": "TSHIRTWS000000FFFFFFLXXX",
      "image": "",
      "type": "product",
      "market": 10460

Furthermore, they can also select an SKU list:

Commerce Layer Categories/SKU lists

Commerce Layer Categories/SKU lists

Section titled Prerequisites

Before diving into the installation process, here are the requirements that need to be met before you start:

Section titled Installation

Storyblok's support will install the Field Type to your space upon request. For the setup, certain options are needed that are provided by Commerce Layer.

Section titled Integration Credentials

To create an integration application and retrieve the integration API credentials, please follow the instructions provided here.

  1. Copy the Client ID and Client Secret to the clipboard.
  2. Navigate to the Storyblok Encryption Service, encrypt the Client Secret, and copy it.

Section titled Sales Channel Credentials

In order to create a sales channel application and retrieve the sales channel API credentials, follow the instructions provided here.

  1. Copy the Client ID and optionally the market number of the Sales Application.

Section titled How to setup

After retrieving all necessary credentials, you are ready to configure the Field Type options:

Section titled Required options:

Section titled Optional options:

  • salesChannelClientId - The client_id from your sales channel API credentials.
  • salesChannelDefaultMarketNumber - number of a specific sales channel market (e.g.: 10460). Note that this option must be provided together with salesChannelClientId but can also be omitted.
  • limit - maximum number of selected items
  • selectOnly - can be defined to limit the selection to just one category (e.g.: product or category)

Section titled How to use

You can find more information on how to use the data provided by the extension inside your code inside the Commerce Layer guide documentation.