Code Canvas Store

The managed commerce store is an Unlimited (and Teams) feature. On Free and Starter the Store tab shows an upgrade prompt instead of the create button. Upgrade any time from Settings → Billing or the pricing page.

Open a Code Canvas project, switch to the Store tab in the sidebar, and click Add a store. Provisioning your dedicated backend takes a moment — the panel shows a friendly "being created" state and updates itself automatically when the store is ready.

You can keep building your front end while the store provisions. Once it's active, the panel surfaces your Store API URL and publishable key with copy buttons, plus a Manage store button that opens the Medusa Admin.

The preview iframe and your published site both expose window.__store. It carries the config plus convenience helpers over the Medusa Store API — no SDK bundling required:

// List products
const { products } = await window.__store.products.list();

// Create a cart and add an item
const { cart } = await window.__store.cart.create();
await window.__store.cart.addLineItem(cart.id, variantId, 1);

// Raw fetch (publishable key attached automatically)
const data = await window.__store.fetch('/store/regions');

• Every call attaches the x-publishable-api-key header for you.
• All helpers return promises — always await and wrap in try/catch.
• Never hardcode product data or a secret key — read live data through window.__store.

For React / TypeScript projects, Theo can use a typed opencharts-store helper module that wraps the Medusa JS SDK and reads the same injected config:

import { listProducts, getProduct, createCart, addToCart, getCart, checkout }
  from "./opencharts-store";

const { products } = await listProducts();

It's configured with the publishable key only — safe for the browser. Just npm install @medusajs/js-sdk in your project.

Once a project has an active store, Theo writes storefront code against your real data instead of mock products. Ask for something commerce-shaped — "build a product grid", "add a cart", "make a checkout page" — and Theo follows a canonical product grid → product page → cart → checkout flow wired to window.__store, using your store's real currency and region.

For React / TypeScript projects (anything with a package.json), Theo also drops the typed opencharts-store.ts helper into your project automatically the first time you iterate, so you can import it right away. Static HTML projects skip the file and keep using the zero-dependency window.__store runtime.

This is UI scaffolding against your store's publishable surface — add and manage your actual products, prices, and inventory in the Medusa Admin via Manage store.

Manage store opens the stock Medusa Admin for your catalog and orders. Restart bounces the backend if it gets into a bad state. If a store is ever suspended, the panel offers a one-click Resume.

Removetears the store down permanently — products, orders, and data included — behind a confirmation step. There's no undo, so export anything you need from the admin first.