diff --git a/docs/storefront/catalyst/features/supported-features.mdx b/docs/storefront/catalyst/features/supported-features.mdx new file mode 100644 index 000000000..0277d8c0c --- /dev/null +++ b/docs/storefront/catalyst/features/supported-features.mdx @@ -0,0 +1,58 @@ +# Feature Support + +Below is a list of major BigCommerce platform features, detailing what support exists in Catalyst. One important note when considering Catalyst feature support is that Catalyst is focused on working with the [GraphQL Storefront API](/docs/storefront/graphql) and not the [REST Management API](/docs/rest-management). This means that some features will not be supported out of the box in Catalyst until the functionality is available in the GraphQL Storefront API. However, you can still build custom implementations when necessary by leveraging the REST Management API. + +This list is not intended to be a direct feature parity comparison with [Stencil](/docs/storefront/stencil). However, it does provide a good overview when considering Catalyst vs Stencil. + +## Feature Support Status Legend + +- 🟢 **Green**: Natively supported in Catalyst +- 🟡 **Yellow**: Partially supported but might be missing functionality +- 🔴 **Red**: Not supported + +Since you have complete ownership of the code with Catalyst, you can custom build implementations of yellow and red features if you would like to. + +| Feature | Supported | Notes | +|---------|-----------|-------| +| [Banners](https://support.bigcommerce.com/s/article/Creating-Editing-Banners) | 🔴 | Use [Makeswift](https://www.makeswift.com) (or an alternative) instead. | +| Hosting by BigCommerce | 🔴 | Requires hosting on your own provider (ex. Vercel, AWS, Cloudflare, etc.). See the [Deploying a Catalyst storefront guide](/docs/storefront/catalyst/getting-started/deploying/overview) for more information. | +| [Meta Pixel](https://support.bigcommerce.com/s/article/Meta-Pixel) | 🔴 | | +| [Draft Orders](https://support.bigcommerce.com/s/article/Creating-a-Draft-Order) | 🔴 | Specifically, the ability for Catalyst to take a customer-facing Draft Order URL and apply it to the Catalyst session is not supported. | +| [Order Messages](https://support.bigcommerce.com/s/article/Communicating-with-Customers#Messages) | 🔴 | Specfically, the ability for a customer to add additional messages on the order details page after checkout is not supported. | +| Promotional Banners | 🔴 | | +| Returns / RMA | 🔴 | Recommended to use partner solutions (e.g., Happy Returns, Returnly, Loop Returns, AfterShip). | +| [Abandoned Cart](https://support.bigcommerce.com/s/article/Using-the-Abandoned-Cart-Saver?language=en_US) | 🔴 | Specifically, the ability for Catalyst to take a customer-facing Abandoned Cart URL and apply it to the Catalyst cart is not supported. | +| File Upload Product Option Type | 🔴 | | +| Product Videos | 🔴 | Can be custom-built using the GraphQL Storefront API | +| Express Wallet Buttons | 🔴 | Can be custom-built using the GraphQL Storefront API | +| [B2B Open Source Buyer Portal](https://github.com/bigcommerce/b2b-buyer-portal) | 🟡 | There is an **experimental** integration available. See the [Catalyst + B2B Buyer Portal](/docs/storefront/catalyst/experiments/b2b) guide for more information. | +| [App Support](https://support.bigcommerce.com/s/article/Apps-Video) | 🟡 | Back-office apps focused on backend and Control Panel functionality are supported in Catalyst. Additionally, any app that exposes APIs can be integrated with custom code. However, storefront apps that modify frontend storefront behavior most likely will not work with Catalyst. To learn more about app compatibility with Catalyst, read our [Building Catalyst compatible apps guide](/docs/integrations/apps/guide/catalyst-compatible-apps). | +| [Gift Wrapping](https://support.bigcommerce.com/s/article/Gift-Wrapping) | 🟡 | | +| Masquerading / Login as Customer | 🟡 | | +| Order Downloads | 🟡 | Use custom digital product fulfillment pipeline. Like agencies do for Stencil today. | +| Order Tracking Links | 🟡 | | +| [Saved Payment Methods](https://support.bigcommerce.com/s/article/Enabling-Stored-Payment-Methods) | 🟡 | | +| Sitemap | 🟡 | Catalyst does generate a sitemap for you, but it does not factor in routes that are not managed by BigCommerce. For example, it does not include routes that are created in Makeswift | +| In-app search | 🟡 | Catalyst does support search for BigCommerce products, but it does not factor in content that is not managed by BigCommerce. For example, it does not include content that is created in Makeswift | +| Session Syncing | 🟡 | Session can be synced from a headless storefront to a Stencil checkout. For example: you log in/out in headless then redirect to checkout. Session cannot be synced from a Stencil checkout to a headless storefront. For example: you log in/out in Stencil then redirect back. For more details, refer to the [Session Sync documentation](/docs/storefront/catalyst/development/session-sync). | +| [Scripts Manager](https://support.bigcommerce.com/s/article/Using-Script-Manager) | 🟡 | Although we don't think frontend script injection is the right way for most solutions to integrate into Catalyst - we think most people would be better served by writing Server Components - we have added Scripts into GraphQL Storefront API so they can be rendered in Catalyst when it does make sense, such as for analytics pixels. It's important to note that scripts with handlebar expressions built for Stencil will not work in Catalyst.| +| [ADA Compliance](https://support.bigcommerce.com/s/article/Accessibility-ADA-Compliance) | 🟢 | Our new design system for 1.0 was developed with constant Lighthouse testing for accessibility, but we are also commissioning a 3rd party accessibility audit and we will address any findings from that auditor. The audit results are expected in February. | +| [Cookie Consent for GDPR/CCPA](https://support.bigcommerce.com/s/article/Security-and-Privacy-Settings) | 🟢 | Added in [Catalyst 1.3](/docs/storefront/catalyst/release-notes/1-3-0)| +| [Product Reviews](https://support.bigcommerce.com/s/article/Customer-Groups) | 🟢 | Added in [Catalyst 1.4](/docs/storefront/catalyst/release-notes/1-4-0) | +| [Customer Groups](https://support.bigcommerce.com/s/article/Customer-Groups) | 🟢 | Support for customer group product visibility and pricing, powered by our GraphQL API. | +| [Gift Certificates](https://support.bigcommerce.com/s/article/Gift-Certificates) | 🟢 | Added in [Catalyst 1.3](/docs/storefront/catalyst/release-notes/1-3-0)| +| [Google Analytics (GA4)](https://support.bigcommerce.com/s/article/Google-Analytics-4-Events) | 🟢 | Integrated using BODL (Big Open Data Layer standard. Extendable for other analytics providers. | +| [Multi-storefront](https://support.bigcommerce.com/s/article/Multi-Storefront) | 🟢 | Catalyst is structured as a single-domain Next.js application, so it can only serve one domain per project out of the box. However, you can deploy multiple projects to serve multiple domains (similar to one-theme-per-domain on Stencil), and you can also wire up subpaths of the domain on Catalyst to serve either multi-language or separate channels. So, Catalyst exceeds Stencil in terms of the MSF scenarios it supports. Next.js itself does support multi-domain deployments and Catalyst could be customized to do this.

To learn more, check out the Catalyst Multi-storefront Guide | +| My Account / Orders | 🟢 | Supports profiles, addresses, and order history. Tracking links not included yet; downloadable product links not supported. | +| Native Analytics | 🟢 | We support three server-side sent events which are triggered in Catalyst middleware: visitStartedEvent, pageViewedEvent, and productViewedEvent. | +| [Newsletter Subscription](https://support.bigcommerce.com/s/article/Collecting-Newsletter-Subscriptions?language=en_US) | 🟢 | Added in [Catalyst 1.4](/docs/storefront/catalyst/release-notes/1-4-0)| +| Secure payment handling (for PCI DSS compliance) | 🟢 | Today, no payments information touches the Next.js application due to the use of redirected checkout, so the Next.js layer is kept out of PCI scope for the most part. As we figure out the path to add Saved Payment Methods into the My Account area, we will approach this with an embedded/iframe based approach to provide similar guarantees. | +| [Persistent Cart](https://support.bigcommerce.com/s/article/Persistent-Cart) | 🟢 | Login mutation will be extended to automatically restore and merge carts just like Stencil. | +| [Promotions](https://support.bigcommerce.com/s/article/Promotions-Video) | 🟢 | Promotional logic works in cart; some promo banners are not yet supported (separate item). | +| Single Storefront Multi-currency | 🟢 | Added in #1912, only supports transactional currencies for now, not display-only currencies. | +| Single Storefront Multi-geo | 🟢 | | +| Single Storefront Multi-Lang | 🟢 | Supports: static string translation via language files, translated product catalog (either within a single channel, or across channels) via localized subpaths, uses next-intl as localization framework, localization of content pages when built with Makeswift using Makeswift's existing localization capabilities.

To learn more, check out our Catalyst Multi-Language Guide | +| Synchronized login state between storefront and checkout; global logout | 🟢 | Enabled through Customer Access Token (CAT) used in Catalyst by default. | +| Visual Editing (Page Builder equivalent) | 🟢 | As of 1.0 Makeswift is deeply integrated into Catalyst on a distributable version of Catalyst; customers have the choice of either using Makeswift or selecting a version of Catalyst with no editor built in. | +| Wishlists | 🟢 | [Wishlist Catalyst documentation](/docs/storefront/catalyst/reference/wishlists) | +| Out of Stock Messages | 🟢 |Added in [Catalyst 1.4](/docs/storefront/catalyst/release-notes/1-4-0) | diff --git a/docs/storefront/choosing-a-storefront.mdx b/docs/storefront/choosing-a-storefront.mdx index a55639263..745de6e73 100644 --- a/docs/storefront/choosing-a-storefront.mdx +++ b/docs/storefront/choosing-a-storefront.mdx @@ -1,30 +1,24 @@ # Choosing the right storefront for your business -Choosing between Stencil, Catalyst, or a custom headless implementation can be an intimidating fork in the road. This guide will walk you through how to make the right choice and what to consider as you’re building. - -BigCommerce provides developers multiple ways to build and customize ecommerce storefronts, with two storefront styles officially supported and maintained by BigCommerce: Catalyst and Stencil. Both solutions cater to different developer needs and use cases, making it crucial to understand their differences and similarities when choosing the right approach for your project. Additionally, BigCommerce is well suited to building your own custom headless storefront with the tech stack of your choice. - -Catalyst and Stencil each serve distinct purposes in the BigCommerce ecosystem. If you’re looking for modern, API-first development with maximum flexibility, Catalyst is the way to go. On the other hand, if you prefer a more traditional, theme-based approach with minimal setup, Stencil remains a solid choice. - -Understanding the strengths and limitations of your options will help you make an informed decision when building your next BigCommerce storefront. - -Let’s dive into the details\! +BigCommerce provides developers multiple ways to build and customize ecommerce storefronts catering to different developer needs and use cases. This makes it crucial to understand their differences and similarities when choosing the right approach for your project. This guide will walk you through choosing between our primary storefront options, [Stencil](/docs/storefront/stencil/start) and [Catalyst](/docs/storefront/catalyst), as well as a custom headless implementation. ## What is Stencil? -Stencil is BigCommerce’s traditional theme engine, used for customizing storefronts within the BigCommerce platform. It’s an integrated, template-based design system that allows developers to build and modify themes using Handlebars.js templates, SCSS, and JavaScript. +Stencil is BigCommerce’s traditional storefront option, used for customizing storefronts within the BigCommerce platform. It’s an integrated, template-based design system that allows developers to build and modify themes using Handlebars.js templates, SCSS, and JavaScript. **Key Features of Stencil:** * Theme-Based Architecture – Uses predefined templates and layouts for easier customization * Fully Hosted – Runs directly on the BigCommerce platform without requiring external hosting -* Uses Handlebars.js for Templating – Simplifies frontend development with logic-less templates +* Uses Handlebars.js for Templating – Simplifies frontend development with templates * Integrated with BigCommerce's Backend – Handles checkout, cart, and product rendering without needing API calls * Optimized for Performance – Includes built-in caching and CDN delivery for fast load times ## What is Catalyst? -Catalyst is BigCommerce’s headless and composable Next.js-based reference storefront architecture, designed to provide developers with a modern, high-performance framework for building composable ecommerce experiences. Catalyst leverages Next.js, React, and BigCommerce’s GraphQL Storefront API, enabling flexibility and speed while maintaining full control over the frontend experience. Catalyst leverages Makeswift Visual Builder, which allows users to fully customize the layout and design of their storefront without needing to get developers involved. +Catalyst is BigCommerce’s headless and composable reference architecture for building modern, high-performance storefronts. Catalyst leverages Next.js, React, and BigCommerce’s GraphQL Storefront API, enabling flexibility and speed while maintaining full control over the frontend experience. Catalyst is also integrated with the [Makeswift Visual Builder](https://www.makeswift.com), which allows users to fully customize the layout and design of their storefront without needing to get developers involved. + +Catalyst is built with the [BigCommerce GraphQL Storefront API](/docs/storefront/graphql) which does not support all BigCommerce platform features. For a list of features and whether or not they are supported and to what extent in Catalyst, see the [Supported Features](/docs/storefront/catalyst/features/supported-features) page. **Key Features of Catalyst:** @@ -34,28 +28,32 @@ Catalyst is BigCommerce’s headless and composable Next.js-based reference stor * **Uses the GraphQL Storefront API** – Fetches product data, categories, and cart details via GraphQL * **Fully customizable** - Developers have full control over storefront design, UI/UX, client- and server-side functionality * **Supports modern development workflows** – Works seamlessly with Git-based version control, CI/CD, and composable commerce architectures +- **Requires hosting** - you are reponsible for hosting your deployed storefront code + +** Limitations of Catalyst:** -## What does a custom headless build look like on BigCommerce? +* **GraphQL Storefront API Limitations:** - The GraphQL Storefront API that Catalyst depends on does not support all BigCommerce platform features which means some features are not supported out of the box in Catalyst +* **Hosting:** - You are responsible for hosting your deployed storefront code +* **App Marketplace** - Apps from the App Marketplace are not all supported +* **Themes:** - Catalyst does not provide a theme marketplace to choose from. However, you can customise the existing theme in code or by using Makeswift -Building a headless storefront with BigCommerce’s GraphQL APIs enables a fast, flexible, and scalable ecommerce experience. By decoupling the frontend, you can use your preferred frameworks to create a dynamic, SEO-friendly site while BigCommerce powers commerce operations. The GraphQL Storefront API optimizes data fetching, improving performance and enabling seamless integrations. This modern, API-first approach allows for personalized experiences, custom checkout flows, and easy third-party integrations. +## Custom Headless -**Key Features of Headless Builds:** +While Catalyst is a headless implementation, if you'd like to build a storefront using a different tech stack, you can do that as well. Building a headless storefront with BigCommerce’s GraphQL APIs enables a fast, flexible, and scalable ecommerce experience. By decoupling the frontend, you can use your preferred frameworks to create a dynamic, SEO-friendly site while BigCommerce powers commerce operations. The GraphQL Storefront API optimizes data fetching, improving performance and enabling seamless integrations. This modern, API-first approach allows for personalized experiences, custom checkout flows, and easy third-party integrations. -* Numerous apps, integrations and plugins available and provide expanded functionality -* We recommend minimizing your plugin volume and keeping in mind that the most performant integration into BC isn’t going to be a plugin, but rather a direct integration into the platform (which is available with Catalyst) -## Key Differences Between Catalyst and Stencil +## Key Differences | Feature | Stencil | Catalyst | Custom Headless | | --- | --- | --- | --- | -| Architecture | Monolithic | Headless (Next.js) | Headless (Any framework) | +| Architecture | Monolithic | Headless (Next.js) | Headless (any framework) | | Frontend Tech | Handlebars.js, SaaS, JavaScript | React, Next.js, GraphQL | Any (React, Vue, Svelte, Angular, etc.) | -| Hosting | Fully hosted by BigCommerce | External (Vercel, AWS, etc.) | External (AWS, GCP, Vercel, Netlify, etc.) | -| API Usage | Directly integrated with BigCommerce backend | Requires GraphQL Storefront API for data | Requires Storefront API (GraphQL/REST) for data | -| Customization | Limited to custom templates and client-side functionality | Fully customizable | Fully customizable, but requires more development effort | -| Performance | Optimized via BigCommerce’s CDN | Optimized via SSR/ISR | Depends on implementation and hosting | -| Development Workflow | Theme customization via CLI | Git, CI/CD, and modern tooling | Custom CI/CD setup based on tech stack | -| Integration Support | Supports BigCommerce apps and some third-party integrations | Easier to integrate with external APIs and third-party services | Fully flexible, but integrations require manual setup | +| Hosting | Fully hosted by BigCommerce | External (Vercel, AWS, etc.) | External (Vercel, AWS, etc.) | +| API Usage | Directly integrated with BigCommerce backend | Storefront API (GraphQL) | Storefront API (GraphQL/REST) | +| Customization | Limited customization | Fully customizable | Fully customizable | +| Performance | Optimized via BigCommerce’s CDN | Optimized via caching | Manual optimization | +| Development Workflow | Theme customization via CLI | Git, CI/CD, and modern tooling | Git, CI/CD, and modern tooling | +| Integration Support | Supports BigCommerce apps and some third-party integrations | Integrate with external APIs and third-party services | Integrate with external APIs and third-party services | ## Choosing between these options @@ -71,8 +69,6 @@ Building a headless storefront with BigCommerce’s GraphQL APIs enables a fast, * A modern, composable approach with React and Next.js * Complete control over the entire frontend application * A flexible API-driven architecture -* Close alignment between marketing and development teams -* A fast time-to-market for a well-architected composable storefront **Choose a custom headless build if you need:** @@ -81,7 +77,7 @@ Building a headless storefront with BigCommerce’s GraphQL APIs enables a fast, ## Additional Resources: -* [Catalyst Documentation](https://www.catalyst.dev/) -* [Stencil Documentation](https://developer.bigcommerce.com/docs/storefront/stencil/start) -* [BigCommerce API Reference](https://developer.bigcommerce.com/docs/api) +* [Catalyst Documentation](/docs/storefront/catalyst) +* [Stencil Documentation](/docs/storefront/stencil/start) +* [BigCommerce API Reference](/docs/api)