Shopify Theme Template

The challenge

Shopify storefronts are often edited straight in the theme, with no build step, no review and no safe way to try a change before customers see it. And a careless deploy can overwrite the content, settings and translations a merchant has set up themselves.

The approach

1. 01TypeScript web components, Vite and Tailwind CSS v4, with a command that scaffolds new components and typed helpers for the cart, storage and events.
2. 02One command to start a project: it validates the store config, pulls the live theme and wires the compiled assets into the layout.
3. 03Branches map to environments: dev creates unpublished preview themes for client approval, main deploys to every production store, so multi-market setups update together.
4. 04Before anything merges, CI copies each live theme into a temporary theme, applies exactly what the merge would push, verifies every file and removes the copy again.
5. 05Live deploys compare against the live theme and push only changed code. Templates, section settings and theme config belong to the merchant and are never pushed or deleted.
6. 06Locale merging adds and updates developer translations while leaving the merchant's own untouched, and schema validation catches invalid theme settings before they ship.

The outcome

It is the starting point for Edition's storefront projects, including multi-store setups that deploy to several markets at once. Every change is previewed and checked before customers see it.

Live deploys push only the files that actually differ from the live theme and never touch the templates, settings or translations the merchant owns. If someone edited a file directly on the live store, the deploy says so.