# Introducing the new DatoCMS eCommerce Starter

Posted on [date: 2024-02-15T02:00:00.241+01:00] by Ronak Ganatra

## TLDR

We’ve just released a brand new shiny [eCommerce starter](https://www.datocms.com/marketplace/starters/ecommerce-website.md), which we believe is one of the best ways (together with the [SaaS Website Starter](https://www.datocms.com/marketplace/starters/marketing-website.md)) to get familiar with everything DatoCMS.

[Check out the live demo](https://ecommerce-website-demo-blond.vercel.app/)!

This example is completely open sourced, so you can also [fork the repo](https://github.com/datocms/ecommerce-website-demo/tree/main) 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.

(Video content)

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](https://dashboard.datocms.com/deploy?repo=datocms%2Fecommerce-website-demo%3Amain) and let us know what you think!