Overview
A visual drag-and-drop page builder for Shopify storefronts, built at Seal Commerce. Shop owners compose pages and edit metadata directly on a live canvas — no code — and the builder publishes the result into their Shopify store. I led the technical direction for a team of 10.
The problem
Merchants wanted to customise their storefront layouts without touching Liquid or hiring a developer. The stock Shopify theme editor was too limited for bespoke pages, while code changes were slow and risky. They needed a what-you-see-is-what-you-get editor that produced real, publishable Shopify pages.
Architecture
The editor is a Vue.js canvas where blocks are dragged, dropped, and configured. The page tree lives in one central store — the single source of truth — so editing, serialization, and publishing all read from the same model. A PostgreSQL backend on Heroku persists the page and metadata definitions and talks to the Shopify APIs to sync the result into the merchant's store, with a companion dashboard for storefront management; Jest covers the editor logic.
Shop owner
└── Vue.js canvas drag-drop · page-tree state (single store)
↕ save / publish
PostgreSQL on Heroku pages · metadata · persistence
↕ Shopify APIs
Shopify storefront published pages
Key decisions & trade-offs
- A single store as the document model. The whole page tree lives in one predictable Vue store, so drag-drop edits, serialization, and publishing all derive from a single source.
- Builder separate from the storefront. The editor is an admin tool; its output is standard Shopify pages, so merchants aren't locked into a proprietary runtime.
- A conventional backend for persistence + Shopify sync. PostgreSQL on Heroku kept the data model and API integration straightforward, while the Vue canvas carried the interactive complexity.
Stack
Vue.js · jQuery · TypeScript · Jest · Shopify API · PostgreSQL · Heroku
Role: Technical Leader, team of 10 · Seal Commerce, 2020 — 2021.