Developer preview
This is a developer preview of GraphCommerce. The documentation will be updated as GraphCommerce introduces new features and refines existing functionality.


GraphCMS is integrated as a Content Management System. It is used to store all static content and provides a user-friendly interface for managing it.

The magento-graphcms example offers a number of components to render this content in different ways, for example in the form of a page-wide hero banner, a list of USPs or grid of text columns.

This guide covers how to configure GraphCMS and how to build rich content pages by adding GraphCMS content to pages.


To connect your GraphCommerce app to your GraphCMS project, you'll need a GraphCMS project with the required schema. Clone the demo GraphCMS project ↗ as your starting point. Update the variable in the /.env file:

GraphCMS API URL. Once logged in, copy it from Project Settings > Api Access > Content API

Adding content to pages

GraphCommerce uses Next.js file-based routing ↗, built on the concept of pages. When a file is added to the /pages directory, it's automatically available as a route. Magento category routes are handled by the /pages/[...url].tsx page.

To add GraphCMS content to, for example, a category page, create a Page entry in GraphCMS and match the value of the URL field with the route of the page you wish to add content to.

For example, the content of the 'men' Page entry in GraphCMS:

Page entry in GraphCMS

Is used to add aRowProduct (variant:Grid) and a RowProduct (variant:Backstory component to: http://localhost:3000/men

Content of the RowProduct component

Content of the RowProduct (variant:Backstory component)

Front-end render of the component

Next steps