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 {1}. Enter a name {2} for your new Storefront space and then click create space {3}.

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 Define Schema we see that the page has only one item: body (blocks) {1}. We will leave this as 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 Define the schema {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 generstor 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 for specific products. In many cases, you want to adapt pages for products that are important and maybe need some extra content. To do this, we will create a new folder {1} called product {2} with a content type of Product {4}.

After creating the folder, we navigate inside it and create a new entry {1} for a specific product we want to adapt. In slug we enter the slug of the product from the eCommerce system {3} and then choose Product {4} for the content type.

Open the entry and fill it with some example content. Once your Storefront is connected to a starter template you will be able to see your Storyblok content {2} along the eCommerce system content {3}. This allows you to easily add additional content to a product or adapt specific text or image fields.

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