# Third Shot Supply Co.: one store, three stacks, one speed test Case study ยท Live eCommerce demos The same pickleball gear catalog, live on three stacks you can click through today: classic Magento 2.4.9, a headless Next.js storefront on the same Magento, and Shopify. Then measured head to head, with the numbers published. Demos, so no real orders. - Role: Independent Adobe Commerce & Shopify Consultant - Where: Self-employed, Dec 2025 - present - Stack: Magento Open Source 2.4.9 (Mage-OS), Next.js 16 headless, Shopify OS 2.0 theme, Magento GraphQL, Lighthouse, PHP 8.3, MariaDB 10.11, OpenSearch 2.19, Redis full-page cache, Luma child theme, Custom Magento modules, TypeScript, Liquid, Shopify Admin GraphQL API, Cloudflare ## Context Most of my Magento work lives behind client logins and NDAs. Third Shot Supply Co. is a fictional pickleball gear brand I put on my own domain so anyone can see the kind of build I lead, end to end, without a login. It also answers the question every merchant on Magento is asking right now: stay on Magento, go headless, or move to Shopify? Instead of an opinion, there is the same store built all three ways, and a public speed test of all three. ## The challenge Make each one a real store, not a theme screenshot: a current Magento release in production mode, a catalog that uses every product type, filters, search, a bag and a checkout that completes, comfortable on a phone. Keep the three storefronts close enough to compare fairly (same products, same photos, same layout), then measure them the same way and publish the method with the results. ## What I did I built it with Claude Code as an example of AI-accelerated delivery: I designed the themes, the modules, the data model and the test method, used Claude Code to write the code faster, and reviewed every change and checked it in a browser before it went live. - **Magento 2.4.9.** Magento Open Source 2.4.9 (the Mage-OS 3.5 distribution) on PHP 8.3, MariaDB 10.11, OpenSearch 2.19 and a Redis full-page cache, in production mode, with a custom Luma child theme: layered navigation, swatches, a slide-out bag, cart and checkout, checked from phone to desktop widths. - **Catalog as code.** A seeder module builds the whole catalog from source files: simple, configurable (color and grip-size swatches), bundle and grouped products, related and cross-sell links, reviews and CMS pages, so the store can be rebuilt from scratch in one command. - **Custom modules.** AJAX layered navigation, infinite scroll and live search; responsive WebP images and critical CSS so the first screen paints fast on mobile. - **Headless storefront.** A second front end in Next.js 16 (App Router, TypeScript) that reads the same catalog through Magento's GraphQL API: same products, same URLs, cart, checkout and customer accounts. Pages are prerendered and served from Cloudflare's edge; a small Magento module tells the storefront to refresh a page when a product, category or CMS page is saved. - **Shopify.** The same catalog moved to Shopify the way I run real migrations: products, configurable options as variants, sale prices, stock, reviews and related products imported from Magento through Shopify's Admin GraphQL API, with Magento attributes carried over as metafields so the same filters work. A hand-written Online Store 2.0 Liquid theme keeps the look and the shopping flow, including the bag drawer and filters. - **Speed Trial.** A public comparison at [compare.michael-kuhlman.com](https://compare.michael-kuhlman.com): 180 Lighthouse runs over the same six pages on all three stacks (mobile and desktop, five runs each), real-browser filmstrips, and a scripted shopper journey from the home page to the bag. The method, the raw data and the Lighthouse reports are published with it. - **Git discipline.** Every change is a Git commit, with pre-commit checks for secrets, PHP syntax and Magento XML. ## Outcome All three storefronts are live and open to anyone. Browse, filter, search and check out with the test payment methods: nothing ships, nothing is charged. Shopify keeps development stores behind a password, so use **demo123** to get in. What the Speed Trial found on mobile: - **A tuned Magento holds its own.** It scored highest on Lighthouse (91.7 average across six pages, headless 90.7, Shopify 77.7). On desktop all three score 99 to 100. - **Headless wins the shopping trip.** Home to bag took 3.6 seconds headless, 6.7 on Shopify and 8.1 on Magento, where the product page waits for Magento's JavaScript before the buy button works. - **Shopify is the heaviest page.** About 1.8 MB per page against 0.5 MB headless, mostly Shopify's own scripts that a theme cannot remove. The right answer depends on the business, not the benchmark, and that is the conversation I have with every merchant: what to keep, what to move, and what it will cost to run. --- Canonical: https://www.michael-kuhlman.com/work/ecommerce-demo