Frankenstein's Theme

An existing Shopify store with 224 products, 18 collections, 15 installed apps, real customers, and a live business that can't go down. You can't choose the stack. You can't redesign the schema. You have to work within Shopify's constraints — and Shopify has a LOT of constraints.

Three Layers. One Monster.

The result: 21,744 lines of React that Shopify doesn't even know is React.

shopify theme push --only deletes assets

Sounds harmless. The --only flag should push just the matching files. Instead, the "Cleaning" step deleted every matching asset before uploading. New uploads failed silently. Every jacket image on the preview theme — all 404s.

Fix: --nodelete flag on every push. Learned the expensive way.

The 62.5% Font-Size Trap

Shopify's Spotlight theme sets html { font-size: 62.5% } so their rem values resolve to nice round pixel numbers. Tailwind expects 1rem = 16px. The entire order system rendered at 62.5% correct size — buttons too small, text unreadable, spacing compressed.

Fix: One CSS line. Three hours to find. html:has(#sw-order-root) { font-size: 100% !important; }

Collection Images Aren't Theme Assets

Uploaded 25+ product images to theme/assets/ — those work fine. But collection banner images live in Shopify admin on the collection object. Can't push them via CLI. 10 of 18 collections had no image set.

Lesson: The theme worked perfectly. The data was just missing. Different problem, different solution.

The Image Resolution Chain

React components use paths like /images/category-tops.png. On Vercel, that resolves to the public directory. On Shopify, that path means nothing. Built a 4-step resolution chain: Liquid generates window.__SW_JACKET_IMAGES__ → React shim checks it → falls back to Vercel → every new image requires the full pipeline.

Pain: Had to add images to the map three separate times as we discovered missing ones.

Two Different Image Arrays, One Page

The order page has PRODUCT_CATEGORIES in one file and OTHER_GREEK in another. Updated the wrong array with Greek org images. Nicole caught it. Different sections, different data sources — the code structure doesn't make that obvious when you're moving fast.

Lesson: Speed creates blind spots. Client QA catches what you miss.

The SymbAIotic Shift™ isn't just for greenfield dreams. It's for the businesses that already exist, already have customers, and need to get better without burning everything down.

Why This One's Personal

Scat Pack was built with my son. This one was built for my sister.

Nicole's been stitching custom apparel for years. She knows every thread weight, every applique technique, every Greek organization's color scheme. What she didn't have was a platform that matched her craft.

The SymbAIotic Shift™ isn't about replacing people with technology. It's about building technology that matches the people who already know what they're doing.

What Would You Fix This Weekend?

Your Shopify store. Your SaaS idea. Your business running on spreadsheets and duct tape. Whatever it is — the tools exist now to build it right.

Greenfield or brownfield. We build both.

For the Nerds: The Three-Layer Architecture

React → Vite → Liquid. The monster's anatomy.

┌──────────────────────────────────────────────────────────────────────┐
│  LAYER 1: NEXT.JS PREVIEW SITE (Vercel)                             │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐               │
│  │ 24 Pages │ │ 41 Comps │ │ 2 API    │ │ 2 React  │               │
│  │ + Routes │ │ + Shared │ │ Routes   │ │ Contexts │               │
│  └────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘               │
│       └─────────────┴────────────┴─────────────┘                    │
│                    21,744 lines TypeScript                           │
└──────────────────────────┬───────────────────────────────────────────┘
                           │  vite build (IIFE)
┌──────────────────────────▼───────────────────────────────────────────┐
│  LAYER 2: VITE BUILD PIPELINE                                        │
│  ┌────────────────┐ ┌────────────────┐ ┌────────────────┐           │
│  │ sw-order-bundle│ │ sw-lj-bundle   │ │ sw-style.css   │           │
│  │ 446KB IIFE     │ │ 419KB IIFE     │ │ 43KB scoped    │           │
│  └───────┬────────┘ └───────┬────────┘ └───────┬────────┘           │
│          │                  │                   │                    │
│  4 SHIMS: next/link → hash | next/image → CDN | 'use client' → ∅   │
└──────────┬──────────────────┴───────────────────┴────────────────────┘
           │  theme push --nodelete
┌──────────▼───────────────────────────────────────────────────────────┐
│  LAYER 3: SHOPIFY THEME (Spotlight + Custom)                         │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌──────────────┐  │
│  │ 12 Custom   │ │ 2 React     │ │ 7 JSON      │ │ 3 CSS        │  │
│  │ sw-* Liquid │ │ Embed       │ │ Page         │ │ Override     │  │
│  │ Sections    │ │ Sections    │ │ Templates    │ │ Files        │  │
│  └─────────────┘ └─────────────┘ └─────────────┘ └──────────────┘  │
│  Mounts to: #sw-order-root + #sw-lj-root                            │
│  Image bridge: window.__SW_JACKET_IMAGES__ (Liquid → React)         │
└──────────────────────────────────────────────────────────────────────┘

Share this article