Commerce.js Examples

Example projects to help you get started with Commerce.js.

Join our Slack · Read the Docs · Learn more about Commerce.js

Examples

We have broken down our examples into categories with descriptions:

Example	Description	Where are these hosted?
Demo stores	Open source demo stores for you to fork, pull apart and build on top of
Code Examples	Examples of granular eCommerce functionality demonstrated via IDE editors/code playgrounds	CodePen CodeSandbox Community docs page
Guides	Step-by-step guides on eCommerce functionality and instructions on using other Commerce.js tools	Blog Community docs page
Tutorials	Step-by-step tutorial of building a full Commerce.js app with products list, cart and checkout flow	Blog Community docs page
Videos	Short sharp video guides demonstrating how to use the Commerce.js SDK to build projects	Youtube

Demo stores

Examples	Description
Next.js - ChopChop starter kit	Open source demo and starker kit built with Next.js and Commerce.js. One click deploy to Vercel, read the blog
Next.js - Fullly fledged eCommerce store	Open source demo store that can be one click deployed to Netlify. Read the integration blog
Next.js - Fully fledged eCommerce store	Open source demo store that can be one click deployed to Vercel
Vue.js - Shoppable campaign demo	Boilerplate and live demo
React.js - Socks and Shoes demo	Lightweight demo store in React.js
Vue.js - Socks and Shoes demo	Lightweight demo store in Vue.js
Ionic - Native mobile application	ChopChop demo for Android and iOS using Ionic Framworkd

Code Examples

Examples	Description
React.js + Three.js - Product display	Displaying a Three.js product animation in a React app
React.js + Three.js - Interactive cart	An interactive cart with Three.js renderend products
React.js + Three.js - Animated checkout form	An animated, interactive checkout form
React.js - Product catalogue	A simple product catalogue built with Commerce.js SDK v2 and React.js
Vue.js - Full eCommerce app	A complete eCommerce app with cart, checkout and receipt
Vue.js - Product catalogue	A basic product catalogue built with Commerce.js SDK v2 and Vue.js
Vue.js - Product card	A product card layout built with Commerce.js SDK v2 installed as CDN
Vue.js - Add to Cart	A cart with cart total display built with Commerce.js SDK v2
Vue.js - Cart Modal	A cart application built with Commerce.js SDK v2
Vue.js - Checkout	A checkout for capturing orders built with Vue.js and Commerce.js SDK v2
HTML + CSS - Checkout	A vanilla checkout form, built with the Commerce.js SDK v2 installed as a CDN

Guides

Guides	Description
Chec CLI	Guide on getting started with using the Chec CLI
Email receipt template	Create an email order receipt using MJML
Email - Adding customers to Drip at checkout	Add your customers to Drip for more contextual email marketing
Webhooks - Slack notifications for new orders	Get notified via Slack when you receive new orders
Webhooks - Twilio notifications for new orders	Recieve SMS notificatons via Twilio when a new order is placed
Nuxt.js - Listing products in a catalogue	Create a simple Vuex store and rendered your data server-side using Nuxt.js
Nuxt.js - Adding products to a dynamic cart	Create a dynamic sliding cart and add products to it using Nuxt.js and Commerce.js SDK
Nuxt.js - Creating a checkout	Build a simple checkout using Nuxt.js and Commerce.js
Nuxt.js - Order confirmation and webhooks	Create a webhook to send an email via SendGrid to the customer after the checkout
Vue.js - Adding products to a cart	Create a simple shopping cart for your Vue.js app
Vue.js - Handling the checkout	Create a checkout form to capture an order in Vue.js
React.js - Displaying products in a catalogue	Display products in your React app
React.js - Listing products in a catalogue	Using React and Bootstrap, list your products with the Commerce.js SDK
React.js - Adding products to a cart with reccomended products	Create a simple cart for a React.js app that also displays recommended products
React.js - Adding products to cart	Create and add products to cart in your React eCommerce app
React.js - Creating a single page checkout	Build a single page checkout with Stripe and the Commerce.js SDK
React.js - Displaying a receipt + webhook notification	Create an order confirmation display to the customer plus build a webhook notification with Slack
Three.js - Building a product display page with React	Create a product display page with a Three.js rendered product image
Three.js - Creating a cart with React	Create an interactive cart with Three.js rendered products
Gatsby - Building static product pages	Build static product pages on the JAMstack with Gatsby and Commerce.js

Tutorials

Tutorials	Description
Vue.js demo store	A fully-fledged demo store handling eCommerce logic such as product catalogue, product variants, cart, checkout, and receipt confirmation built with Commerce.js SDK v2
Vue.js demo store	A simple demo store with a product catalogue, cart and checkout built with Commerce.js SDK v2
Nuxt.js storefront	Build a simple storefront with categories and individual product pages using Nuxt.js
Next.js - Create a Next.js store	Build a simple storefront with categories and individual product pages using Next.js
Gatsby - Create a Gatsby storefront	Build a simple storefront with categories and individual product pages using Gatsby

Videos

Video	Description
Nuxt.js - Storefront, categories and product pages	Build a simple storefront with categories and individual product pages using Nuxt.js
Next.js - Storefront, categories and product pages	Create a storefront with categories and individual product pages using Next.js
Gatsby - build a gatsby storefront	Create a storefront with categories and individual product pages using Gatsby
Svelte - build a store in Svelte	Create a storefront with categories and individual product pages using Svelte

Contributing to our resources

If you’d like to contribute with an example project you have developed using Chec API and the Commerce.js SDK, please refer to our template guidelines on writing guides and tutorial:

• Guide template
• Tutorial template

Internal

**Naming convention for demo repositories: **

commercejs-{FRONT-END}-demo-{SCOPE}

Examples:

• commercejs-nextjs-demo-cart
• commercejs-react-demo-store
• commercejs-react-demo-cart