screenshot of OneShopper


This is repository create for Ecommerce site With Gatsby js


The OneShopper project is an Ecommerce Website that can be built using Gatsby + Contentful and Snipcart. It provides a quick start for setting up the site with pre-built models and configurations. The site can be easily customized and developed by editing the source code.


  • Gatsby + Contentful: Integrates the Gatsby framework with Contentful, a content management system, to easily manage and display content on the website.
  • Snipcart: Includes Snipcart integration for handling e-commerce functionality such as cart management, payment processing, and order tracking.
  • Quick Start: Provides a step-by-step guide to set up the site, including cloning the project, importing Contentful models, and configuring the project with own keys.
  • Real-time Updates: Allows for real-time updates by editing the source code and seeing the changes reflected in the browser.
  • Learning Resources: Offers comprehensive documentation and tutorials on Gatsby for developers looking for more guidance.
  • Deployment: Supports easy deployment to Netlify, a cloud hosting platform for static websites.


To set up the OneShopper project, follow these steps:

  1. Clone the site using the Gatsby CLI:
gatsby new oneshopper
  1. Import the Contentful models using the contentful-cli:
contentful space import --config path/to/oneshopper.json

Note: Replace path/to/oneshopper.json with the actual path to the oneshopper.json file.

  1. Configure the project with your own keys. Enter the following keys in the appropriate file:

    • Contentful:
      • spaceId = <Key>
      • accessToken = <Key>
    • Snipcart:
      • snipcart = <Key>
  2. Start developing by navigating into the site's directory and running the following command:

gatsby develop
  1. Open the source code in your preferred code editor and make changes to the src/pages/index.js file. Save your changes to see real-time updates in the browser.

  2. Your site is now running at http://localhost:8000. Additionally, you can use the tool http://localhost:8000/___graphql to experiment with querying your data.


The OneShopper project provides a seamless way to kick off an Ecommerce Website using Gatsby, Contentful, and Snipcart. With its easy setup, pre-built models, and real-time updates, developers can quickly start building their online store. Additionally, comprehensive learning resources and deployment options to Netlify make it a convenient choice for building and launching Ecommerce websites.


GatsbyJS is a free and open-source static site generator based on React. It uses a modern development stack including Webpack, GraphQL, and modern JavaScript and CSS frameworks. It also provides a rich set of plugins, starters, and themes.


React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components


Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.


A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.