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
• Great performance
• Easy scalability
• And many, many more!

Why Swell?

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:

• Multi-language Support
• Subscription support (nice to have, or we build it on our own)
• Storyblok integration
• Super cool user experience

After comparing various systems, we went for Swell and were blown away by the features. Not only were our requirements fulfilled, but they had even more to offer, such as native subscription support, multi-carrier shipping, vouchers as well as a powerful product system. However, the best of all was the “low code backend” which basically means you can create and extend data models as you like and can use them straight out of the provided JavaScript SDK. 

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.

Summary

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.