Catalyst is the fully customizable, composable storefront and framework for BigCommerce. As a fully built storefront and toolkit officially engineered and maintained by BigCommerce, Catalyst jumpstarts your composable development, allowing you to skip the step of creating a boilerplate e-commerce experience and move straight to making it your own with custom branding and features.
Catalyst is an open-source, practical starting point, built on the best modern tools and focused on giving you the flexibility to develop the way you want. With the built-in, powerful visual editor, Makeswift, Catalyst offers distinct lanes for developers and marketers. You can accomplish rich and creative content designs without code, while developers still have the full power of customization to build new interactivity and integrations.
Key highlights of Catalyst
- A fully functional storefront within seconds
- Optimized for SEO and accessibility
- Fine-tuned performance, with market-leading Lighthouse scores
- Built on popular, best-of-breed tools that development teams love to use
- Instantly customizable, ready for seamless integrations for every business need
- Pre-built integrations for major search and CMS providers
The Bigcommerce Catalyst Tech Stack
The backbone of Catalyst is a limited set of tools that have wide adoption and popularity in enterprise web application development. This means developers can build on top of Catalyst with the frameworks and languages they already love to use. The Catalyst tech stack includes:
Next.js
The Catalyst storefront is, at the simplest level, an opinionated Next.js application, and Next.js is a full-stack web framework built on React. Note that Catalyst uses the Next.js App Router architecture, which differs in significant ways from the legacy Pages Router.
React Server Components
React is a traditional front-end language, handling the work of rendering a UI in the user’s browser. Frameworks like Next.js use server-side rendering of React components for full page loads. Meanwhile, the traditional Pages Router architecture still has a rigid separation between “server only” logic, like server-side data fetching, and the components responsible for rendering. This hard line between back-end logic and rendering is fairly typical of traditional web frameworks.
The App Router enables the use of React Server Components. The logic within Server Components always executes on the server side. A component renders its JSX (the React presentation code) into HTML on the server or executes it on the client side along with a payload from the server, while keeping all other component code hidden from the browser.
Tailwind
Tailwind CSS is a popular CSS framework that enables rapid and reliable styling and visual layouts with a system of utility classes. With Tailwind, instead of writing raw CSS, you chain together utility classes to accomplish the styling you need. Next.js uses Tailwind by default, and Catalyst components fully embrace Tailwind styling.
GraphQL
GraphQL is the industry standard for efficiently querying data because of its capability to fetch multiple data points in one API call. This is what sets GraphQL apart from REST APIs, where multiple API calls can slow down your site.
BigCommerce GraphQL Storefront API
BigCommerce’s GraphQL Storefront API makes it possible to efficiently query storefront data to support high-performing headless storefronts. BigCommerce’s GraphQL Storefront API is designed with this in mind, enabling faster data retrieval that keeps headless experiences both responsive and scalable. GraphQL Storefront API allows you to get shopper data from the perspective of a customer in a channel – that means their pricing, product availability, etc. If you hide a product on the basis of channel or customer group, that automatically reflects in the API, and you can get all that information in one API call. With the GraphQL Storefront API, it is possible to:
- Fetch catalog data such as product options, variations, custom fields, categories, brands, metafields, and more
- Fetch customer data such as name, email address, and attributes (if logged in)
- Query and manage a cart and checkout, including specifying complex product options for items being added to the cart
- Get real-time storefront data from the perspective of a customer and channel, such as customer-specific pricing in the shopper’s currency and product availability.
- Authenticate customers
Out-of-the-Box Features of Catalyst
The current release of Catalyst provides a fully functional implementation of the most critical workflows for an e-commerce storefront. Catalyst’s features include:
- Full integration with the Makeswift visual editor for both dynamic and static pages
- Available integrations with popular search and CMS providers
- Product listing pages, powered by BigCommerce brands and categories, with faceted filtering
- Textual search
- BigCommerce catalog powers your dynamic product detail pages.
- Product compare
- Customer registration and login, with customer-aware catalog visibility and product pricing
- Customer account features, including address book, password reset, wishlists, and order history
- Full support for coupons and promotions
- Persistent cart, restoring a registered customer’s cart in progress when logging in on other devices
- Redirected checkout on BigCommerce’s hosted SaaS environment, which simplifies PCI compliance by making sure sensitive payment information is never transmitted through your headless storefront
- Multiple storefronts and multi-language content
- Built-in Google Analytics support
Catalyst and Makeswift
Catalyst comes with built-in support for Makeswift, a composable visual editor designed to equip marketers to create rich, high-quality web experiences without the friction of steep learning curves or never-ending development cycles. With Catalyst as a fully implemented headless storefront and Makeswift as a premier content editing experience, you have a truly powerful enterprise-level composable toolkit. You can include the built-in Makeswift integration while installing your Catalyst codebase.
Please contact us at manish@bay20.com or call us at +91-8800519180 for any support related to Bigcommerce. You can also visit the Bigcommerce development page to check the services we offer.
