Flotiq Gatsby Shop 2 screenshot

Flotiq Gatsby Shop 2

Author Avatar Theme by Flotiq
Updated: 28 Feb 2025
23 Stars

Categories

Overview

The Gatsby shop starter with Flotiq source is a project template that allows developers to quickly set up a Gatsby app with Flotiq as the headless CMS. This starter provides the necessary configuration files for a Gatsby app and includes the Flotiq source plugin and components library. The project is built on Node.js and requires a minimum version of 18.0.0.

Features

  • Flotiq: A headless CMS used for storing data.
  • Tailwind: A utility-first CSS framework.
  • Flotiq source plugin: A connector for fetching data from Flotiq.
  • Flotiq components for React: A components library designed to work with Flotiq Content Objects.

Installation

To install the Gatsby shop starter with Flotiq source, follow these steps:

  1. Make sure you have Node.js installed on your machine with a version of 18.0.0 or higher.
  2. Clone the project repository.
  3. Install the required npm dependencies.
    npm install
    
  4. Set up the environment variables in the .env file. The .env.development file should have the following structure:
    FLotiqApiKey=YOUR_FLOTIQ_API_KEY
    SNIPCART_API_KEY=YOUR_SNIPCART_API_KEY
    
  5. If you want to import example data into your Flotiq account, run the following command:
    npm run import-data
    
  6. Start the development server.
    npm run develop
    

Summary

The Gatsby shop starter with Flotiq source is a project template that combines the benefits of Gatsby, Flotiq, and Tailwind to help developers quickly create a blazing-fast e-commerce app. With easy installation steps and integration with Flotiq’s headless CMS, developers can efficiently manage content and display it beautifully using the Flotiq components for React. The starter also includes support for Snipcart, allowing developers to create a fully functional shopping experience.