Plugin

The plugin is the main setup path. It has two tabs, Insert and Store, plus a Help page and an account page.

Insert

The approved buyer journey: Insert → choose a section → choose a product → Add to canvas → customize in Framer.

• Choose a section from the library (a product page, a shop grid, a cart, and so on).
• Choose a product for it. A sample catalog is available before a store is connected, and it is labelled as demo data; live products come from the connected store.
• Add to canvas. The section lands on the current page as a code component you restyle with Framer controls; its inner parts stay one component.
• Customize in Framer: styles, layout, copy and bindings are yours.

Demo and live sources are kept visibly separate. A section built from sample data does not create a real cart or touch Shopify.

When you are signed in, Insert also shows the Set up your store checklist: sign in, connect your Shopify store (pick it under Your connected stores and choose Use this store), then Connect this project.

Store

Everything that connects the project to a real Shopify store.

Shopify connection

Three routes inside the plugin, and one on the website:

• Connect Shopify (signed in): approve Shop Canvas in Shopify. The domain, a public Storefront token and the market fill in on their own; Shop Canvas creates or reuses that token for your store.
• Link store to your account (signed in): paste the store’s public Storefront token, select Get my code, add the code to Shopify Settings → Brand → Slogan, then Verify and link store.
• Paste a Storefront token: the permanent .myshopify.com domain, the public Storefront API access token and the two-letter country you sell into. This works for this project only and does not link the store to your account.
• Your own Shopify app: link it on the website at shopcanvas.ai/account/link-store with its Client ID and secret, or an older Admin API access token. Those credentials go to Shop Canvas, not into the plugin: the plugin has no field for a secret or an Admin token, and only the public Storefront token reaches the project.

Check and save reads the store name, country and currency back from Shopify before anything is written. Details: step 04.

Sync catalog

Preview product changes shows how many products would be added, updated or removed, and a sample product; products removed from Shopify are marked as drafts in Framer, not deleted. Apply product sync writes to the Products collection, which stays your collection to edit. If a URL or slug conflict is reported, stop and resolve it before using Apply. The default sync keeps curated images on existing items. Download review (local file) saves the preview on your computer and sends nothing. Details: step 05.

Cart & checkout setup

The plugin does not install the cart and checkout script for you. Copy snippet, paste it into Framer Custom Code, and choose I pasted this into Custom Code. After publishing, Show published site gives you a link to open your published page yourself, where you can look for the script in the page source. The plugin never loads your site. Keep exactly one Shop Canvas commerce script. Details: step 06 and Runtime.

Advanced

• Component files & recovery installs and updates the commerce components as code files in your project.
  • Re-read before updating. Bulk updates skip edited or unrecognized files.
  • Review shows your current source and the incoming kit source. Choose Keep my file, merge changes in Framer's code editor, or Back up and replace.
  • Recovery lets you inspect and restore the exact previous file. There is one recovery copy per component, stored in a ShopCanvasRecovery_ code file in this project. Keep these files.
  • Before installing over an edited project, duplicate the project or back up your code files: the current installer can overwrite edits. Run only one component updater/editor at a time.
• Diagnostics reports what the plugin can see: versions, connection details and the last sync.
• Shop Canvas account shows your linked stores and runs Check configuration on your device. Nothing from your Framer project is uploaded.

Shop Canvas accounts are live. You need one for Connect Shopify, Link store to your account, the setup checklist and a paid plan; pasting a Storefront token needs no account.

Help

The Help page, bottom-left, walks through your first section.

Where the plugin runs