Your first store, one step at a time.

Your Shopify store: access to products, sales channels and settings, plus permission to approve an app if you want the one-click connection. Start with one product you can use for testing.

Your Framer workspace: permission to edit the project and its CMS. Before publishing, check that your site plan includes CMS capacity for your catalog and Custom Code.

The Shop Canvas plugin: free to install from the Framer Marketplace at https://www.framer.com/marketplace/plugins/shop-canvas/. A Shop Canvas account is needed to connect or link a store to your account (Connect Shopify, the public token and code link, or your own Shopify app on shopcanvas.ai) and for a paid plan. Pasting a public Storefront token for one project needs no account. Shopify and Framer fees are separate; an AI service is optional.

Open your test product. Set Status to Active and use Publishing → Manage to include the sales channel your storefront reads, such as Headless or a named storefront. Check that the product is available in the market you will test. Save.

In Shopify → Settings → Domains, note the permanent address ending in .myshopify.com. Use that address rather than a custom domain. The approval route fills it in for you; you will type it yourself if you connect by hand.

Only if you will connect by hand: install Shopify’s Headless channel, open a storefront, and find its PUBLIC Storefront API access token. Keep that screen open for step 4. Do not use a private token, Admin token, app secret or password.

Open the verified starter remix at https://framer.link/bDMDw5T?via=molham51, or use the remix link on this docs site. Give the new project your store’s name so you can recognize it later.

Confirm the project contains the shop, product and cart pages, a Products CMS collection, and the Shop Canvas components.

Install Shop Canvas from the Framer Marketplace at https://www.framer.com/marketplace/plugins/shop-canvas/ and open it in that same project. Before you connect a store, you can choose Try demo store to add a section with sample products.

One-click: sign in to Shop Canvas in the plugin, choose Connect Shopify, then Continue to Shopify and approve access. Shop Canvas creates or reuses a public Storefront token for your store, and the domain, token and market fill in on their own.

When Connect Shopify is blocked: link with a public token and a one-time code. In Shopify admin, open Sales channels, Headless (add the free Headless channel from the Shopify App Store if it isn’t listed), select Create storefront and copy the Public access token. In the plugin, open Link store to your account, sign in, enter your .myshopify.com domain, paste the token and select Get my code. In Shopify admin, open Settings, Brand, add the code to your Slogan and save, then select Verify and link store in the plugin. You can remove the code afterwards. Only someone who manages the store can create the token and edit the brand, which is how Shop Canvas knows the store is yours.

Prefer a Shopify app? In the Shopify Dev Dashboard, create an app in the organisation that owns the store, add the Storefront scopes unauthenticated_read_product_listings, unauthenticated_read_product_inventory and unauthenticated_write_checkouts, release it and install it on the store. Then sign in at shopcanvas.ai/account/link-store with the same Shop Canvas account and paste the app’s Client ID and secret from App settings (or, for an older app from Settings, Apps, Develop apps, its Admin API access token). The plugin never asks for these: they go to Shop Canvas once, are checked with Shopify and are never shown again. Back in the plugin, the store appears under Your connected stores in the setup checklist; choose Use this store, or Refresh setup status if it isn’t listed yet.

Or enter a public Storefront token for this project: the permanent .myshopify.com domain, without https:// or a page path; the public Storefront API access token from step 2; and the two-letter country code you sell into. This works for cart and catalog in this project, but does not link the store to your account. Keep token values out of support screenshots and agent chats.

Check the country before you save. It decides the market Shop Canvas reads prices and availability for, and the current plugin defaults to AE.

Choose Check and save (or Re-check and save if already connected). Read the store name, country and currency it returns, and any shipping-zone warning, before moving on.

Choose Preview product changes. Read how many products would be added, updated or removed, and open See sync details to check a sample product.

Read the image line before applying. The default keeps the images already curated in Framer; the other choice replaces product images from Shopify.

If a URL or slug conflict is reported, stop and resolve it before applying. The current plugin can still allow it when conflicts exist.

When the preview matches what you expect, choose Apply product sync. Open Framer → CMS → Products and inspect the title, image and Product ID of your test product.

In the plugin, open Store → Cart & checkout setup and choose Copy snippet.

In Framer, open Settings → Code → Add Script. Name it Shop Canvas commerce, paste the snippet, choose Start of head, all pages and run once, then save.

Back in the plugin, choose I pasted this into Custom Code, then publish your site and choose Show published site and look for the script in the page source.

Keep exactly one Shop Canvas commerce script. If your starter already contains the commerce components, keep them; before using Components → Install on an edited project, duplicate the project or back up your code files, because the current installer can overwrite edits.

Open the test URL in a fresh browser tab. Find your test product and check the image, price, currency and stock against Shopify.

Choose a variant, add it to the cart, change the quantity and remove it. Add it again and refresh the page to check the cart state.

Choose Checkout. Confirm Shopify opens with the right product, variant, quantity, price and currency. Use the checkout URL produced by the cart; do not manually rewrite it.

Repeat the product and cart checks on a phone. A successful redirect is only a handoff check. Before accepting sales, complete a controlled test order using Shopify’s documented test-payment flow; confirm order records and, for digital products, file delivery.