Partners

Headless CMS eCommerce Starter by DatoCMS

Introducing the new DatoCMS eCommerce Starter

Posted on February 15th, 2024 by Ronak Ganatra

TLDR

We’ve just released a brand new shiny eCommerce starter, which we believe is one of the best ways (together with the SaaS Website Starter) to get familiar with everything DatoCMS.

Check out the live demo!

This example is completely open sourced, so you can also fork the repo to make any larger adjustments for yourself!

About the Starter

The DatoCMS eCommerce starter is a real-world reference application focused on showcasing a product inventory, illustrating how to build an eCommerce shop with a Headless CMS.

The starter offers you typed GraphQL queries, Tailwind, localization, Live Web Previews, real-time updates in Preview Mode, SEO/Readability analysis, and much more!

For the starter we’ve opted to skip out on hooking up too many external APIs, but if you’re looking to build a storefront, you’d likely want to check out some common plugins like Shopify or Commercelayer to adapt this project into something more tuned to your use-case.

Features

Aside from some cool Onesies and Sundresses, the Dato Clothes shop comes with some pretty cool features out of the box.

  • TypeScript Next.js 13 website with App Router (app) — using DatoCMS as the data source.

  • GraphQL CodeGen to type all of the requests coming from Dato automatically

  • One-click deploys to Vercel or Netlify

  • Content Modeling best practices, including usage of our new Frameless presentation mode for Single Blocks, an intuitive and flexible approach to page building uses modular content and blocks, and a wide variety of field types including plugins and geolocation fields.

  • Localization into 8 languages

  • Common eCommerce CRM content types for cookie banners, popups, and more.

  • A “Layout” model approach to give editors a single command center to establish branding, terminology, and more.

  • Fully-fledged asset management with best practices on image optimization using Imgix.

  • Live previews and live draft updates

  • Headless CMS SEO best practices with web previews and metadata.

Take the starter for a spin and let us know what you think!