ChopChop Shop

ChopChop Shop is an open-source Next.js starter kit for headless commerce that ships a complete storefront, cart, and Stripe-powered checkout on top of Commerce.js, with one-click Vercel deployment.

What is ChopChop Shop?

ChopChop Shop is an open-source, Next.js-based starter kit for headless commerce, built by the Commerce.js team. It takes a Commerce.js account and Stripe test keys as inputs and produces a working e-commerce storefront, shopping cart, and checkout flow with sample products already loaded. The demo sells fine tools for thoughtful cooks and is deployed live at https://commercejs-chopchop-demo.vercel.app.

Key Features

• Next.js framework — Server-rendered React pages for a storefront, product listing, cart, and checkout, structured for easy customization.
• Commerce.js integration — Reads products, categories, and assets from the Chec Dashboard via a public API key; includes a seeder that installs 3 categories, 6 products, and 9 assets.
• Tailwind CSS styling — Utility-first CSS for rapid UI changes without leaving your components.
• Stripe checkout — Pre-integrated with Stripe Elements; requires your NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY in the .env file.
• One-click Vercel deploy — Deploys automatically from GitHub through Vercel's project creation flow with environment variables entered during setup.
• Chec CLI support — The chec demo-store command installs dependencies, sample data, and starts the dev server.
• Google Analytics ready — Optional NEXT_PUBLIC_GA_TRACKING_ID variable enables GA tracking.
• Extensible checkout — Use the Commerce.js manual gateway API to build custom payment flows, add Algolia search, or connect a headless CMS.

Who should use ChopChop Shop?

• Developers who want a reference implementation of a headless commerce storefront with Next.js, Commerce.js, and Stripe working together.
• Agencies that need a pre-built starter to spin up client e-commerce sites quickly, pre-wired for one-click deployment.
• E-commerce founders who want a live storefront with sample data to learn how the Commerce.js API and the Chec Dashboard interact.

What can you do with ChopChop Shop?

• Skip boilerplate setup: Deploy the entire store to Vercel in one click, add your API and Stripe keys, and start selling.
• Learn headless commerce patterns: Read the code to see how products are fetched from Commerce.js and how checkout is handled with Stripe Elements.
• Customize the brand: Swap Tailwind classes and product data to match your own store; sample data illustrates categories, products, and assets.
• Extend beyond products: Add Google Calendar bookings, SMS webhook notifications, customer login via the Commerce.js customers endpoint, and related-product upsells from the Chec Dashboard.

How does ChopChop Shop work?

There are two primary setup paths. The fastest is the Chec CLI: run chec demo-store, select "Chop Chop demo store (Next.js)" from the list, and the CLI installs dependencies and sample data and starts the dev server; you then add your Stripe publishable key and re-run npm run dev. For manual setup, clone the repository, run npm install, copy .env.example to .env, fill in the Commerce.js public API key, Stripe test key, and optional Google Analytics ID, then run npm run seed to populate 3 categories, 6 products, and 9 assets before launching.

FAQ

Is ChopChop Shop free to use?

Yes — the repository is open source under the BSD-3-Clause license. You still need your own Commerce.js account and Stripe account to run the store.

Is this project still maintained?

The repository is no longer actively maintained, but the maintainers accept issue reports and contributions. The README points to the latest Commerce.js API documentation for up-to-date APIs.

What environment variables do I need?

You need NEXT_PUBLIC_CHEC_PUBLIC_API_KEY (from the Chec Dashboard), NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY (from Stripe), and CHEC_SECRET_KEY for the seed script. NEXT_PUBLIC_GA_TRACKING_ID is optional for Google Analytics.