SiteShipper Studio · Pipeline Plan v0.1

00My recommendation

Split it into two halves. Studio runs on Cloudflare. Stores run on Shopify.

Don't build or host the storefronts with Astro. Each client store should be a native Shopify Liquid theme (Online Store 2.0), built from one shared section library that you keep in GitHub. The AI never writes free-form code for a client. It writes JSON templates and settings that pick and configure sections from the library. That's the Shopify version of the Maker Sites block model.

Everything around the store (payment, client portal, uploads, the AI build engine, comments, your admin) is a fork of the Maker Sites platform: Astro SSR on a Cloudflare Worker with D1, R2 and Queues, deployed with Wrangler like Maker Sites is. It talks to each store through the Shopify Admin GraphQL API.

Theme Editor is your manual editor, free. No builder to build. You and the client edit in Shopify's own editor.
Apps just work. Judge.me, Klaviyo and the rest put app blocks into Liquid themes. With a headless or Astro storefront most of them don't work.
Transfer is clean. The client gets a normal Shopify store with nothing external to host, and no Cloudflare bill per client.
You reuse what you have. Auth, email, MCP, AI requests, comments, D1 and R2 already exist in Maker Sites.

01The pipeline, end to end

Ten stages. AUTO runs by itself, AI is Claude doing the work, YOU needs you, CLIENT waits on the client.

01

Pay & account
AUTO
Stripe Checkout on the sales page. The webhook creates the client, a project in state intake, and emails a magic sign-in link.
02

Intake portal
CLIENT
A guided form with autosave covering brand basics, logo, colours and fonts if they have them, three to five reference stores, product CSV or photos, target customer, tone, policies and domain. Uploads go straight to R2.
03

Brief synthesis
AI
Claude reads everything (images included) and writes a structured brief.json with brand tokens, audience, sitemap, a section plan per page, voice and the product structure. You get a one-screen summary.
04

Store provisioning
YOUAUTO
You create a client-transfer store in the Partner Dashboard and install the SiteShipper connector app (about a 2 minute click). The Studio picks up the token and pushes the base theme.
05

AI build
AI
The AI generates theme settings, JSON templates per page, copy, navigation, collections, products (with productSet and staged image uploads) and policy drafts. It validates everything, then pushes to an unpublished theme.
06

QA pass
AUTOAI
Cloudflare Browser Rendering screenshots every page on desktop and phone. Claude reviews them against the brief, fixes what it can, and flags the rest for you.
07

Your review
YOU
You polish in the Shopify Theme Editor or use section-scoped AI from the Studio. When it's ready, the client gets a preview link.
08

Client comments
CLIENTAI
The client clicks any section and leaves a pinned comment. The AI turns comments into proposed edits for that section only, and you approve them with Keep or Discard.
09

Apps & launch prep
YOUAUTO
Install the app stack for their tier. App blocks are already in the templates. A checklist covers payments, shipping, taxes, domain, legal pages and test orders.
10

Transfer & handoff
YOUCLIENT
You transfer ownership and the client picks a paid plan, which starts your Partner revenue share. You keep collaborator access, and a Loom-style handoff video plus guide goes out.

paidintakebriefedprovisionedbuildingin_reviewclient_reviewlaunch_preptransferredcare

Project states in D1. Each move fires email and webhooks, and the portal shows the client where they are.

02Architecture: three planes

Plane AStudio · Cloudflare

Fork of the Maker Sites platform/. One Worker, Astro 7 SSR. Deployed with Wrangler.

Sales sitesiteshipper.studio · Stripe Checkout

Client portalintake, uploads, status, comment view

Studio adminprojects, brief, section AI, approvals

Build engineQueues + Workflows → Claude API

MCP serverClaude Code works on any store

Shopify bridgeAdmin GraphQL, webhooks, OAuth

D1 · projects, briefs, comments, ops log R2 · uploads, snapshots, screenshots Browser Rendering · QA shots

theme JSON, products, files→

←webhooks, editor changes, comments

Plane CShopify · Partners

One client-transfer store per client. Nothing hosted by you.

Client storedev store → transferred

Unpublished build themeAI writes here

Theme Editoryour manual design tool

Connector appyour Partner app, custom install

App stackJudge.me, Klaviyo, …

Plane BTheme system · GitHub

One repo, siteshipper-theme. Versioned base theme plus the section library.

Base themeforked from Shopify Horizon

Section library~40 sections × variants

Schemaswhat the AI is allowed to set

CItheme-check, Lighthouse, visual diffs

A tagged release is zipped to R2. The Studio installs that version into new stores and can upgrade existing ones.

Why not Astro storefronts or Hydrogen?

	Liquid theme (recommended)	Hydrogen / headless	Astro on Cloudflare
Client can edit after handoff	Theme Editor, built in	Needs a dev	Needs your editor forever
Shopify apps (reviews, upsells, popups)	App blocks drop in	Most need custom work	Most need custom work
Clean ownership transfer	One store, done	Oxygen ties to store, OK	You still host it
Your running cost per client	$0	Low	Low, but forever
Design ceiling	High with a good library	Unlimited	Unlimited
Fit for an affordable, repeatable offer	Best	Overkill	Wrong shape

Astro and Cloudflare are still the right tools for the Studio. They just shouldn't serve the stores.

03The modular design system

This is the Maker Sites idea of "unlimited freedom through typed properties", rebuilt on Shopify's own primitives so that Shopify's editor understands every piece.

Tokens: settings_schema.json holds colour schemes, a type scale, radius, spacing rhythm, button and card styles. The AI sets about 30 values and the whole store re-skins.
Sections: About 40 sections cover hero, product grid, feature rows, UGC, comparison, bundles, FAQ, story, press bar and more. Each has 2–4 layout variants chosen by a setting rather than by a new file.
Blocks: Theme blocks (text, media, button, badge, product card, app block) can be nested inside any section.
Templates: JSON per page type: home, product, collection, about, landing. This is what the AI writes.
Recipes: Proven page "recipes" by niche (beauty, apparel, food, home, gadgets) that the AI starts from instead of a blank page.

templates/index.json · written by AI

{
  "sections": {
    "hero_a1": {
      "type": "ss-hero",
      "settings": {
        "variant": "split-media",
        "color_scheme": "scheme-2",
        "heading": "Coffee that tastes <br> like the origin",
        "media": "shopify://shop_images/hero.jpg"
      },
      "blocks": { "cta": { "type": "button", ... } }
    },
    "reviews_b7": {
      "type": "ss-reviews",
      "blocks": {
        "jm": { "type": "@app" }  // Judge.me
      }
    }
  },
  "order": ["hero_a1", "reviews_b7", ...]
}

Section keys such as hero_a1 are the anchors. Comments, locks and section-scoped AI all use them.

04The AI build engine

Inputs

brief.json from intake
Reference store screenshots (vision)
Product photos and CSV
Section library manifest and schemas
Niche recipes and your past winning builds

Steps (Cloudflare Workflow)

Tokens: palette, type, shape
Sitemap and nav
Section plan per template
Copy pass in the brand voice
Products, collections, metafields
Validate against the schema, then push
Screenshot, self-critique, one fix round

Guardrails

Edits are ops on JSON only, never raw Liquid or CSS
Every op is logged, diffable and undoable (R2 snapshot)
Section locks: AI and comments can't touch them
No made-up reviews, claims, prices or stats
Each step is retryable and resumes from the last one that finished

Section-scoped AI. In the Studio, pick a section and choose Redesign, Rewrite copy or Try 3 variants. The model gets only that section's JSON, the tokens and the brief, and returns ops for that key alone. Same idea as B1/B2 in Maker Sites. It also works over MCP from Claude Code.

05Comment view & revision loop

1Client opens previewa tokenised link to the unpublished theme

2Comment modehover outlines each section; click to pin a note

3Stored in D1section key, block id, page, screenshot

4AI proposes opsscoped to that section

5You Keep / Discardor fix by hand in Theme Editor

6Reply & resolveclient sees "done", with before/after

How the overlay gets onto a Shopify page

The base theme ships a tiny ss-review snippet. It only renders when the build theme's review_mode setting is on and a signed token is in the URL. It loads the comment script from the Studio, reads #shopify-section-* ids and posts to the Studio API. Review mode is switched off before handoff, so nothing is left in the live store.

Keeping AI and manual edits in sync

When you edit in the Theme Editor, Shopify changes the same JSON files. Before every AI op, the Studio reads the file checksum. If it has moved, it pulls the new version first (the same expectedVersion rule Maker Sites uses), so the AI never overwrites your hand edits.

06Standard app stack

Picked for ROI and reliability. Each app has a pre-placed block in the templates, so install plus one setting finishes it. Several have their own partner programs, which adds a second affiliate stream. Confirm current pricing and terms before quoting.

Core · every store

Shopify Search & Discoveryfilters, recommendations · free
Judge.mereviews, photo reviews, rich snippets
Klaviyoemail and SMS, popups, abandoned cart and welcome flows
Shopify Formsemail capture · free
Google & YouTube + Meta channelsGA4, pixels, Shopping feed · free
Shop Pay + Shop appconversion lift · free

Growth · add-on

Shopify Bundlesbundles and kits · free
Rebuy or ReConvertupsells, cross-sells, thank-you page
Smile.ioloyalty and referrals
Translate & Adaptmulti-language · free
Shopify Inboxchat · free

Scale · by niche

Recharge / Shopify Subscriptionsconsumables, coffee, supplements
Loop Returnsapparel, higher volume
OkendoUGC and reviews alternative
Product Booth studioyour own render upsell

App installs need a click on each store (merchant OAuth), so the Studio gives you a per-store checklist with deep links rather than trying to automate it.

07Shopify Partners: what's automatic, what isn't

Step	How	Automatable?
Create the client store	Partner Dashboard → Stores → client transfer store	Manual · ~1 min
Get API access	Install your SiteShipper Connector Partner app (custom distribution) on the store	One click, then token saved
Push theme	`themeCreate` from an R2 zip, then `themeFilesUpsert`	Yes
Products and images	`stagedUploadsCreate` + `productSet`	Yes
Navigation, pages, policies	`menuCreate`, `pageCreate`, policy mutations	Yes
Install apps	Deep links, merchant approves	Manual · checklist
Payments, tax, shipping	Needs the client's identity and bank details	Client, after transfer
Transfer ownership	Partner Dashboard → Transfer → client email	Manual · 1 click
Keep access	Collaborator request from your Partner account	Client approves once
Revenue share	Starts when the client goes on a paid plan	Check current terms

You click about 4 times per store and the API handles the rest. Once your connector app is installed, the Studio can also take on post-launch care work over MCP.

08Data model (D1)

clientsid, name, email, stripe_customer, tier

projectsclient_id, state, shop_domain, token_ref, theme_id, theme_version

intakeproject_id, answers_json, uploads[] → R2

briefsproject_id, brief_json, version

opsproject_id, file, section_key, ops_json, actor (ai/you/editor), before_snapshot

commentsproject_id, page, section_key, block_id, body, shot, status

ai_requestsscope, prompt, proposed_ops, decision

checklistproject_id, item, done_at (apps, payments, domain…)

09Build order

Phase 1Theme first

Fork Horizon into siteshipper-theme
Build tokens and the first 15 sections
Hand-build one demo store, which becomes the sales-page example
CI with theme-check and Lighthouse

Done when one great store exists, made only from the library.

Phase 2Studio skeleton

Fork the Maker Sites platform, rename, new D1 and R2
Stripe → client → magic link
Intake portal with uploads
Connector app and Shopify bridge

Done when a paid test client lands in a dev store with the base theme.

Phase 3AI build

Brief synthesis
Ops engine for JSON templates
Products and collections import
Screenshot QA loop
MCP tools for Claude Code

Done when intake becomes a reviewable store in under an hour.

Phase 4Review & launch

Comment overlay
Section-scoped AI with Keep/Discard
Launch checklist and app deep links
Transfer and handoff emails

Done when the first real client store is transferred.

10Open questions

Price: set for now. $3,000 for the store, $1,500 for 5 3D twins plus the Product Booth render studio, $250 per extra product. Treat the 3D package as launch pricing and raise it once there are a few happy clients.
Products. Does the AI import their whole catalogue, or the first N products with the client adding the rest?
Revisions. How many comment rounds are included before it becomes paid time?
Domain. Do you connect their domain before transfer, or leave it to them?
Product Booth upsell: decided. Sold from day one as the $1,500 3D package (5 products), $250 per extra product.
Brand. Is "SiteShipper Studio" its own domain, or a section of makersites.dev?

Custom Shopify stores,built by AI from a brief,finished by hand, handed over.

00My recommendation

01The pipeline, end to end

Pay & account

Intake portal

Brief synthesis

Store provisioning

AI build

QA pass

Your review

Client comments

Apps & launch prep

Transfer & handoff

02Architecture: three planes

Why not Astro storefronts or Hydrogen?

03The modular design system

04The AI build engine

Inputs

Steps (Cloudflare Workflow)

Guardrails

05Comment view & revision loop

How the overlay gets onto a Shopify page

Keeping AI and manual edits in sync

06Standard app stack

07Shopify Partners: what's automatic, what isn't

08Data model (D1)

09Build order

10Open questions

Custom Shopify stores,
built by AI from a brief,
finished by hand, handed over.