Building Composable Commerce with Nuxt, Shopify, and Storyblok
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!
- Building a Storefront with Nuxt
- Adding e-commerce data from Shopify
- 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/
In the next part of this series, we will see how to start making a composable commerce website with Nuxt.
Author
