Runtime
The small piece of code that makes the storefront work — what it is, which version, and where it lives in your project.
The runtime is the small piece of code that makes the storefront work. You paste it once into your own Framer settings; the plugin does not install it for you. It is a single <script> that loads the runtime from shopcanvas.ai and carries your store settings as data attributes, generated by the plugin in Store → Cart & checkout setup so it is never hand-typed.
<!-- Shop Canvas runtime — storefront -->
<script src="https://shopcanvas.ai/runtime.js"
data-domain="your-store.myshopify.com"
data-token="your-public-storefront-token"
data-country="US"
data-api-version="2026-07"></script>The token in data-token is the public Storefront token; it is meant to ship in the storefront. Never put an Admin token, app secret or password anywhere near it.
Version
| Runtime served from shopcanvas.ai/runtime.js | 2.1.7 (checked 9 October 2026) |
| Shopify Storefront API | 2026-07 |
On a published page, window.ShopCanvas.version shows the version that is running, window.ShopCanvas.config shows the domain and token it read, and window.ShopCanvas.isFallback is false when the runtime is live.
Where it lives
In your Site Settings, pasted by you. The guide’s step 06 walks through it.
- In the plugin, open Store → Cart & checkout setup and choose Copy snippet.
- In Framer, open Site Settings → Custom Code and choose Add Script. Name it Shop Canvas commerce, choose Start of head, all pages, run once, paste the snippet and add it. Older layouts may show Custom Code under General.
- Back in the plugin, choose I pasted this into Custom Code.
- Publish, then choose Show published site, open the link and look for the script in the page source. The plugin never loads your site.
This copy lives in your Site Settings where you can read it, and survives without the plugin. A project that still has an older script saved automatically by a previous plugin version keeps working; the plugin does not change or remove it.
Keep exactly one Shop Canvas commerce script and leave unrelated scripts alone. Keep a backup of any existing Shop Canvas snippet before replacing it.
What it does and does not do
- Reads the catalog, prices, variants and stock from the Storefront API for the country you chose.
- Owns one Shopify cart per browser and hands checkout to Shopify’s own checkout URL.
- Reads the catalog from Shopify and creates or updates the shopper’s cart through the Storefront API. It never writes products, inventory, discounts or orders.
- A page can look complete before the runtime is pasted: prices and the cart stay empty until it is. The page looks right but the cart is empty lists what to check.