Gatsby + BigCommerce + Netlify CMS Starter

The Gatsby + BigCommerce + Netlify CMS Starter is a JAMstack ecommerce boilerplate from BigCommerce that pairs a Gatsby v2 frontend with a BigCommerce backend and Netlify CMS for content editing.

What is the Gatsby + BigCommerce + Netlify CMS Starter

The starter is an open-source project that wires a BigCommerce store's product data to a Gatsby static site and adds Netlify CMS for managing page and blog content. It takes a BigCommerce instance with API credentials as input and produces a deployable, single-language storefront on Netlify. The project is maintained by BigCommerce and is based on the Gatsby Netlify CMS Starter from netlify-templates.

Key Features

This starter brings together Gatsby v2, BigCommerce, Netlify CMS, and a Netlify deployment pipeline in a single boilerplate.

• Gatsby v2 static site — Uses Gatsby v2 to generate a React-based storefront with fast static pages and a product catalog pulled from the BigCommerce API.
• Netlify CMS content editing — Includes Netlify CMS with registered preview templates for index, about, products, and blog pages, letting editors manage non-product content.
• BigCommerce API integration — Relies on the BigCommerce source plugin and dotenv; you copy SAMPLE.env to .env and add your API keys.
• Netlify deployment workflow — Supports the Netlify CLI (netlify link, npm run build, netlify deploy) and a one-click deploy button that creates a GitHub repo and deploys to Netlify.
• Optional media libraries — Uploadcare and Cloudinary media library integrations are included but can be commented out in src/cms/cms.js.
• PurgeCSS-optimized Bulma styling — Uses gatsby-plugin-purgecss with Bulma, reducing typical ~170K CSS builds by 90%.
• Multi-channel branch — A separate multi-channel branch supports multiple regions within one storefront; the main branch is single-language only.

Who is it for?

The starter is aimed at developers and teams building storefronts on the JAMstack with BigCommerce as the commerce engine.

• Developers building a JAMstack ecommerce storefront who want a working BigCommerce + Gatsby integration rather than wiring it from scratch.
• Agencies and freelancers that need a quick starter to deploy on Netlify for client projects, with content editing handed to the client through Netlify CMS.
• Ecommerce teams that already use BigCommerce and want a static frontend with the performance and security benefits of the JAMstack.

What can you do with it?

With this starter you can go from an empty BigCommerce API key to a live Netlify-hosted storefront in a few steps.

• Developers: clone the repo, set BigCommerce API keys in a .env file, and deploy via the Netlify CLI or the one-click deploy button.
• Content editors: log into Netlify CMS with Netlify Identity to edit the homepage, about, products, and blog templates using live previews.
• Store owners: keep managing products, inventory, and cart in BigCommerce while serving the storefront as a static Gatsby site on Netlify.

How does it work?

To set up locally, copy SAMPLE.env to .env and fill in BigCommerce API credentials, run yarn to install dependencies, then npm run build and npm run serve to test the production build and CMS. For a hosted setup, use the Netlify one-click deploy button, then add the required environment variables in Netlify's Build & Deploy settings and configure Netlify Identity for CMS authentication.

Pros and cons

The starter has clear benefits and a few setup caveats listed in the repository.

• Pros: free open-source starter; official BigCommerce example; one-click Netlify deployment; optional media libraries; PurgeCSS reduces Bulma CSS from ~170K by 90%.
• Cons: initial Netlify deploy fails until build environment variables are set; Windows users may hit node-gyp errors during npm install and need Python 2.7 plus Visual C++ build tools; main branch is limited to a single-language storefront.

FAQ

Does this starter use Gatsby v2?

Yes, the repository explicitly notes "This starter uses Gatsby v2," so the frontend is built on the older Gatsby 2 major version rather than Gatsby 4 or 5.

What are the prerequisites to run it?

You need Node v10.16.3 (recommended), the Gatsby CLI, the Netlify CLI, and a BigCommerce instance with API keys. A free BigCommerce trial includes API access.

Why does my one-click deploy fail initially?

The first deploy fails because the Netlify site does not yet have the BigCommerce API environment variables set. You must add the variables listed in SAMPLE.env under Build & Deploy settings, then redeploy.

Can I use this for a multi-region storefront?

The main branch is designed for a simple single-language storefront. A separate multi-channel branch exists that supports multiple regions within a single storefront, if you need that.

How do I access the CMS locally?

You need to run a production build first: npm run build, then npm run serve. This serves the site locally with the Netlify CMS available, assuming you have set up authentication and hosting via the Netlify CMS Quick Start Guide.