Storefront Setup

Create a Storefront in Storyblok

To get started Sign up for a free Storyblok account if you haven't already and choose to start with a new space, enter a name {1} for your new Storefront space and then click create space {2}.

Creating a Landing Page

Once you have created a space, go into Content and open the Home page. This is where we will build our first storefront components.

For our storefront landing page, we need a few different components: a teaser, a category selector, a featured product, and a slider with different products.

If we click on Edit Field {1} and fields, we see that the page has only one item: body (blocks){2} . We will leave this as it is and continue with creating the components as new bloks.

Hero

Next, add a new block called Hero. You can delete the existing Grid and Teaser blok, since we won't need it. Then click Edit fields {1} for the Hero as follows or as seen in the second image below {1}:

Schema of the 'hero' (technical name):

-- headline (type: Text)
-- description (type: Richtext)
-- link (type: Link)
-- image (type: Asset - Images)

Make sure the technical name {2} is in lowercase and with dashes, so you can match it to components in your static site generator like Nuxt.js or Next.js. You can choose the technical name under Config {1}, when defining the schema. You can also choose the Display name {3}, which is the name displayed inside the Storyblok editor.

Product Feature

Create a new component Product Feature with the following schema:

Schema of 'product-feature' (technical name):

-- headline (type: Text)
-- product (type: Plugin)

Product Slider

Next, create a component Product Slider with the schema:

Schema of 'product-slider' (technical name):


-- headline (type: Text)
-- products (type: Plugin)

Product Grid

Finally, create a component Product Grid with the schema:

Schema of 'product-grid' (technical name):


-- categories (type: Plugin)
-- products (type: Plugin)

In the end, your home page should look similar to the image below with 4 different components {1}.

Create a Product Detail Page

The last part is to create detailed pages or section for specific products. In many cases, you want to adapt pages for products that are important and maybe need some extra content but in this tutorial I will make it a detailed section for a specific. To do this, we will create a new block {1} called Single Product {2}.

After creating the Single product block, we navigate inside it and select a product {1} . Also we need a Headline {2} and then a description {3} . Finally hit save. You should now see a single product with description {4} .

Now that we have our Storyblok storefront set up, we can move on to configuring our eCommerce integration plugins.