Building a Printful-powered JAMstack store with 11ty & Stripe
📝 Brief
🧩 Project Summary
I set out to prove a simple idea: could a small online merch store run on a clean, static-generated site—powered by Eleventy (11ty), Printful’s API for products/fulfilment, and Stripe for payments—while keeping templates lean and essentially JavaScript-free? The answer was yes. The result is a fast, tidy JAMstack shop that fetches product data at build time and hands off orders to Stripe/Printful.
🎯 The Challenge
Deliver a “no CMS, no server” storefront that still feels full-featured: pull products and variants from Printful, generate category + product pages in 11ty, keep category naming consistent, and add just enough client-side JS for variant switching, cart storage, and price formatting—then finish with a smooth Stripe Checkout hand-off.
🛠️ My Approach
- Product ingestion & caching
- At build, fetch `/store/products` from Printful, then fetch variants for each product.
- Generate stable slugs (slugify + small MD5), derive categories via `getCategoryFromName(...)`, and cache the full dataset to `cache/products.json` for simple, fast templates.
- Page generation in Eleventy
- Expose the products array globally (`src/_data/products.js`) and render an index that loops products and builds a unique category list with friendly display names.
- Use Eleventy pagination to auto-generate `/products/{category}/` pages, backed by a `_data/categoriesFlat.js` list.
- Category hygiene
- Normalise names—`t-shirts`, `hoodies`, `stickers`, plus a new `hats` category—so items like “Hat” don’t get mis-grouped.
- Variants, cart, and checkout
- On product pages, a `` controls variant (size/colour), swaps the preview image, and updates price via `Intl.NumberFormat`.
- “Add to Cart” writes to `localStorage`, with the header icon reading the cart for a live count.
- “Checkout” posts the cart to a Vercel function (`/api/checkout.js`) that creates a Stripe Checkout session and returns the redirect URL.
📱 Outcomes
- Lean, fast storefront with no traditional server or CMS—just 11ty, small JS, and APIs.
- Accurate taxonomy prevents mis-grouping and keeps listings tidy
- Simple UX touches—clean page titles and currency formatting—add polish without bloat.
- Seamless checkout: client-side cart → serverless function → Stripe Checkout → Printful fulfilment.
💡 Why This Matters
For small, experimental merch lines, this stack keeps costs and complexity low while staying flexible: rebuild to refresh products, add categories with data, and scale fulfilment via Printful—without dragging in a heavy framework or custom CMS.
🧭 Next Steps
- Add product descriptions with Markdown fallback.
- Surface variant ranges on listings (e.g., “Available XS–XL”).
- Add size guides / shipping info via data-driven modals.
- Code cleanup and publish a public repo.
📑 Details
🏆 Result
