React Templates & Themes Logo React Templates & Themes
Sanity Template Nextjs Ecommerce screenshot

Sanity Template Nextjs Ecommerce

Author Avatar Theme by Sanity io
Updated: 10 Oct 2022
75 Stars

Github Live Preview

Categories

Nextjs Tailwind Sanity

Overview:

The Sanity.io and Next.js Ecommerce Starter is an e-commerce starter kit that features a studio with a simple Next.js frontend. It is a demonstration of e-commerce content models and layout, but does not come with a full cart and fulfillment solution. The starter allows for live previews of products, provides a frontend with styled product pages using Tailwind.css, and includes various content types such as products, ads, pages, routes, popup shops, and social media.

Features:

  • Live previews: The starter allows for live previews, including website preview for products.
  • Frontend with product pages styled using Tailwind.css: The frontend of the starter comes with product pages that are already styled using Tailwind.css.
  • Content types for products, ads, pages, routes, popup shops, social media: The starter includes various content types that can be used for different aspects of an e-commerce website, such as products, ads, pages, routes, popup shops, and social media.

Installation:

To get started with the Sanity.io and Next.js Ecommerce Starter, follow these steps:

  1. Go to https://www.sanity.io/create?template=sanity-io%2Fsanity-template-nextjs-ecommerce and create a new project by following the instructions provided.
  2. To enable live preview, append “?preview” to the landing pages, product pages, and products overview URLs when you are logged into your Sanity project. For example: https://<your-project>.vercel.app/products/roji?preview
  3. If you want to run the starter locally, rename the file .env.test to .env and add your project ID from manage.sanity.io.
  4. If you have already set up deployments on Vercel, you can use vercel env pull to copy environment variables to your development environment.
  5. If your Vercel project is set up to use the Next.js framework preset, go to the project settings on https://vercel.com, navigate to Build & Development, and change the development command to: npm run dev
  6. To start the development server, run the following command:
    npm run dev
    This will run the frontend at http://localhost:3000 and the Sanity Studio at http://localhost:3000/studio

Summary:

The Sanity.io and Next.js Ecommerce Starter is a versatile e-commerce starter kit that provides a simple Next.js frontend and uses the Next.js toolkit for Sanity.io. It offers features such as live previews, styled product pages, and various content types. The starter can be installed easily by following the provided instructions and allows for local development or deployment on Vercel.