📚 Docs | 🗣 Slack | 📝 Release notes

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).

GraphCommerce Demo's:

• GraphCommerce Demo: Magento 2.4.7 + Hygraph + Contained sidebar layout + Algolia (canary branch)
• GraphCommerce Demo: Magento 2.4.6 + Hygraph + Full width layout
• GraphCommerce Demo: Magento 2.4.7 + No CMS

GraphCommerce Pro

GraphCommerce Pro is the paid verison of GraphCommerce, default Open Source license is €1000 per year, please contact us for a license. For Adobe Commerce its €2500 per year. Multi year bundles available.

• GraphCommerce Pro Demo: Magento 2.4.7 +
• GraphCommerce Pro Demo: Adobe Commerce 2.4.7 + Pagebuilder + Returns, Store Credits, Gift Cards, Reward Points

Please note that Pagebuilder is also available for Magento Open Source, just not available in the Open Source demo.

Explore the GraphCommerce demo or start building your custom GraphCommerce ecommerce frontend.

home.mp4

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

---

Getting started with GraphCommerce

In this guide, you will set up a GraphCommerce app locally, allowing you to start building.

Requirements

• Install and use node 16/18: nvm install 16 or nvm use 16
• Install yarn: corepack enable

Step 1: Create a GraphCommerce app

git clone -b main --depth 1 https://github.com/graphcommerce-org/graphcommerce.git
# Clone repository

mkdir my-project
# Create project folder

cp -R graphcommerce/examples/magento-graphcms/. my-project && rm -rf graphcommerce && cd my-project
# Copy example, delete repo, navigate to project folder

Step 2: Configure API keys

(Optional, continue reading)

Step 3: Start the app

yarn
# Install the dependencies

yarn codegen
# Converts all .graphql files to typescript files

yarn dev
# Run the app

---

🎉 Explore your GraphCommerce app running at http://localhost:3000

(Explore the GraphQL Playground running at http://localhost:3000/api/graphql)

No success? Consult the troubleshooting guide

Next steps

• The Quick start guide covers about 80% of the concepts you'll use, so it's a great place to start.
• Start customizing to go from "Hello World" to a fully built GraphCommerce custom storefront.