Edit your Shopify theme by clicking on it.
midcode opens a Shopify theme folder on a live canvas and edits its code visually. Click anything on your store’s preview to see the Liquid file and line it comes from, change text, classes, images and layout, and the edit is written into your theme’s files: the .liquid markup, or the JSON template and locale file where the text really lives. It runs the Shopify CLI’s theme dev against your own store.
Free for 3 days, no card. Then one payment, yours for life.
v1.1.2Today’s version edits Next.js, React, React Router, Remix and SvelteKit projects. Shopify themes ship with the next release, and every update is included in the license.
- Status
- Next release
- Edits
- .liquid, templates/*.json, locales/*.json
- Needs
- Shopify CLI and a store
- Tried with
- Dawn, on a development store
01/What you can do
What midcode does with Shopify.
Click to Liquid
Select any element on your storefront and read the section or snippet it’s written in, with the line. On Dawn’s home page that’s 488 elements you can click.
Edit text where it lives
A theme’s text is rarely in the .liquid file. Double-click a heading and midcode finds the string in templates/*.json or locales/*.json and changes it there.
Every breakpoint at once
Your site runs live at Desktop, Tablet and Phone, side by side, at full page height. A style set on one breakpoint is written for that breakpoint.
Style without touching the theme’s CSS
The panel writes its own prefixed utilities on the element and keeps their plain CSS in assets/midcode.css, loaded from layout/theme.liquid. The theme’s own styles stay as they are.
Changes show in about two seconds
Each edit is uploaded to your development theme by the Shopify CLI and the preview reloads.
Your agent, on the same files
Point at a product card and ask Claude Code or Codex to rebuild it. Its changes show on the canvas as they land, each one a diff you can undo.
02/Your store
From your Mac to your storefront. The live theme is never touched.
- On your Mac
Your theme folder
- sections/
- templates/
- locales/
- Canvas
midcode
- click → file and line
- edit → minimal diff
- ~2 s
Shopify CLI
- shopify theme dev
- uploads each change
- Safe
Your store’s preview
- development theme
- live theme untouched
midcode edits the theme
Sections
sections/*.liquid
Snippets
snippets/*.liquid
Templates
templates/*.json
Texts
locales/*.json
Layout
layout/theme.liquid
Styles
assets/midcode.css
Stays in your Shopify admin
Products
Shopify admin
Collections
Shopify admin
Orders
Shopify admin
Customers
Shopify admin
Payments
Shopify admin
Shipping
Shopify admin
03/How it works
Three steps. No new workflow.
Step 1: Open the theme folder
The one with layout/theme.liquid. midcode asks for your store once and runs shopify theme dev on a tagged copy, so your own files are never tagged.
Step 2: Edit on the canvas
Click, double-click, restyle. Each change is written to the theme file as a minimal diff, and undone with ⌘Z.
Step 3: Publish
Review what changed, then commit and push. A theme connected to GitHub in Shopify updates from that push.
04/Good to know
The honest part.
What it doesn’t do
- It edits theme code. Products, collections, orders and the rest of your store’s data stay in the Shopify admin.
- What Liquid prints ({{ product.title }}) is data from your store: it’s shown, not edited.
- {% schema %} blocks are left whole. Section settings are still edited in the theme editor, or in the JSON.
- A password-protected storefront needs the password once: run the command in a terminal, or add --store-password.
Coming next
- Section and block settings from the panel.
05/FAQ
Shopify questions. Short answers.
You can edit your store’s theme: the Liquid, JSON and CSS that decide how it looks. midcode shows your storefront’s preview at every breakpoint, and what you change is written into the theme’s files on your Mac. It doesn’t edit products or orders.
The theme editor changes the settings a section exposes. midcode changes the section’s code: the markup, the classes, the text in any file, anything the theme’s developer could change by hand, and it leaves a git diff you can review.
midcode works on a development theme, the one shopify theme dev creates for you. Your published theme changes only when you push or publish the code yourself.
The Shopify CLI, signed in to your store, and the theme’s code in a folder on your Mac. Nothing is added to the theme except assets/midcode.css, the first time you change a style.
Online Store 2.0 themes written in Liquid. It has been tried end to end with Dawn on a development store.
06/Goes with
The rest of your stack.
- Next releaseLaravel. Blade views, edited on the canvas. With or without Vite.
- Next releasePlain HTML. A folder of .html files. No build, no framework.
- Claude Code. A chat beside the canvas, with the element you point at as context.
- GitHub. Branches, commits and push from the Publish panel. Never a force push.
Open your Shopify theme.
Download midcode, point it at your project folder and click something. Three days free, no card, nothing added to your code.