GraphCommerce

GraphCommerce is a framework for building headless ecommerce storefronts in React and Next.js. It provides a best-in-class example, including components and utilities, to deliver a high-performance, high-quality ecommerce Progressive Web App (PWA).

Get started with GraphCommerce in minutes

https://user-images.githubusercontent.com/1251986/226889542-ec403549-5e4f-4ff6-8fc5-ba879798353f.mp4

The GraphCommerce homepage, showcasing content from both Magento and Hypgraph through a variety of included UX components.

Build your custom storefront

🎉 Getting Started

Get up and running with a new GraphCommerce storefront.

⚙️ Configuration

Connect your magento backend and discover all configuration options available.

🌎 Internationalization

Configure your GraphCommerce storefront for multiple countries and languages.

✅ Customization

Follow the GraphCommerce tutorial series to go from "Hello World" to a fully built out custom storefront.

⭐️ SEO

Optimize your GraphCommerce storefront for search engines and social networks.

🧡 Magento extentions (soon)

Learn how to imlement any GraphQL compatible Magento extention.

🔌 GraphCommerce Plugins

Extend Graphcommerce with simple to highly complex functionality, while ensuring compatibility with future upgrades.

🔮 Hygraph component

Build a custom Hypgraph component to showcase content according to your specific preferences.

Testing and going live

☁️ Deployment to Vercel

Vercel is GraphCommerce's recommended deployment platform for GraphCommerce storefronts.

⚡️ Self Hosting (soon)

Deploy a GraphCommerce storefront to other hosting providers.

Support

🚦 Troubleshooting

No success? Refer to the troubleshooting page for common errors.

📖 Upgrading

Follow step-by-step instructions to upgrade to the latest version.

🫶 Slack Community

Ask your question in the public Slack community channel.

Features

GraphCommerce provides all features needed to deliver a high-quality ecommerce experience.

In addition, it offers a solution for all larger, technically complex challenges that come with headless e-commerce:

👉 Static generation (SSG) and optimized performance through its utilization
👉 Continuity: built with industry-standard technology, libraries, and packages
👉 A fully-featured, component-based, Magento-compatible front-end
👉 Easy to extend, modify, and theme
👉 Ready for Magento modules that extend the GraphQL API
👉 A-Z optimized front-end performance
👉 Multilingual Magento multi-store support
👉 Fully SEO-optimized
👉 70-90/100/100/100+PWA PageSpeed Metrics
👉 Includes multilingual headless CMS implementation
👉 Fully runs on Magento's GraphQL API (0 modifications, plug-and-play)

Currently, GraphCommerce can only be used to build headless Magento 2 storefronts.

FAQ

Is GraphCommerce a Magento PWA theme?

GraphCommerce is not a Magento PWA theme, nor is it a Magento 2 PWA extension. A Magento theme is tightly integrated in the Magento codebase, where a GraphCommerce storefront runs as a separate application.

GraphCommerce can be deployed on the same or a different server than the Magento backend is hosted on. All data is fetched from the Magento 2 GraphQL API. Once you finish GraphCommerce Magento PWA development and you are ready to launch, the regular Magento front-end (theme and extensions) can be decommissioned.

Is GraphCommerce a PWA Studio Magento 2 alternative?

Yes, GraphCommerce is suitable as an alternative to Magento 2 PWA Studio. GraphCommerce is built with modern, open-source javascript frameworks and libraries. Unlike PWA Studio for Magento 2, it features an app-like e-commerce user interface, Hybrid Static Site Generation (SSG) and has the ability to fetch data from multiple sources (composable commerce). Get started with GraphCommerce if you're looking for a PWA Studio Magento 2 alternative and would like to start with Magento PWA development.