Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

Building Composable Commerce with Nuxt, Shopify, and Storyblok

  • Home
  • Tutorials
  • Building Composable Commerce with Nuxt, Shopify, and Storyblok
INFO:

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.

Building modern e-commerce websites is difficult. Customers want to have the most modern tooling, best-of-breed solutions, and the freedom to migrate to other tools easily. In order to deliver that, companies decided to switch from monolith providers into composable architecture. Monolith architecture e-commerce means that the provider delivers to the customers everything that is needed to start an online commerce website including e-commerce platform itself, storefront, content management system, etc. Taking a look at the modern architecture for e-commerce, two major concepts have been getting a lot of popularity recently and these are Headless & Composable Commerce.

Headless Commerce is a common term for software architecture, in which the central assumption is separating the UI (frontend) from the business logic (backend). It provides even the most mature businesses with the manoeuvrability and flexibility of a start-up.

Below, you could see a simple graphic explanation of how Headless Commerce architecture looks like:

If we dive deeper into what can be part of either Frontend or Backend of Headless Commerce, we can see that there is a lot more there than meets the eye (cool Transformers reference here ;))

Apart from the website itself, our Frontend can be accessed via mobile devices, IoT, watches, social media platforms, and many more. Same for our Backend, which can contain checkout integration, promotions, loyalty programs, etc.

In this tutorial, however, we will elevate our application to another level by not only going for Headless Commerce architecture but also Composable Commerce. This will allow us to compose the e-commerce application with the best-of-breed solutions for frontend, backend, and CMS.

In the next three articles, you will learn how to build a Headless/Composable Commerce application from scratch with Nuxt, Shopify, and Storyblok. Each article will be a continuation of the previous one but can be treated as a separate tutorial too!

  1. Building a Storefront with Nuxt
  2. Adding e-commerce data from Shopify
  3. Adding dynamic content from Storyblok (with Shopify plugin) and deploying the app to Vercel.

If you will feel lost at any point (or you just prefer to see the actual code of the project) you can access the public repository with this link → https://github.com/Baroshem/nuxt-shopify-storyblok

On the Homepage, we have navigation, a big banner attracting attention, a list of products from Shopify, a list of products from Storyblok (with Shopify plugin) and a footer.

On the Product Page, we have a header, a Product Detail page, a list of the related products and a footer

The final application can be seen here → https://nuxt-shopify-storyblok.vercel.app/

NEXT PART:

In the next part of this series, we will see how to start making a composable commerce website with Nuxt.

Author

Jakub Andrzejewski

Jakub Andrzejewski

Senior Developer @VueStorefront, Ambassador @Nuxt.js and @Storyblok. Apart from work, Technical and Recreational Diver, Mountain Hiker, occasional gamer, and a huge fan of Lego and Transformers.