Headless eCommerce with Storyblok & Swell
eCommerce is still a growing market and a great opportunity for local businesses to sell their products online. However, managing content and products in one place or on one system can be difficult. This is where Headless comes into play. With Storyblok as a Headless Content Management System and Swell as a Headless eCommerce System, you receive a powerful combination to manage content and products in one place. So let's get started with how you can use these two tools together to create powerful eCommerce experiences.
What exactly is Swell?
Swell is a simple and secure eCommerce platform that allows anyone to build an online store and run their business from anywhere in the world, without any coding experience. It’s not only easy to set up, but in addition, if we decide to go headless with Swell, we do have all the benefits we want as developers:
Completely free choice of technology
Reusable content on different platforms or channels
And many, many more!
We once had a client who approached us to create a product for them which was basically an online store to not only sell products but also rent them and buy access to different features in the shop, based on subscriptions. This store should not only have been available via the web but also in a native mobile application. Everything should be managed through Storyblok.
We thought: “Wow, that's a cool product idea and we can meet all the criteria because we have been working with Storyblok for several years and offer native mobile development too!”.
There was only one problem: neither had we run an online store nor used a system to create one before. So the journey began to search for the best-fitting eCommerce solution out there. The requirements we had set for ourselves were:
Subscription support (nice to have, or we build it on our own)
Super cool user experience
How to connect Swell and Storyblok?
The only downside of Swell was that there was no Storyblok integration. But to be honest, this wasn't much of a hindrance. It was a problem we could easily fix, because both systems are headless and, therefore, can be connected seamlessly. So we started building a small integration, which allowed us to use the products provided by Swell directly in the Storyblok CMS. Since this was not our first integration, and we also have a lot of experience with Storyblok, we decided to give it a go and create our own Storyblok field-type plugin to get the job done.
If you want to learn more about field type plugins, you can learn how to fetch data from Spotify in this tutorial.
It is a great experience to connect Swell and Storyblok with each other and build a custom storefront with them. We also love that we don’t need any custom-written backend when using Swell. Thus, everything can be done with a click of a button, ready to scale. Definitely consider Swell if you have a strong ambition in growing your business into an international marketplace.
If you want to dive deeper into developing with and connecting the above-mentioned headless systems you can read the following tutorial: Building Headless eCommerce Integrating Storyblok & Swell in Nuxt 3