How to build a shop with Nuxt, Storyblok and Snipcart
Storyblok is the first headless CMS that works for developers & marketers alike.
In this tutorial we will implement a Product detail and Product Overview using Nuxt and Storyblok. To let you buy your products we will integrate Snipcart buy buttons and cart. As always you can find the source on Github, the demo on Netlify and tutorial down below.
Basic Nuxt + Storyblok setup
Signup for a free Storyblok account & choose to start with an empty space. You will be guided to a screen that looks like below.
We will now click on that
Home content entry and download a preconfigured Nuxt.js project based on this Github Repository. You can also have a look at our full website nuxt tutorial linked next to the download button. The project you will be downloading already is configured with your
previewToken that can be found in your space dashboard if you need it.
The project you've downloaded is a basic Nuxt Startertemplate with the default components in the home entry. So to get everything running we only need to install the project dependencies.
After installing the dependencies you can start your local nuxt development with the command below. You will be able to access your app via
The last step to have the live-preview and editing running is to tell the Storyblok interface that you're running your server on
localhost:3000 in the second step as shown below and press
Go you should see a quick reload and switch of the onboarding screen to your own project embedded in Storyblok. You can now click on those components and edit the content on the right side. Try pressing on the
Feature 2 and enter content in the
name field to see it change, make sure to press
Save to actually save your changes.
Define & Create Product Details
Since we not only want a startpage we will now have to setup the content structure to allow us to create products. To do so we press the Storyblok Logo at the top left to get back to content overview in Storyblok. Once back at the overview we will create a new folder with the name
Products, press the button at the top right to do so.
Save we will add a new content type. To increase your effeciency you will not have to go back to
Components and first create the product schema - you can do that during content creation as well. So we will go ahead and enter
Default Content Type, even tho it does not exist yet. Press the
Create new "product" button below the input and continue with finally pressing
The final step is to create our first product and define the fields we want to have for our products. You should already be inside the Products folder so you can already press the
+ Entry button. You should see that the content type should already be set to "product" and all that's left for you is to choose the name of your first product.
You will notice that you won't see anything in the live-preview, that's because we don't have a
product component defined yet in the nuxt setup that would allow us to display something and we also do not have any fields defined. To do so we navigate into the
Compose Mode in the top menu and then press the
Define Schema. If you don't want that live-preview you can use the
form only option in the left sidebar, which is accessible via the Edit menu.
Next we will have to define the fields we need for our product. Let's start with fields like
images. Enter one key at a time and press
+ Add - make sure to choose the field types you think are appropriate for those fields (eg. Text for
name, Multi for
images, Number for
Once finished, you can now press
Save Schema at the top right corner and you're ready to insert the data you want.
After entering your information press the
Save button to make your information accessible via the API and save it in Storyblok, you can also press Publish to make it accessible not only in the draft version but also with the
version=published param one would use for a production environment as additional query param for their API requests.
Use the Product Detail information in Nuxt
The setup you've downloaded is configured to dynamically include components and already load your data from Storyblok according to the slug we've entered. You may realize that since we created a folder
Products it also gave us a slug
products and since our product is called
Alphachoice Fitness Towel we already got
alphachoice-fitness-towel as the second part, leaving us with the full slug
Create the Product.vue
Our Content type is called
product therefore we create a component with the exact same name:
Product.vue inside the
components folder. Below you can find the content of the
Product.vue. You can access the fields you defined in the schema by using
blok.YOUR_KEY to display the information. I've also added a quick & dirty image gallery to make it look a bit fancy.
Make sure to register your
Product.vue in the
Using Markdown to render the description
Markdown is an amazingly fast way to bring formatted content to your website without the need to write HTML. We choose
markdown for our
description field to have a WYSIWYG editor field in the sidebar, to render that content we can use the library
And add a new filter to
/plugins/filters.js to have it accessible in our Vue Templates. You may see another
resize filter available that uses our Image Service so we can also utilize it to resize our images to increase our page speed.
Now let's update our template in
Product.vue to use markdown and the resize filter.
Resulting in smaller images for the thumb and a pretty description.
Adding a Snipcart Buy Button
Once you’ve signed up and confirmed your account, log in and head to the
nuxt.config.js to add the required styles and scripts as shown below.
Since we now do have the script embedded we're finally ready to insert our buy button, to do so - let's open the
Product.vue again and add it below the
You can see that since every attribute we need is already available in the
blok variable, we can use it for the Snipcart button as well.
Alphachoice.de - Storyblok and Snipcart in action
Alphachoice started with a simple HTML page and integrated the e-commerce solution Snipcart to sell their items. Starting with the first product sale they always kept the focus on not only selling a product - but value - since behind every product they have a story to tell.
“The combination of Storyblok as CMS and Snipcart as our commerce solves our online challenges - we can add new products in Storyblok in different sizes, colors, and materials in a breeze.” David Schörkmayr, Chief Executive Officer, Alphachoice GmbH
Final Step: Product Overview
In our last step we want to create a product overview. To do so we will create the file
pages/index.vue in the
pages folder with the content below. In this page, we will load all content entries from Storyblok that
products since those are the entries in our products folder.
You can add more products to have them show up on the overview at
With Storyblok you will get a flexible CMS that allows you to combine it with Nuxt.js and Snipcart in no time. The combination of Storyblok and Snipcart is as easy as it can be because Snipcart makes it unbelievably easy to be configured using HTML attributes and their JS, and Storyblok makes it easy for you to define the fields you want to display. You can now have a look at our full-blown website Nuxt.js tutorial to learn more, build a multi-language setup and add a header to your shop. Make sure to check out Alphachoice to see Storyblok + Snipcart in action. I've deployed the whole application to Netlify - to do so I wanted to generate the routes and if you also like to do so check out the source on Github!
|Storyblok Nuxt Tutorial||https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial|
|Alphachoice Fitness Towel||https://www.alphachoice.de/products/alphachoice-fitness-towel|
|Demo Hosted on Netlify||https://trusting-elion-259100.netlify.com/|
|Demo on Github||https://github.com/storyblok/nuxt-storyblok-snipcart|