Set up an agent to work on your store.
Four steps, and three of them are Framer's. Installing an agent's tools does not connect your Shopify store — that is a separate step you take in Shop Canvas.
Optional / an alternative to the seven steps
The plugin is the main path, and it is complete on its own. This page is for building the same storefront by asking an agent instead — Framer’s built-in Agents, Claude Code, Codex, Cursor or another assistant Framer supports.
The thing to know before you start: there are two connections, not one. Framer's setup connects an agent to your project. Your Shopify store is connected separately, in Shop Canvas, inside that project. Nothing in Framer's flow touches Shopify, and installing an agent's tools does not authorise Shop Canvas.
The four steps
Install Framer's agent tools. Framer publishes the installer and the exact command, and both change from time to time, so follow their page rather than a copy of it: framer.com/agents/external. This step installs tools on your machine. It connects nothing yet.
For agents that support skill packages, you can also install the public Shop Canvas setup stub (steering and safety prompts only):
npx skills add zmolly/shopcanvas-skills --skill shopcanvas-setupThe full skill folder in your kit — SKILL.md, references/ and scripts/ including the bundled
sync engine — ships with the kit and is not published as a public recipe.
Authorise your Framer project. Ask your agent to connect to the project, then approve it in the browser when it asks. Framer scopes this to the projects you explicitly connect, and agents work on a canvas branch, so you review before anything is published.
This gives the agent your canvas. It does not give it your catalog.
Connect your Shopify store in Shop Canvas. Open the plugin in that same Framer project and connect your store on the Connect screen, exactly as you would without an agent — see step 04. Keep the token there; it belongs in the plugin, not in a prompt. Prefer the plugin for Connect, Sync and runtime steps; use the public Storefront token only.
If you purchased the kit, install the complete skill folder for your agent using its local-skill
workflow. Opening SKILL.md alone does not grant access to the bundled scripts.
Ask for the first change. With both connections in place, describe what you want built. Ask for a preview before anything is applied. Publish only when you explicitly say yes.
Use the Shop Canvas setup skill in this kit. Confirm the connected Framer project and store. Read the saved configuration, preview catalog changes with the bundled sync engine, preserve my curated images, and stop if URLs conflict. Show me the plan before applying. Do not publish.
Select and copy the prompt above. Your agent service may charge separately.
After Framer's installer finishes
Framer's installer tells you its own tools are ready. It cannot tell you about Shop Canvas, so the next move is yours:
Framer's agent tools are installed. Next, ask your agent to connect to your Framer project and approve access in your browser. Then open Shop Canvas in that project to connect your Shopify store.
What the agent does, and what it does not
The skill gives an agent a guide to this kit: how the configuration is stored, how the bundled sync engine previews catalog changes, what to preserve and when to stop. It reads from Shopify; it does not place orders, and it does not publish your site.
Ask it to show a plan first, and run one sync at a time. You review the result in Framer and decide when to publish, the same as any other change.
A green connection check in the plugin is not enough if product pages bind to the wrong CMS collection. Diagnosing page bindings is operator work in the full kit skill; the public stub does not replace that review.