SETUP
From store to storefront
Four steps from a Shopify store to a live Framer storefront running on code you own.
01
Connect
Add your public Storefront API token to the project config. Shop Canvas confirms the shop, its markets and its shipping zones so pricing and availability resolve per country.
02
Sync
Pull products, variants and images into a Framer CMS collection you own. Re-run any time to refresh — nothing is locked to a plugin.
03
Install
Drop the components onto your pages and bind them to the CMS fields. Every binding is shown on the demo Product, Shop and Cart pages.
04
Ship
Paste the runtime snippet into Site Settings → General → Custom Code → Start of <head>, then publish. Your storefront now runs on code that lives in your own project.
The runtime snippet
<script data-domain=”your-store.myshopify.com” data-token=”your-storefront-token” data-country=”AE” data-api-version=”2026-07”>/* the Shop Canvas runtime — copy it from the plugin’s Runtime tab */</script>
Products CMS fields
Title
Product ID
Variants
Image Variant IDs
Image 1…8
Video 1
Price
Compare Price
Availability
Rating
Vendor
Product Type
Product Tags
Collections
SEO Title
SEO Description
Description
Date Created
◧ Shop Canvas
Plugin-free Shopify commerce for Framer. Real checkout, native CMS, code you own.
Docs
Setup
CMS sync
Markets and currency
FAQ
© 2026 Shop Canvas