◧ Shop Canvas
Plugin-free Shopify commerce for Framer
Sell on Shopify. Own the code.
Shop Canvas wires your Framer site straight to the Shopify Storefront API — real cart, real checkout, live pricing per market. The runtime lives in your Site Settings as code you can read and edit, not a plugin that vanishes the day it disconnects.
Get the template
21 components · direct Storefront API · 0 plugins, 0 subscriptions
Soft Cotton Hoodie
AED 336
Add to Cart
Why Shop Canvas
Own your commerce. No plugin in the way.
Most Framer commerce hides your store behind a plugin — code you cannot see, a subscription, and a store that breaks when the connection drops. Shop Canvas is the opposite.
01
No plugin dependency
The runtime is a script in your Site Settings. Read it, edit it, keep it. Nothing is hidden in plugin-owned custom code, and nothing disappears on disconnect.
02
Real Shopify checkout
Direct to the Storefront API: a live cart, variant selection, per-market pricing, then handoff to Shopify-hosted checkout. Not a mock, not a link.
03
Native Framer CMS
Products sync into a Framer collection you own. Bind cards and product pages to real fields and edit everything the Framer way.
04
21 components, drop-in
Gallery, variant matrix, add-to-cart, cart, stock, quantity, related, size guide, favorites, SEO JSON-LD. Install and bind — no code to write.
21
Commerce components
Every piece of a storefront, source included and yours to fork.
0
Plugins and subscriptions
One runtime you paste once. No monthly fee, no vendor lock-in.
100%
Your code, your project
Runtime and components live in your Framer project and Site Settings.
LIVE FROM THE STORE
Real products. Real checkout.
Every card below is live Shopify data — open a product, pick a variant, add to cart. No plugin in between.
What’s inside
A full storefront, in parts you can place.
Twenty-one components, each a plugin-free replacement for a piece a commerce plugin used to own — bound to your CMS and driven by the runtime.
gallery
Product gallery
Main image plus thumbnails, switching to the right photo when a variant is picked.
variants
Variant matrix
Colour and size and beyond — every option combination resolved to a real Shopify variant.
cart
Cart and add-to-cart
Live cart lines, quantity, subtotal and Shopify checkout, updating as shoppers add.
stock
Live stock status
In-stock, low-stock and sold-out states pulled from Shopify inventory in real time.
catalog
Catalog, filter and search
Filter, sort, search and paginate a CMS product list with shareable URL state.
seo
SEO JSON-LD
Product and FAQ structured data so your storefront reads correctly to search engines.
How it works
From Shopify store to live Framer storefront, in four steps.
A fixed path — the connector handles setup, and the store runs on the runtime, not the plugin.
1
Connect
Point Shop Canvas at your Shopify store with a public Storefront token — it confirms the shop, its markets and its shipping zones.
Public Storefront token
Shop confirmed
Markets detected
Shipping zones checked
Per-country pricing
2
Sync
Pull products, variants and images into a Framer CMS collection you own. Re-run any time — nothing is locked to a plugin.
Products & variants
Product images
Collections
A CMS you own
Re-runnable any time
3
Install
Drop the 21 components onto your pages and bind them to the CMS fields. No component code to write — the demo shows every binding.
21 components
Bind to CMS fields
No component code
Catalog · product · cart
Demo bindings shown
4
Ship
Paste the runtime into Site Settings and publish. A live Shopify storefront, running on code that lives in your own project.
Paste the runtime
Site Settings → Code
Publish
Live Storefront cart
Real Shopify checkout
Compare
A commerce plugin vs. Shop Canvas
Both put a Shopify store in Framer. Only one leaves you owning it.
SHOP CANVAS
A COMMERCE PLUGIN
Where the code lives
✓ In your Site Settings, readable and editable
✕ Hidden in plugin-owned custom code
Cost
✓ One-time — no subscription
✕ Monthly subscription, per store
If the connection drops
✓ Keeps working — it is your code
✕ The storefront stops working
Components
✓ 21 components, source included, fork them
✕ Locked to the vendor set
Roadmap
✓ Yours — a template, not a service
✕ Whatever the vendor ships next
FAQ
The questions buyers ask first
Do I need a Shopify plugin?
No. ShopKit talks to the Shopify Storefront API directly from a script you paste into your Site Settings. There is no plugin to install, subscribe to, or keep connected.
Does checkout actually work?
Who owns the code?
Can it handle multiple currencies and markets?
Which Shopify plan do I need?
There is a plugin, though — what is it for?
Ship your Shopify store this week.
Get the template and the free connector. Connect your store, sync your products, publish a storefront you actually own.
◧ Shop Canvas
Plugin-free Shopify commerce for Framer. Real checkout, native CMS, code you own.
Product
Components
Runtime
Template
Live demo
Docs
Setup
CMS sync
Markets and currency
FAQ
More
Why plugin-free
Changelog
Licence
Buy
© 2026 Shop Canvas
Framer × Shopify · Storefront API