Side quest · Tool
stick.
A Figma-style canvas for Shopify themes. Every template on one board, the real pages when you zoom in, and edits that land as plain theme JSON.
The theme editor shows you one page at a time.
When I build or audit a Shopify theme, the questions I ask are about the whole store. Which templates use this section? What does the header group do on the cart page? Is there an alternate product template nobody remembers making? The theme editor answers those one page at a time, through a dropdown.
Design tools solved this years ago. In Figma you see every screen on one canvas, zoom into the one you care about, and change it in place. I wanted that for themes, without giving up the files, the CLI or git.
My product thinking, Claude Code’s keyboard.
stick was built with Claude Code, Anthropic’s AI coding agent, which wrote the code. My part was the idea and the product: what the tool is for and who it serves, the rules it has to follow, how the canvas, layers and properties panels should behave, the order to build things in, and what counts as done. I reviewed each milestone in the running app and sent it back when it didn’t feel right.
Working this way, my ten-plus years of Shopify theme knowledge went into the decisions: which theme-editor habits to keep, which Shopify rules to enforce, and where a theme developer would get burned.
A canvas that never locks your theme in.
Three rules shaped every decision:
- It stays a plain theme. stick reads and writes the same template and section-group JSON files as the theme editor. A settings change is one format-preserving write, so git diff shows one line, just as if you’d typed it.
- Any OS 2.0 theme. Nothing to install in the theme. stick works from the schemas and templates already there, so Dawn, Horizon and custom themes all open the same way.
- Next to the workflow you have. It runs beside shopify theme dev, reuses a session that’s already serving the theme, and refuses to start a second one on a store that has one, because the two would overwrite each other’s development theme.
Wireframes far away, the real store up close.
Zoomed out, each frame is a silhouette built from the theme model: layouts, section groups, templates, and every block nested inside them, checked against the schemas. That part needs nothing running and loads instantly.
Zoom past about 45% and frames swap in the live page from theme dev. Theme dev refuses to be framed, so stick runs a small local proxy that removes that header and injects a script into each page. The script reports where every section sits, and stick uses those positions to line the wireframe rows up with the real page, so clicking anywhere on the live preview selects the right section.
Every section the theme offers, on one page.
Themes ship with far more sections than any one store uses, and in the theme editor the usual way to find out what one looks like is to add it to a page. The library flips that around. It puts every section preset on its own card, rendered for real by theme dev and isolated from the rest of the page, so you can scan the whole kit at a glance.
Cards are grouped into sections the store already uses, with a count of where, and ones it doesn’t use yet. Sections that can’t be added from the editor at all are listed separately with the reason: no preset, header or footer only, or allowed only on a page type that can’t be previewed. For a designer planning a page, or a merchant asking what their theme can do, that’s the answer on one screen.
Enough to rearrange a store without opening the editor.
- Edit settings for any section or block, with schema defaults shown dimmed and a reset per field.
- Add, remove, hide and reorder sections and blocks. Drag a preset onto a frame and a line shows where it lands; it turns red, with the reason, if the section’s enabled_on rules don’t allow it there.
- Shopify’s limits are enforced first: 25 sections per template, per-section limits, max_blocks, and static blocks that can’t move.
- Usage everywhere: select a section and every other template using the same file gets a dashed outline.
- Pick blocks off the live page on themes that print their block ids, like Horizon.
Small things that keep it trustworthy.
- Undo writes the file back exactly, key positions and comment headers included, so undo never leaves a stray diff.
- Measurements use timers, not animation frames. Browsers throttle animation frames in off-screen cross-origin iframes, which quietly stalled the page measurements until the script switched to timers.
- Library previews clean up after themselves. Rendering presets needs temporary templates in the theme; stick removes them on exit, and removes any left behind by a crash on the next start.
- Tested against real themes. Unmodified copies of Dawn and Horizon live in the repo as fixtures, next to a tiny theme built to hit every edge case.
Four milestones down, one to go.
- M0, Oct 14: Theme model, usage index and a command-line site map
- M1, Oct 14: Read-only canvas with layers and properties panels
- M2, Oct 21: Live frames from theme dev, settings editing with undo
- M3, Oct 22: Add, remove, hide and reorder; section library; block picking
- M4, next: Components: linked settings across templates, with per-page overrides, like Figma instances