Announcing the official GraphCMS eCommerce Starter

Ronak Ganatra
Ronak Ganatra
Jamie Barton
Jamie Barton
Jonathan Steele
Jonathan Steele

April 6, 2021

Announcing the official GraphCMS eCommerce Starter

Today we’re excited to share that we have a new official GraphCMS starter! An eCommerce shop built using GraphCMS, Next.js, and Stripe. The repository for this is open sourced, so you can quickly prototype and iterate on your own storefront.

Commerce Websites with GraphCMS

This project is an example of how to build a fully-functioning Next.js commerce storefront with GraphCMS and Stripe. View the demo on https://commerce.withheadlesscms.com.

Features

Get started with using the starter by reading our guide →

How it’s built

GraphCMS

GraphCMS acts as both the CMS and the PIM in this case. All the products and their variations are created with GraphCMS, with assets served from GraphCMS’s Assets API.

GraphCMS Localization

Taking advantage of GraphCMS Localization and Next.js, this reference is localized into English and German.

The GraphQL Mutations API serves as a way for product reviews to be fed back into GraphCMS, as well as for the checkout.session.completed event on orders via Stripe, to enable GraphCMS fulfilment if needed. This requires a Stripe webhook setup.

Although not covered in this reference, all customer and store owner email notifications can easily be sent to Postmark using GraphCMS webhooks to trigger a delivery/CRM flow.

Next.js and Vercel

Pre-rendered catalogue pages are handled via getStaticProps and getStaticPaths, with Dynamic client-side data fetching using SWR.

function ProductPage({ product }) {
return (
<React.Fragment>
<SEO title={product.name} {...product} />
<ProductPageUI product={product} />
</React.Fragment>
)
}
export async function getStaticPaths({ locales }) {
let paths = []
for (const locale of locales) {
const { products } = await getAllProducts({ locale })
paths = [
...paths,
...products.map((product) => ({
params: { slug: product.slug },
locale
}))
]
}
return {
paths,
fallback: false
}
}
export async function getStaticProps({ locale, params }) {
const pageData = await getPageData({ locale })
const { product } = await getProductBySlug({
locale,
slug: params.slug
})
return {
props: {
product,
...pageData
}
}
}
export default ProductPage

This reference application is hosted on and deployed using Vercel.

react-use-cart and Stripe

The reference uses react-use-cart to provide a localized shopping cart.

Following this, Stripe handles the billing and checkout for all orders. Once a successful order is placed, we use the GraphCMS mutation API with API Routes to create orders on successful checkout.

GraphCMS Orders

This is done after setting up a Stripe webhook for the checkout.session.completed event, to enable the possibility of fulfilment via GraphCMS, using the mutation API.

Get Started

Get Started

Take the Commerce starter for a spin and share your feedback with us! We can’t wait to see what you build.

Create a free GraphCMS account and spin up your own eCommerce website →


It's easy to get started

GraphCMS plans are flexibly suited to accommodate your growth. Get started for free, or reach out to our sales team to discuss larger projects with more complex needs

This site uses cookies to provide you with a better user experience. For more information, refer to our Privacy Policy