From Shopify to Custom: $50K/Year Saved, Mobile Conversions Doubled

Industry: Sports & Outdoor Equipment Platform Before: Shopify Advanced Platform After: Custom Next.js + Stripe Direct Project Duration: 16 weeks Team: 1 architect, 2 developers, 1 project manager

The Problem

A sports equipment retailer had been on Shopify for 4 years. At $2.3M annual revenue, the math had turned against them:

Annual Shopify costs:

• Shopify Advanced subscription: $4,788/year
• Transaction fees (0.5% on non-Shopify Payments orders): $11,500/year — because their primary payment processor was a net-terms B2B system Shopify Payments couldn't support
• Apps: $14,400/year (inventory sync, B2B pricing, advanced search, wholesale portal)

Total annual platform cost: $30,688/year

And that wasn't the biggest problem.

Their B2B wholesale channel (42% of revenue) required account-based pricing that no Shopify app could reliably implement. They had a system of manual price lists emailed to accounts, processed offline. They were losing deals because the buying experience was broken.

The decision triggers:

1. Platform fees exceeding $30K/year
2. B2B channel losing $180K in annual revenue to manual processes
3. Mobile conversion rate of 1.8% vs desktop 3.2% — a 44% gap suggesting performance issues

The Architecture Decision

We evaluated three options:

Option 1: Headless Shopify (Shopify backend + custom Next.js frontend)

• Pro: Preserves Shopify admin familiarity
• Con: Transaction fees remain. B2B pricing limitations remain.
• Cost: $18,000

Option 2: Full custom with Stripe (Next.js + custom commerce backend + Stripe)

• Pro: Eliminates all transaction fees. Full B2B pricing control.
• Con: Higher build cost, team needs to learn new admin
• Cost: $28,000

Option 3: Shopify Plus migration (stay on platform, upgrade)

• Pro: No migration cost
• Con: $27,600/year. B2B pricing improvements minimal. Transaction fee structure unchanged.
• Cost: $0 upfront, $27,600/year ongoing

We recommended Option 2. The fee savings alone paid for the build in under 6 months.

What We Built

Core E-Commerce Engine

Custom storefront built with Next.js 14 (App Router), deployed to Vercel Edge Network. Product pages use Incremental Static Regeneration with 5-minute revalidation — pages are always fast, always fresh.

Architecture:
Next.js (frontend) → Custom API Layer → PostgreSQL
                  ↘ Stripe (payments)
                  ↘ Elasticsearch (12k SKU search)
                  ↘ WMS Integration (3 warehouses)

B2B Pricing Engine

This was the core engineering challenge. We built an account-based pricing system with:

• Tier definitions: Bronze, Silver, Gold, Platinum account levels
• Product-level overrides: Specific SKUs can have account-specific prices
• Quantity breaks: Volume discounts calculated at cart level
• Net terms: Orders over $5K can be flagged for invoice billing (Net 30/60)
• Buyer approval workflows: Multi-person approval for orders over $10K

The B2B portal shows each logged-in wholesale buyer their negotiated prices, order history, and invoices. No more price list emails.

Search (Elasticsearch)

12,000 SKUs with complex attributes (sport, skill level, size, material, brand, compatibility) needed real search — not Shopify's.

Elasticsearch with custom analyzers delivers:

• Results in under 80ms
• Faceted filtering across 40+ attributes
• Typo tolerance and synonym mapping
• "Customers also viewed" based on purchase co-occurrence

Performance Architecture

Every page category has a different rendering strategy:

Migration Plan

The 12,000 product migration was the most complex part.

Week 1-2: Data audit and mapping

• Export all Shopify products, variants, customers, order history
• Map Shopify metafields → custom database schema
• Identify data quality issues (missing weight, duplicate SKUs)

Week 3-4: Data transformation scripts

• Python pipeline to clean, transform, and load product data
• Image optimization pipeline (WebP conversion, multiple sizes)
• Customer data migration with password reset emails

Week 5-8: URL redirect strategy

• Map every Shopify URL → new URL pattern
• Generate 301 redirect rules for Cloudflare
• Submit updated sitemap to Search Console before cutover

Week 9-14: Build and QA

• Core commerce functionality
• B2B portal
• Warehouse integration

Week 15-16: Parallel running and cutover

• New site live in staging, both systems processing for 2 weeks
• Traffic cutover via DNS with 5-minute TTL
• Monitoring: Sentry, Vercel Analytics, custom alerting

Results

Performance

Conversions

Financials

The mobile conversion improvement ($2.3M × 60% mobile traffic × 1.3% conversion lift) added an estimated $179,400 in annual revenue.

Total first-year business impact: ~$205,000

What the Client Said

"We expected the fee savings. We didn't expect mobile conversions to jump that much. That was the real surprise — and it's paying for the project many times over."

Lessons from This Migration

What went well:

• Parallel running period caught 3 edge cases in the B2B pricing engine before cutover
• Elasticsearch search quality was immediately better than Shopify search — customers noticed
• URL redirect strategy worked: no significant SEO drop

What we'd do differently:

• Start the WMS integration documentation earlier — their warehouse API had undocumented rate limits
• Run mobile usability testing in week 10, not week 14 — caught some checkout UX issues late

What this migration can't do:

• Eliminate team retraining cost (new admin interface takes 2–4 weeks to fully learn)
• Make migration risk-free (any platform change carries SEO and operational risk)

Is This the Right Decision for Your Business?

This migration made sense because:

1. Annual platform costs exceeded $30K
2. B2B pricing was a major revenue blocker
3. Mobile performance was measurably hurting conversions

Calculate your own numbers:

• E-Commerce Cost Estimator — see your 3-year cost comparison
• Shopify vs Custom Development — the full decision framework
• Website Cost Calculator — estimate your migration project cost

Get a free migration assessment →