Skip to main content
Once the connector is set up (Set up the connector), start a new chat and tell Claude what you sell. For example:
Build a store on my Framer project for small-batch boba tea kits. The brand is Tapio. Use demo checkout for now.
Claude works through the steps below in order and stops when it needs you. Each step that changes your project first shows you what it will do. Read it and say yes, or tell Claude what to change.

​
The steps

1

Read the template

Claude reads every page and its role in the shop, the colour and text styles, and the template’s own products. It tells you about anything that blocks a store build, such as a missing product page or a page without a phone layout. Big templates take up to a minute.
2

Write the catalog

Claude writes about 12 products for your niche: titles, descriptions, options like size or flavour, prices, and photos. Where the template already shows products that fit, it keeps their names, prices and photos. Framerfy checks the catalog against Shopify’s rules (unique handles, at most 3 options and 100 variants per product, prices, image links), and Claude fixes anything it flags.Ask for changes here. It’s the cheapest point to change prices or names.
3

Import the products into Shopify (you)

Claude gives you a download link for a Shopify product CSV. The link works for 7 days.
  1. Download the file.
  2. In Shopify admin, open Products → Import and upload it. Leave Overwrite products with matching handles off for a first import.
  3. Check the preview shows the expected number of products, then click Import products. Shopify emails you when it’s done.
  4. Tell Claude the import finished.
4

Sync the products into Framer

Claude copies your Shopify products into a CMS collection called Framerfy Products in your project. It adds new products, updates changed ones and removes products you deleted in Shopify. Run it again any time your Shopify products change.
5

Build the product pages

Claude builds a product page with the gallery, price, one picker per option, Add to cart and the description, all bound to the CMS. It also adds a product grid to your shop page, and each card opens its product. Both use the template’s colours and fonts. Running this again replaces the Framerfy sections; nothing else on the page changes.
6

Add the cart

Claude adds a cart drawer to the site’s main layout. The header’s cart button opens it and shows the item count. The drawer lists the cart and has an empty state, a subtotal, Checkout and Clear cart.
7

Set up checkout and store pages

You choose how shoppers pay:
  • Demo checkout: a checkout page on your site that takes test cards only, with order confirmation and My orders pages. Use it to show a client a working store before Shopify payments are set up.
  • Shopify checkout: the Checkout button sends shoppers to your Shopify checkout. Use this when the store takes real orders.
Claude also points every Checkout button at your choice, adds Framerfy’s store script to the site, adds a 404 page if the template has none, and can write pages like Shipping, Returns or FAQ from what you tell it.
8

Tablet and phone

Claude adds tablet and phone layouts to every page that lacks them and fixes what usually breaks on small screens: padding, grid columns, rows that don’t fit, oversized headlines. It never changes your desktop design. Pages that already had their own phone layouts are left alone, apart from a fix for stray widths.
9

Publish

Claude tells you where the site will go (staging if your project has it, otherwise the live address) and how many pages changed. After you approve, it publishes and gives you the URL.
10

Check the live site

Claude opens the published site and reports what each page returned:
  • the home page loads
  • every product page loads, has the product name in its title, shows every option value and has an Add to cart button
  • each product’s main image loads
  • the CMS matches Shopify (no missing, extra or out-of-date products) and every variant has a price
  • the checkout pages load, or Shopify’s checkout link works
  • an unknown URL shows your 404 page
If something fails, Claude tells you what the page showed, fixes it, publishes again and re-checks.
You can also ask for a single step, such as “add the cart drawer” or “sync my products again”.

​
Test it yourself

The final check reads the live pages but doesn’t run a browser, so try these yourself before you launch:
  1. On a product page, switch between options. The price and photo should follow.
  2. Click Add to cart. The drawer opens with the product, and the cart count goes up.
  3. In the drawer, click Clear cart. You should see the empty state.
  4. Add a product again and click Checkout.
  5. With demo checkout, try the test cards: Then open My orders. Your test orders are listed. With Shopify checkout, you should land on your Shopify checkout with the product in it.
  6. Open the site on your phone. Nothing should scroll sideways, and no text should be cut off at the edges.

​
If something goes wrong

For anything else, email support@framerfy.ae with the run_id from Claude’s last answer. It lets us see each step of your build.