Introducing Cartridge: Headless Shopify with AI Commerce

This post is the culmination of a year of building, writing, and shipping. If you have been following our Shopify engineering series, you have seen the pieces come together one by one. The zero-token architecture. The agency playbook analysis. The config-driven architecture. The 11 features templates cannot do. The AI sales assistant. The platform extraction.

Today, all of those pieces ship as one product. Cartridge is available now.

What Cartridge Is

Cartridge is a headless Shopify storefront platform. You give it your Shopify store domain and a configuration file. It gives you a complete, production-ready storefront with AI-powered product search, conversion-optimized UX, and sub-second page loads.

It is not a theme. It does not run on Shopify's servers. It is a standalone Next.js application that fetches product data from Shopify's public JSON endpoints, renders static pages with ISR caching, and hands off checkout to Shopify's native checkout flow.

No Shopify API tokens. No Storefront Access Token. No private app. Your Shopify store stays exactly as it is. Cartridge reads from it. Shopify handles orders, payments, and fulfillment. Cartridge handles the storefront.

The Seven Modules

Cartridge is organized into seven modules. Each one solves a specific problem.

1. Data Layer

The data layer fetches products, collections, and metadata from Shopify's public JSON endpoints. No authentication required. Products are normalized into Cartridge's type system, cached with ISR at configurable intervals, and made available to every component. The full catalog is pre-fetched at build time for client-side search and AI context.

Supports stores with up to 250 products in a single request. Pagination for larger catalogs up to approximately 25,000 products. Zero API credential management.

2. Storefront UI

A complete set of React components: product cards, product detail pages, collection grids, hero sections, navigation, footer, cart drawer, and checkout redirect. Every component is responsive (mobile-first), accessible (WCAG 2.1 AA), and animated (Framer Motion).

The design is opinionated. Clean. Modern. High contrast. Generous whitespace. It is built for stores that sell premium products, not dollar-store widgets. The visual identity (colors, fonts, logo) comes from the config. The layout and interaction patterns are fixed.

3. AI Concierge

An AI shopping assistant powered by Claude Sonnet 4. The full product catalog is injected into the system prompt. No vector database. No RAG pipeline. The assistant has three tools: product search (returns interactive cards), quote requests (pushes to HubSpot), and email capture (pushes to your marketing platform).

Streaming responses via Vercel AI SDK. Rate limiting per IP and per session. Configurable personality, greeting, and suggested questions. Mock mode for development without an API key.

The AI concierge is optional. Set ai.enabled: false in the config and it disappears entirely. No AI code ships to the browser.

4. Commerce Features

The 11 features we documented, all built in and toggleable:

• Cmd+K product search with scored matching
• Product image zoom (hover on desktop, pinch on mobile)
• Quick view modals on collection pages
• Wishlist with email gate and localStorage persistence
• Dynamic collection filters derived from product data
• Sticky mobile CTA with IntersectionObserver
• Exit-intent email popup (once per visitor)
• Shipping and returns accordion on product pages
• Availability badges with variant-aware updates
• Social sharing with Web Share API fallback
• Attribute-based product recommendations

Each feature is a boolean in the config. Enable what you want. Disable what you do not. Features that are disabled are tree-shaken from the bundle. They do not add weight to the page.

5. Configuration System

One TypeScript file controls the entire storefront. 47 configurable fields across 12 sections: store identity, brand, navigation, hero, about page, AI, embed widget, shipping, features, custom pages, forms, SEO, and analytics.

The config is validated at build time with Zod. Invalid values fail the build with a clear error message. The TypeScript compiler provides autocomplete and type checking in the editor. The config is the only file you need to edit.

6. Admin Dashboard

A web UI for editing the config without touching a text editor. Four sections: Brand, Content, Features, and AI. Live preview alongside every form. Changes are committed to git and trigger a redeploy. The git history is the audit trail.

The dashboard is optional. Power users edit the config file directly. Non-technical merchants use the dashboard. Both produce the same result.

7. CLI and Deploy Pipeline

The create-cartridge CLI scaffolds a new project, validates the config, and deploys to Vercel. Total time from npx create-cartridge to a live storefront: under an hour for a prepared merchant, under two hours for someone starting from scratch.

$ npx create-cartridge my-store
$ cd my-store
$ vim cartridge.config.ts   # or use the admin dashboard
$ npm run deploy

Four commands. One config file. A live storefront.

Who Cartridge Is For

Cartridge is built for a specific type of Shopify merchant. Here is the profile:

• Catalog size: 20-500 products. Small enough for full-catalog AI context. Large enough to need search and filters.
• Average order value: $100+. High enough that storefront quality directly impacts revenue. A 2% conversion improvement on $200 AOV is worth more than 10% on $15 AOV.
• Current pain: Shopify theme is slow (Lighthouse under 60), looks generic, or both. Conversion rate is below 2%. The merchant knows the products are good but the storefront does not show it.
• Technical comfort: Has a developer on staff or on retainer, or is a developer themselves. Cartridge is a developer tool. The admin dashboard helps, but deployment still requires someone who can run CLI commands.
• Budget reality: Cannot afford $50K for an agency but can invest $3,500-7,500 for a solution that delivers the same result.

Cartridge is not for everyone. If you sell 10,000 SKUs, you need the Storefront API and a proper catalog management system. If you need customer accounts on your frontend, you need Hydrogen or a custom build. If your products are commodity goods competing on price, storefront design is not your lever. If you have no technical resource at all, you need a managed service, not a platform.

Performance

Every Cartridge deployment we have shipped so far scores above 95 on all four Lighthouse categories:

• Performance: 96-100
• Accessibility: 98-100
• Best Practices: 100
• SEO: 100

Core Web Vitals across production deployments:

• Largest Contentful Paint: 0.6-1.1s
• First Input Delay: <10ms
• Cumulative Layout Shift: 0-0.02
• Total Blocking Time: 0-30ms

Total JavaScript shipped to the browser: ~180KB (compared to 800KB-1.2MB for an average Shopify theme). The difference is not subtle. Pages load in under a second on a 4G connection. Product images appear without a placeholder shimmer. Navigation is instant because the pages are statically generated.

The AI Difference

Most Shopify stores have a search bar that returns results based on title matching. Type "red" and you get every product with "red" in the title. No context. No understanding. No recommendations.

Cartridge's AI concierge understands queries like:

• "I need a gift for someone who works with their hands, budget around $150"
• "What is the difference between the Heritage and the Classic leather bag?"
• "I am outfitting a workshop. What do you recommend for tool storage?"
• "Do you have anything similar to [competitor product]?"

The assistant responds with product recommendations as interactive cards. Click the card and you are on the product page. The assistant can answer follow-up questions, compare products, and guide the customer to checkout.

When the customer is not ready to buy, the assistant captures their email with context. "I will email you when the Heritage Bag is back in stock." That email goes to your marketing platform tagged with the product interest. Your next email campaign writes itself.

When a customer wants to buy in bulk or needs custom specifications, the assistant creates a quote request with structured data and pushes it to HubSpot. The sales team gets a qualified lead with product details, quantities, and the full conversation transcript.

How It Works (Technical Summary)

For the engineers in the audience, here is the complete stack:

• Framework: Next.js 15 with App Router and React Server Components
• Language: TypeScript (strict mode, zero any types)
• Data source: Shopify public JSON endpoints (zero auth)
• Caching: ISR with configurable revalidation (default 120s)
• Cart: React context + localStorage, Shopify checkout permalink redirect
• AI: Claude Sonnet 4 via Vercel AI SDK v6, streaming, tool use
• Animation: Framer Motion with reduced-motion respect
• Styling: Tailwind CSS with CSS custom properties from config
• Validation: Zod for config, runtime validation on API routes
• Hosting: Vercel (recommended), any Node.js hosting (supported)
• CI/CD: Git push triggers build and deploy via Vercel

The codebase is approximately 18,000 lines of TypeScript across 140 files. It ships as an npm package. Your project depends on @cartridge/storefront. You own the config file. We own the code. Updates are npm update.

Pricing

Cartridge has three tiers:

Starter: $3,500 one-time

• Full storefront platform
• All 11 commerce features
• Config-driven customization
• CLI deployment to Vercel
• 30 days of email support
• No AI concierge

Pro: $5,500 one-time

• Everything in Starter
• AI concierge with Claude Sonnet 4
• Admin dashboard
• HubSpot integration for leads
• Marketing platform integration (Klaviyo, Mailchimp)
• 60 days of email and video support

Enterprise: $7,500 one-time

• Everything in Pro
• Custom deployment (AWS, self-hosted, or client's Vercel)
• Embed widget for external sites
• Custom form builder
• White-label option (no Cartridge branding)
• 90 days of priority support with Slack channel
• One round of custom component development

These are one-time fees, not subscriptions. You own the deployment. You own the config. There is no monthly platform fee, no transaction percentage, no seat limit. The only ongoing costs are Vercel hosting (free tier covers most stores) and the Anthropic API for the AI concierge (typically $15-30/month based on usage).

Compare this to the alternatives: $50K-75K for an agency build, $300-1,000/month for Shopify Plus + apps, or weeks of developer time building from scratch.

What is Next

Cartridge 1.0 ships with the seven modules described above. Here is what is on the roadmap:

• Multi-language support: Config-driven i18n with per-language product content
• A/B testing framework: Split test headlines, CTAs, and feature configurations
• Analytics dashboard: Conversion funnel, AI interaction metrics, feature usage
• Shopify webhook sync: Real-time inventory updates instead of ISR polling
• Template gallery: Pre-built configs for common store types (fashion, home goods, specialty food, handmade goods)

Each of these will ship as a package update. Edit your config to enable new features. Run npm update. Redeploy. No migration. No breaking changes.

The Backstory

Colby's Data Movers started as a Salesforce consulting firm. Data migrations, org consolidations, compliance audits. We still do that work. But in late 2025, a client asked us to build them a Shopify storefront, and we fell into a rabbit hole.

The Shopify ecosystem is full of good products. Shopify itself is excellent at what it does. But the gap between what a Shopify theme delivers and what a modern web application can deliver is enormous. Lighthouse scores in the 30s and 40s. JavaScript bundles over a megabyte. No AI integration. No real-time search. No programmatic control over the shopping experience.

We built the storefront. Then we built it again for another client. Then again. By the third time, we realized we were not building storefronts. We were building a platform. So we extracted it, packaged it, and named it Cartridge.

The name is a reference to how games used to work. You had the console (Shopify). You swapped in a cartridge (the storefront) to change the experience. The console stayed the same. The cartridge determined what you saw.

Get Started

If Cartridge sounds like the right fit for your store, here is how to start:

1. Read the technical posts. Understand the architecture before you buy it. Start with Zero-Token Shopify for the data layer, then Config-Driven Storefront for the configuration system.
2. Check the fit. 20-500 products. High-ticket items. A developer available. If that is you, keep going.
3. Run the demo. npx create-cartridge --demo scaffolds a project with a sample config and mock data. See the storefront, the AI concierge, and the admin dashboard running locally in under 5 minutes.
4. Contact us when you are ready. We will set up a call, review your Shopify store, and tell you honestly whether Cartridge is the right solution. If it is not, we will tell you that too.

We built Cartridge because we needed it. Our clients needed a storefront that performed better, looked better, and sold better than what Shopify themes could deliver. We built it for them. Now we are offering it to you.

One config file. Zero tokens. Deploy in under an hour. That is Cartridge.