BigCommerce Headless Commerce with Catalyst and Makeswift

BigCommerce charges headfirst into headless commerce with the recent release of their new Catalyst storefront technology and the acquisition of Makeswift.

Catalyst is BigCommerce's new storefront option targeted towards merchants using a headless commerce model.
Catalyst, a joint creation of BigCommerce and Makeswift, is BigCommerce’s new storefront option targeted towards merchants using a headless commerce model.

February 8, 2024: Merchants will be able to get their stores up and running even quicker, thanks to BigCommerce’s brand new Catalyst storefront technology. Catalyst is BigCommerce’s next-gen solution for building online stores; it is a composable, fully customizable framework for headless commerce built on Next.js (with React storefront components) and supported by BigCommerce’s own GraphQL Storefront API.

Catalyst was created to provide a basic launch point for BigCommerce customers, eCommerce developers and agency partners so that they could easily and quickly build online stores by using a composable architecture, tailored to meet the needs of mid-market and enterprise brands and retailers in the B2C and B2B markets. Based on over 4,000 existing headless implementations, Catalyst combines popular headless technologies with proven best practices to produce a reference storefront that can immediately achieve Google Lighthouse scores of 100 before customization.

Those who have experience working with React can take advantage of Catalyst’s unparalleled customization capabilities. Through the seamless integration of custom React components, developers can enhance the page builder’s functionality, resulting in a dynamic user experience through the page builder. Despite little or no prior experience with development within a composable page builder, these enhancements are exceptionally easy for users to access and deploy. The seamless integration of two systems simplifies the process of updating a company’s eCommerce website and bridges the gap between the business side and the development side, resulting in a smoother eCommerce process.

Catalyst introduces BigCommerce’s reference composable architecture, equipping developers with the most preferred, highest performing technology, and brand users with the world’s best no/low-code Next.js visual editor. This new reference architecture serves as a composable starter kit to help customers launch faster and with greater success. Our partners now have a simplified gateway to offer their clients a comprehensive ecommerce solution that easily unlocks the full potential of composability on the BigCommerce platform.

Brent Bellm
BigCommerce CEO
February 8, 2024

Catalyst, Powered by Makeswift

Earlier in Q3 2023, BigCommerce announced that they had acquired development partner Makeswift, the Atlanta, GA-based software company that has been co-developing Catalyst alongside BigCommerce. Makeswift, a composable website page builder using Next.js, forms the core of Catalyst and simplifies the management of storefronts and content pages, whether the content is from DXP and CMS providers including Amplience, Contentful, Contentstack, Strapi, or popular searchandising solutions such as Algolia and Bloomreach.

Catalyst enables brands and retailers to create incredible customer experiences faster, and we’re looking forward to helping customers drastically reduce their time to market with this new set of tools. Since joining the BigCommerce team, we have been impressed with their vision for the future of composable commerce. Makeswift’s visual page-building capabilities help marketing teams quickly and easily deliver amazing customer experiences without the need for developer support.

Alan Pledger
Makeswift co-founder

Makeswift was previously contracted to build BigCommerce’s own composable website. Their expertise in the field led BigCommerce to contact them again in order to assist with the creation of Catalyst. In addition to being able to work as an independent no-code website builder for lightweight websites and blogs, Makeswift can also be used as part of a composable tech stack for more complex websites, such as blogs and websites. By using its Next.js frontend, Makeswift will help content and commerce teams make changes to their websites, gaining the ability to scale their operations without having to invest a great deal in custom development.

The BigCommerce team also collaborated with several of its agency partners in the development of Catalyst as part of the development process for this product, including 10up, AmericanEagle.com, Apply Digital, EPAM, Huge, Mira Commerce, Orium, Space 48, VML and ZaneRay, which specialize in composable commerce. Following the launch of the platform, the company expects to add additional partners.

An Introduction to Headless Commerce

Just as retail was revolutionized and continues to be influenced by eCommerce, eCommerce itself is experiencing its own ongoing paradigm shift in response to evolving technologies, consumer habits, and market and economic trends. Headless commerce is one of the latest methods for eCommerce businesses to stay competitive and relevant. The effort isn’t in vain, either. Forbes reports that over $1.65 billion USD in funding was raised for headless technologies throughout 2020 to 2021 alone. Unsurprisingly, this amount is expected to increase as the eCommerce retail industry continues to follow market trends.

As the name implies, headless commerce consists of separating the front end of an ecommerce application (the storefront and user experience) from the back end of the eCommerce application (the business logic and data). It is a game changer in eCommerce when the front and back ends of a platform work independently, so that any changes made to either end will not affect the other end. The resulting architecture allows brands to express themselves freely, create whatever they wish, and enhance the customer experience in any way they choose by creating whatever they feel is appropriate for their brand.

SOURCE: BigCommerce

Advantages of Headless Commerce

Online retailers want their stores to have attention-grabbing and engaging design with performance to match and for them function exactly the way they require–all while being as  cost-effective (cost minimal) as possible. While this can be achieved with a traditional eCommerce website model, accomplishing all of these goals can be rather challenging. This is where headless commerce can be a viable solution.

There are 5 major benefits to going headless with headless commerce:

  1. Improve Website Loading Speed and Performance
  2. Provide Customized Shopping Experiences
  3. Manage Multiple Storefronts in One Place
  4. Add eCommerce on Existing Content-Driven Websites
  5. Effective Search Engine Optimization

Improve Website Loading Speed and Performance

It is common for designers to use WordPress for the front-end of a website, but increased traffic and order volume can result in performance problems with a CMS and plugin approach. eCommerce customer studies have shown that site visitors who wait longer for a page to load are less likely to purchase. By using a dedicated service for order processing and catalog management, the website loads and responds quickly.

Provide Customized Shopping Experiences

To attract more shoppers, online businesses have been experimenting with new ways to showcase their products. A unique and custom shopping experience that goes beyond the typical online storefront template is one way brands try to set themselves apart from their competition. A company might want to use its UX to inspire excitement or curiosity in a shopper, so the shopper will identify those feelings with said-company.

Having a separate storefront from an eCommerce backend allows designers to work with whichever presentation platform or programming language best suits the brand’s objectives. With a headless strategy, merchants can combine the flexibility, speed, stability, and ease-of-use of a SaaS service with the design freedom of their favorite CMS or custom Javascript application.

Manage Multiple Storefronts in One Place

A headless commerce setup allows stores to maintain a single, centralized catalog that coordinates and communicates product information between multiple places, including their primary web storefront and regional or localized storefronts. These channels all send orders to a central order management system.

  • A single source-of-truth helps keep inventory levels consistent across channels and keeps product data current.
  • When orders can be managed in one place, they can be processed more efficiently, which can allow more orders to be processed simultaneously.
  • Customer service teams can provide better support since they can find all order details in one place, regardless of where the order originated.

Add eCommerce on Existing Content-Driven Websites

A headless integration can turn an existing content site into a commerce-enabled site due to its modular nature. The ability to enable commerce on CMS-based content sites can be enhanced by plug-ins, but this typically comes at the cost of web page load speed and overall website performance. Instead of replatforming and starting over from scratch, headless commerce can take an already-existing website and upgrade it to one that is eCommerce-ready. This will significantly reduce the downtime that would normally be necessary with a website launch while maintaining SEO ranks with the existing content.

Effective Search Engine Optimization

Site speed is an important ranking signal for search engines, so it’s important to separate frontend and backend processes into separate servers. As developers can use any frontend platform in the stack, they can decide how to implement their SEO strategy related to site design.

Key Features of Catalyst

BigCommerce’s CLI allows merchants to use Catalyst to build a fully functional storefront without having to connect APIs or build eCommerce components from scratch that are optimized for SEO, accessibility, and performance. Because Catalyst takes care of the essentials, sellers can build their brands and add features that make their websites stand out.

eCommerce Functionality

A production-ready B2C sales funnel is available from Catalyst, including home page, faceted search on product listing pages, full-text search, product detail pages, shopping cart, and a secure redirected separate checkout page that can be made to match the styling of the core Catalyst storefront.

Platform Feature Support

BigCommerce’s storefront reflects changes made by users through the store control panel or APIs.

Complex Catalog Support

There are no limitations to the size, complexity, or update frequency of product catalogs supported by Catalyst.

Scalable GraphQL Implementation

Scalable GraphQL Storefront API implementation is available in Catalyst.

Minimal Infrastructure Dependencies

Any Node.js-compatible hosting provider can host Catalyst.

Take Full Advantage of Next.js Features

React server components and Suspense boundaries are used in Catalyst for partial pre-rendering.

Components

Catalyst offers pre-optimized site architecture for SEO, performance, and accessibility, as well as functionally complete eCommerce components.

Optimized Shopping Experiences

Catalyst enables logged-in customers to experience dynamic experiences and provide a speed-optimized guest shopping experience.

Secure Checkout

Using BigCommerce’s hosted SaaS environment, Catalyst uses an optimized one-page redirected checkout to simplify PCI compliance. It does not collect or transmit personally identifiable information (PII) by default.

Further Reading

In the digital commerce world, BigCommerce’s Catalyst is more than simply a technology–it is also an important strategic ally for businesses trying to succeed. This framework provides a solid foundation for creating exceptional eCommerce experiences through its comprehensive features, developer-centric approach, and integration with Makeswift. Learn more about BigCommerce’s new Catalyst open-source headless framework in these articles:

Leave a Reply

Your email address will not be published. Required fields are marked *