Headless eCommerce integrations

Stories from the Blok is Storyblok’s first live event, bringing a compilation of exclusive insights into new features, latest developments, and interesting topics. One, in particular presented by Lisi Linhart, explored Headless eCommerce with Storyblok’s CMS, Next.js Commerce, and BigCommerce integration.

Lisi is a Developer Experience Engineer at Storyblok building apps, cheat-sheets, tutorials for developers working with and onboarding through Storyblok.

Lisi’s talk is divided into five sections, as she guides you through Headless eCommerce, traditional vs. headless eCommerce systems, headless storefront possibilities, and an overview of the Next.js and BigCommerce integration, as well as how you can choose the right eCommerce CMS suited to your business.

Headless eCommerce

When it comes to combining a headless eCommerce storefront and a headless content management system, these are two decoupled front and back-end systems coming together with an API layer each to then distribute content to various devices and channels.

Storyblok is a content management system that is suited for web, app, storefront, and omnichannel publishing for different content consumptions, making it key for potential storytelling you can conduct with your audience. Whilst this feature is best suited in allowing the flexibility of such with marketers, Storyblok is additionally made for both developers, and editors in mind, with the ease of working the headless CMS and eCommerce backend on the API layer, with the uniqueness of choosing the best of breed from both headless CMS and eCommerce to fit with your business’ needs.

Traditional vs. Headless eCommerce systems

The difference between a traditional and a headless eCommerce system depends on the needs and target devices you are aiming to distribute your content. Whilst traditional eCommerce is convenient only for web distribution, a headless system is a better fit if you are looking for more optimized omnichannel publishing (such as newsletters, blogs, IoTs, web apps, or mobile apps).

While a traditional system bounds your developers to the system’s tech-stack, and any redesign must be adapted for both front and back-end; headless systems are additionally flexible to your developer’s tech-stack of choice, as the front and back-end are decoupled, meaning you can redesign your application over time easily and separately.

Although some eCommerce systems have all the features in their package, this can sometimes make it difficult for editors to work with due to the set constraints of having to utilize those set features. With a headless system, Storyblok for example makes it easier to understand and use with the help of a visual editor and customizability of your components. This makes the migration from traditional to headless, or whether you are looking to adopt a headless system for the first time, a prime choice during the onboarding process due to the nature and flexibility of choice in a headless system.

Headless storefronts

Many headless storefronts are based on the JAMstack, using static or statically-generated sites that will, in turn, give you a performance increase (reaching to about 20% in conversion rates) due to a headless system’s configuration towards faster loading times and site performance. Additionally, a headless storefront is less likely to encounter security issues compared to a traditional system, as it is harder to attack an aesthetically-built site as they are separated from the user layer. Headless storefronts and sites are consequently also easily scalable and can be developed very quickly. This means that if your business grows, so should your site, allowing your developers and editors to go to market quicker as they can use their own technologies and what they are comfortable with rather than them having to fit with a system.

Storyblok, Next.js Commerce & BigCommerce

Here, we explore the possibilities of combining Next.js Commerce and BigCommerce with Storyblok’s CMS.

With Next.js Commerce, not only does it hold exceptionally as the the all-in-one starter kit for high-performance ecommerce sites, but also features internationalization possibilities and integrations with other eCommerce platforms, written in typescript support, and the possibility of integrating with Vercel - giving you incremental builds, analytics and anything else you might need in your storefront.

When combining with Storyblok’s CMS editing capabilities, Storyblok stands as a CMS of choice for eCommerce integrations through it’s visual editor feature, allowing your editors to edit content with an in-context preview, and the possibility to arrange components on your website. Additional to that, integrate plug-ins with ease to arrange and select categories and needs from your eCommerce system, allowing for flexibility and reusability in building everything around your components to match and orchestrate the best of breed features to your storefront through the decoupling of your store’s front-end to back-end.

Storyblok has built eCommerce integration of custom-field types that you can load inside of the Storyblok app with Shopify Plus, BigCommerce, Shopware and commercetools. Find out more here!

Check out our article and the source code on github on "How to build a storefront with Next.js and BigCommerce using Storyblok", as well as a demo-version in the video embedded at the top of this article. There is also a Nuxt.js and BigCommerce tutorial if you prefer Nuxt.

Choosing a headless CMS for eCommerce

By choosing a headless CMS for eCommerce, your developers and editors will gain flexibilities in managing and orchestrating your content, while your marketers will benefit from the ease of usage as well as possible omnichannel storytelling. Here are some further benefits to think about:

• Omnichannel Publishing: Make sure to look for a system that allows you to manage your storefront for omnichannel publishing, as well as the creation of apps, blogs, web apps, and mobile applications alike.
• Practicality and flexibility: A CMS that is best suited for your developer’s needs and skillsets without the need to learn new technologies and easy onboarding.
• Performance and security: As sites are aesthetically-built, with the front and back-end decoupled, allows for greater security, and for you to focus on your page’s performance overall.

Flexible and custom-storefronts: Build, arrange and rearrange components based on some variables to focus on the solutions and storytelling your customers want to see.

Where can you start your headless eCommerce journey? Visit our eCommerce page for more information on how to combine Storyblok with any eCommerce system.