Flotiq Gatsby Shop 1 – Merch Store

Flotiq Gatsby Shop 1 is a Gatsby 5 starter that builds a static e-commerce merch storefront, with Flotiq as the headless CMS backend and Snipcart handling the shopping cart and checkout. It is maintained by Flotiq and ships with example content, a Flotiq source plugin, and ready-made deployment options.

What is Flotiq Gatsby Shop 1?

This is a project starter for creating an online shop using Gatsby, a React-based static site generator. The shop's product data lives in Flotiq, a headless CMS, and is fetched at build time through the gatsby-source-flotiq plugin. The starter outputs a static site, meaning product pages are pre-built. It includes a live demo at flotiq-gatsby-shop-1.netlify.app. The starter requires Node version 18 or higher and uses Gatsby 5.

Key Features

• Flotiq headless CMS — Manage products and content in Flotiq; the starter imports four example objects into your account.
• Tailwind CSS — Utility-first styling with a tailwind.config.js for customization.
• Snipcart integration — Add a shopping cart by putting your Snipcart public test API key in the .env file; a paid plan is needed for commercial use.
• Flotiq source plugin — Pulls content types and data from Flotiq into Gatsby's GraphQL data layer.
• Flotiq components for React — A component library designed to render Flotiq Content Objects.
• One-click deployment — Deploy buttons for Heroku, Netlify, and Cloudflare Workers are included in the README.
• Environment variable configuration — Uses GATSBY_FLOTIQ_API_KEY, SNIPCART_API_KEY, and GA_MEASUREMENT_ID for analytics.
• Content management workflow — Rebuild the site after data changes; configure webhooks or plugins for automated rebuilds.

Who is it for?

• Gatsby developers who want a pre-configured e-commerce starter with a headless CMS backend and a working checkout flow.
• Merch store owners who need a static storefront that can be deployed cheaply and managed via Flotiq's editor.
• Agencies building small shops for clients, because the starter includes example data and clear setup steps.

What can you do with Flotiq Gatsby Shop 1?

• Sell physical merchandise: Set up product listings in Flotiq and let customers check out via Snipcart.
• Customize the design: Edit src/templates/index.js and Tailwind config to change the look and layout.
• Deploy to static hosting: Push the project to Heroku, Netlify, or Cloudflare Workers with the provided buttons.
• Use it as a learning resource: Study how Gatsby integrates with Flotiq and the structure of a Gatsby shop.

How does Flotiq Gatsby Shop 1 work?

Start by installing the Flotiq CLI and running flotiq start my-shop https://github.com/flotiq/flotiq-gatsby-shop-1.git YOUR_API_KEY. This creates the Gatsby project, installs dependencies, populates the .env file, and imports example data. Then run gatsby develop to serve the site locally at localhost:8000. When you edit content in Flotiq, you must rerun gatsby develop to see changes; changes to content type definitions require gatsby clean.

FAQ

Is Flotiq Gatsby Shop 1 free?

The starter itself is open source under the MIT license. Flotiq and Snipcart offer free tiers; the README notes that Snipcart's public test API key works only for testing, and a paid license is needed for commercial use.

What are the environment variables?

The .env.development file needs GATSBY_FLOTIQ_API_KEY (your Flotiq read/write API key), SNIPCART_API_KEY (your Snipcart API key), and GA_MEASUREMENT_ID (Google Analytics measurement ID).

How do I import example data?

If you don't use the Flotiq CLI, run flotiq import .flotiq YOUR_API_KEY in the project root. This adds four example objects to your Flotiq account.

Can I deploy to Cloudflare Workers?

Yes, there is a "Deploy to Cloudflare Workers" button. The README notes that the default uses a Flotiq starter API key; to use your own key, add a GATSBY_FLOTIQ_API secret in GitHub and rerun the workflow.

What Node version is required?

The starter requires Node 18 or higher because it uses Gatsby 5.