Building a Headless Shopify Store

Here's how I used Gatsby, Shopify Storefront API, and Contentful to create a modern headless ecommerce experience.

---

✅ Performance
✅ CMS flexibility
✅ Clean UI

🚀 Overview

For this project, I wanted to build a blazing-fast ecommerce store with full control over the frontend experience. The stack:

• Gatsby for static site generation
• Shopify Storefront API for ecommerce functionality
• Contentful for content management
• Netlify for hosting and CI/CD

This setup allowed me to combine performance with flexibility, giving the client (and myself) a lot of control.

---

🔍 Performance

The live version scores high on Lighthouse metrics:

• Performance: 97–100
• Accessibility: 100
• Best Practices: 100
• SEO: 95+

All thanks to Gatsby’s optimization strategies, image handling, and static generation.

---

🛒 Managing Cart State

Here's how I handled cart state globally in React:

import { createContext, useReducer, useContext } from "react";

const CartContext = createContext();

const initialState = { items: [] };

function reducer(state, action) {
  switch (action.type) {
    case "ADD_ITEM":
      return { ...state, items: [...state.items, action.payload] };
    case "REMOVE_ITEM":
      return {
        ...state,
        items: state.items.filter((i) => i.id !== action.payload),
      };
    default:
      return state;
  }
}

export const CartProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <CartContext.Provider value={{ state, dispatch }}>
      {children}
    </CartContext.Provider>
  );
};

export const useCart = () => useContext(CartContext);

This made the experience snappy and persistent across page transitions.

---

⚡ Incremental Builds with Gatsby

To speed up build times, I used Incremental Builds on Gatsby Cloud (now part of Netlify). Only the changed content triggers a new build.

This setup works great with Contentful’s webhook integration.

---

🎯 Lessons Learned

• Gatsby’s image handling is powerful, but takes time to configure properly.
• Shopify’s Storefront API is flexible, but you need to handle a lot manually, like cart logic.
• Incremental builds + CDN = a winning combo for ecommerce.

---

📸 Demo

Live Demo

---

💬 CTA

If you’re looking for someone to build your custom Shopify storefront or migrate to a modern, performant stack — let’s talk.

Get in Touch or reach out at micciullapiero@gmail.com

---

Thanks for reading 🙌