Gatsby Starter Products With Categories screenshot

Gatsby Starter Products With Categories

Author Avatar Theme by Flotiq
Updated: 18 Mar 2022
6 Stars

Gatsby starter for products with categories using Snipcart

Categories

Overview:

This is a Gatsby starter project for ecommerce using Snipcart. It is configured to pull products and categories data from Flotiq and can be easily deployed to cloud hosting platforms such as Heroku, Netlify, and Gatsby Cloud. The starter project allows users to create an online store and manage products and categories using Flotiq editor. It provides a live demo and instructions on how to set up and deploy the project.

Features:

  • Integration with Snipcart for ecommerce functionality
  • Pulls product and category data from Flotiq
  • Easy deployment to cloud hosting platforms
  • Ability to manage products and categories using Flotiq editor

Installation:

  1. Start the project from template using Flotiq CLI

    • Run the following command:
      flotiqApKey - Read and write API key to your Flotiq account
      projectName - project name or project path (if you wish to start or import data from the current directory - use .)
      
  2. Alternatively, start the project from template using Gatsby CLI

  3. Setup “Products” Content Type in Flotiq

    • Create a Flotiq.com account.
    • Create the Category and Product Content Type.
    • Create content type definition using Flotiq.
    • Create content type definition using Flotiq.
  4. Configure application

    • Create a .env file in the root of the directory.
    • Add the following structure to the .env file:
      FLotiqApiKey=YOUR_API_KEY
      SnipcartApiKey=YOUR_API_KEY
      
  5. Start developing

    • Navigate into the project directory and start it up.
    • Note: This step is optional if you used flotiq-cli to start the project.
  6. Import example products (optional)

    • If you wish to import example products to your Flotiq account, run the following command in the project directory while having flotiq-cli installed:
    flotiq-import
    
  7. Open the source code and start editing

    • Open the project directory in your code editor.
    • Edit src/pages/index.js.
    • Save your changes and the browser will update in real time.

Summary:

The Gatsby Starter: Ecommerce and Flotiq is a starter project for creating an ecommerce website using Gatsby, Snipcart, and Flotiq. It allows users to easily set up an online store, pull product and category data from Flotiq, and manage products using Flotiq editor. The project can be deployed to various cloud hosting platforms and includes instructions for installation and deployment.