The Shop Canvas kit
What is in the kit, how the pieces fit, and where each one is documented.
Shop Canvas brings together the Shop Canvas Framer plugin, an AI setup skill, editable commerce components and a starter storefront. Shopify manages products, inventory, orders and checkout; Framer is where the storefront is designed; Shop Canvas connects the two.
Plugin
Insert and Store: connect, sync, cart & checkout setup, components — the panel inside Framer.
Components
Every commerce component, what it does, and which ones bind to the CMS.
Runtime
The small piece of code that makes the storefront work, and where it lives.
Shopify
Headless channel, public Storefront token, markets and currency, checkout domain.
AI skill
The optional agent path: what it reads, what it never asks for.
Licence and terms
The approved launch price, updates, support and refund terms.
Release status
What is delivered, what is a prototype, and what is still open.
How the pieces fit
| Piece | Job | Where you see it |
|---|---|---|
| Plugin | Connects a store, fills the CMS, hands over the runtime, keeps components current | Framer → Plugins → Shop Canvas |
| Components | Ordinary code files you own: catalog, product page, cart, SEO | Framer → Assets → Code |
| Runtime | One <script> you paste yourself; reads the catalog and runs the cart | Framer → Custom Code |
| Products CMS collection | The product list your page designs use; created by the plugin, owned by you | Framer → CMS → Products |
| AI skill | The same sync engine as the plugin, driven from a prompt | Your agent tool |
| Starter template | A finished store to remix: pages, collection, components, design | Your Framer workspace |
Setup itself is one page: the seven-step guide.