Example projects to help you get started with Commerce.js.
Join our Slack · Read the Docs · Learn more about Commerce.js
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 |
| 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 |
| 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 | 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 | 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 |
| 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 |
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:
**Naming convention for demo repositories: **
commercejs-{FRONT-END}-demo-{SCOPE}
Examples:
- commercejs-nextjs-demo-cart
- commercejs-react-demo-store
- commercejs-react-demo-cart