First client launch

Outcome: A remixed Shop Canvas starter project is connected to the client’s Shopify store (or honest demo), catalog is synced, a product page shows real fields, and Preview cart keeps items after reload.

When to use

• Open /admin/agency to see the demo store proof of concept (sample products, not billable) before connecting a client Shopify store.
• Agency console shows Shopify only, not linked, or Reconnect required.
• New client storefront; no Framer plugin project linked yet.
• You are launching from the verified starter remix, not a blank Framer file.

Prerequisites

• Framer workspace with permission to edit the project, CMS, and Custom Code (for runtime).
• Client Shopify store (or explicit approval to use Demo store while waiting).
• Shop Canvas installed in the project, opened with Framer → Plugins → Shop Canvas. Its Framer Marketplace listing is unavailable right now; see release status.
• Optional cross-check: repo docs/evidence/d7a-path-b-smoke-2026-09-20.md (Path B smoke record). When docs/guides/path-b-pilot-script-2026-09-21.md lands on product, align steps with that script; this cookbook does not override it.

Steps

1. Remix the starter
   Open Shop Canvas starter remix and duplicate into the studio workspace. Confirm the project name reflects the client.

2. Open Shop Canvas in that project
   Framer → Plugins → Shop Canvas, the Marketplace install (see Plugin).

3. Choose data source

   • Demo store: On Store, choose Explore demo store for layout work only (no real checkout).
   • Live client: Sign in, then Store → Shopify connection → Connect Shopify and approve in Shopify, or enter domain, public Storefront token, and country; then Check and save. Same saved connection either way.

4. Sync catalog (live only)
   Store → Sync catalog → Preview product changes, then Apply product sync when the preview looks right. Resolve URL/slug conflicts before Apply.

5. Add or bind a product section
   Insert → pick a section (prefer Product details for Path B) → choose a product → Add to canvas. Or assign an existing demo section: Store → Assign your demo sections.

6. Add cart & checkout
   Store → Cart & checkout setup → Copy snippet, paste it into Framer Site Settings → Custom Code (Start of <head>, all pages), then choose I pasted this into Custom Code. The plugin no longer installs the script for you. After publishing, use Show published site and look for the script in the page source.

7. Confirm Preview cart after add to bag
   Open Framer Preview. Note the cart is empty. Add to bag on the product page. Cart should show one item. Reload Preview — that item should persist.

8. Check configuration (optional, account-linked studios)
   Store → Advanced → Shop Canvas account → Check configuration runs the configuration checks inside the plugin. Nothing from the Framer project is uploaded, so the agency console shows whether a project is linked, not these results (and not checkout certification).

Success checklist

• Remix opens in the studio workspace (not only a view link).
• Shop Canvas plugin loads in the client project.
• Demo or live Shopify connection saved (labelled correctly).
• For live: sync applied; Products collection populated.
• Product page shows title/price/options from the chosen product (not blank placeholders).
• Add to bag in Preview shows one item; reload keeps that item.
• Cart & checkout snippet pasted once into Custom Code.

Known footguns

• Store already linked: if Shopify approval ends in “Connection needs another try”, the store may be linked to another Shop Canvas account (for example the client’s). Sign in with that account, or use the three fields.
• Demo vs live: Demo bag does not prove Shopify checkout; switch to live before client UAT.
• Kit re-insert failures (permissions / module errors) are separate from a successful Path B smoke on duplicated sections — see evidence doc.
• GA4 / analytics: Configure in Framer site settings only; Shop Canvas does not manage GA4.
• Typesafe judgment: If Keep vs Use Shopify copy, preservation, or merge decisions appear in Components → Review, stop and escalate to a human — do not bulk-replace client edits without review.

Human review (Typesafe-style)

When the next step requires choosing between Keep my file vs Back up and replace, or when sync would draft client CMS items, pause for human approval before applying. The console cannot certify that choice from account data alone.