< Back to blog

ChopChop, Next.js starter kit

Thinking back, what was the best IRL (in real life) retail experience you’ve ever had, and what made it memorable? Was it the design (decor, smell, sound) of the store? Maybe it was how comfortable you felt as you shopped, or perhaps it was how attentive the store staff were to your needs?

Businesses who create these memorable purchasing experiences for their customers leave indelible, positive, and loyal impressions in our minds. The same goes for digital experiences, and with the democratizing nature of the web, any business can now build premium customer experiences for their customers.

To demonstrate this, we’re excited to release a free and open-source resource for brands, agencies and developers.

Introducing ChopChop ChopChop commerce

ChopChop, fine tools for thoughful cooks

ChopChop is our beautifully designed, elegantly developed demo store and starter kit that sells fine tools for thoughtful cooks. We’ve created a premium brand with a commerce experience to match.

The TLDR

Motivation

In 2020 we saw headless commerce and the Jamstack really take off, with developers flocking to this new way of building, optimizing, and maintaining sites.

Last year in August we launched our first open source demo store to illustrate how our commerce APIs can be leveraged to build unique, high performance purchasing experiences.

Since we release our first demo store, there’s been the Next.js 10 release, we’ve written React hooks for cart and checkout, and the focus on commerce has intensified as more businesses look to differentiate and elevate their online presence.

An unreal, unique experience

ChopChop isn’t just a headless commerce resource for developers to consume, it’s a new standard for brands in a world where standing out has never been more important.

Let’s unpack the areas we went deep on.

A human brand experience

A pleasantly simple shopping experience that feels familiar to the customer, yet unique to the brand. ChopChop treats customers like family, not like an order number. chochop

Unique product discovery

Dynamic product display pages create a sense of depth and comfort as customers browse products. This dynamic pattern is something that only Next.js can deliver naturally. ChopChop product discovery

In the ChopChop moment

The PWA (progressive web app) feel to the site means there are no page loads, only transitions and interactions. This keeps the customer in the moment to discover, build intent and most importantly, buy. ChopChop in the moment

Notes in the bag

It’s the small things that count, and what makes API-first commerce so powerful for brands who care about their brand. You’ll notice that the add to cart buttons change based on the product being sold, and small notes are displayed to the customer throughout the purchasing journey. We had to stop ourselves getting too carried away but you get the idea. ChopChop notes in the bag

Cohesive checkout experience

There are no templated checkouts here, the ChopChop checkout is a continuation of the brand as it guides the customer through the most delicate part of the purchasing experience. You’ll also notice that the checkout changes based on the cart DNA. For example, if the Cooking Class product is in the cart, the checkout begins by asking customers to book a time + class message. ChopChop checkout

For developers

This open source Commerce.js demo is statically built with Next.js, uses Stripe for payment, and is one-click deployable to Vercel. Product data (assets, prices, descriptions) and logic are all handled by Commerce.js.

The power of Next.js allows us to create static pages at build time by simply exporting the functions getStaticProps and getStaticPaths inside our pages.

export async function getStaticProps({ params }) {
  const { permalink } = params;
  const product = await commerce.products.retrieve(permalink, {
    type: "permalink",
  });
  return {
    props: {
      product,
    },
    revalidate: 60,
  };
}
export async function getStaticPaths() {
  const { data: products } = await commerce.products.list();
  return {
    paths: products.map(({ permalink }) => ({
      params: {
        permalink,
      },
    })),
    fallback: false,
  };
}

Above we are fetching a list of products from Commerce.js, and following Next.js conventions to create paths, configure cache revalidation, and provide data to each of the dynamic pages.

The ChopChop demo leverages React context to store and mutate the current product theme (button colors), as well cart and checkout context to reduce network requests and latency for shoppers.

We’ve made this demo a shining example of both Next.js and Commerce.js, a powerful tech stack for high performance commerce experiences.

For Brands

ChopChop is a minimalist, fun, and human brand experience that demonstrates headless commerce isn’t just for enterprise brands with big budgets. Commerce.js is being used by businesses who need curated experiences and need stronger execution abilities over business model decisions, something templated eCommerce engines like Shopify can’t easily do.

Shout out to the incredibly talented team over at Virtually Real, a NYC based creative web agency, who helped craft the brand identity and design behind ChopChop — some words from their designer JBF who lead design for ChopChop.

"Taking a modern headless approach with Commerce.js gives us new options to fine tune a site’s tone and friction to really match the brand, context, products, and to actually add value in the process." - JBF

For Agencies

There tends to be a misconception that headless commerce projects are only for businesses who are doing upwards of ~10M in revenue. But that’s no fun! What about everyone else? Headless projects don’t need to be expensive and overly complex for clients. We think ChopChop illustrates this.

We’re taking the idea of approachable headless commerce one step further by adding a no-code layer to headless. This will allow agencies to build ChopChop like experiences that can then be handed over to clients (non-developers) where they make changes to the whole experience. Check out Commerce Rays if you like the sound of this, and get in touch with us if you’d like to leverage our headless theming engine for your client work.

Make ChopChop your own

This is an open source demo that can be freely downloaded, built on top of, pulled apart, and rebranded. You can also;

  • Integrate another payment gateway, either one of our supported gateways or your own with our manual gateway API
  • Integrate with the Google Calendar API to automatically add ticketed items to a customer’s calendars
  • Suggest products from other sources based on items purchased, i.e. a book on knife skills if you buy the knife set
  • Add Algolia for integrated search
  • Add additional modules to the checkout flow to handle other content types, like booking a time to pickup in-store purchases
  • Integrate with a CMS to make the content editable
  • Create a customers login section using our customers endpoint
  • Use webhooks to deliver SMS notifications about orders

ChopChop, what are you waiting for?

There’s never been a better time to level up your customer experience or build a modern commerce site, so what are you waiting for? Create your free account with Commerce.js, or checkout the demo store on our GitHub.