Case studyLive eCommerce demos

Third Shot Supply Co.: one store, three stacks, one speed test

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.

Diagram: one Third Shot Supply Co. catalog behind three live storefronts. A Luma theme and a headless Next.js storefront (over GraphQL) both run on Magento Open Source 2.4.9 with custom modules, PHP 8.3, OpenSearch and a Redis full-page cache; the same catalog is imported into a Shopify store with its own theme. A speed trial measures the same pages on all three.SPEED TRIALsame pages · measured side by sideLUMA THEMEclassic MagentoNEXT.JS 16headless storefrontSHOPIFY THEMELiquid · OS 2.0PHTMLGRAPHQLMagento 2.4.9MAGE-OS · ONE CATALOG · CUSTOM MODULESPHP 8.3OPENSEARCHREDIS FPCShopifyHOSTED PLATFORMADMIN APISAME CATALOG, IMPORTED INTO SHOPIFYLIVE · OPEN TO ANYONE · NO REAL ORDERSDiagram: one Third Shot Supply Co. catalog behind three live storefronts. A Luma theme and a headless Next.js storefront (over GraphQL) both run on Magento Open Source 2.4.9 with custom modules, PHP 8.3, OpenSearch and a Redis full-page cache; the same catalog is imported into a Shopify store with its own theme. A speed trial measures the same pages on all three.SPEED TRIALmeasured side by sideLUMANEXT.JSSHOPIFYMagento 2.4.9MAGE-OS · ONE CATALOGPHP 8.3OPENSEARCHREDIS FPCGRAPHQLSAME CATALOG IMPORTED INTO SHOPIFY

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: 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.

Full-time or contractremote, hybrid or on-site

Need a senior Magento lead? Let’s talk.