> ## Documentation Index
> Fetch the complete documentation index at: https://docs.framerfy.ae/llms.txt
> Use this file to discover all available pages before exploring further.

# Build a store

> Ask Claude to build a store on your Framer template: what to say, the order of the steps, where it stops for you, and how to test the result.

Once the connector is set up ([Set up the connector](https://docs.framerfy.ae/ai-builder/install.md)), 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:

   | Card | What happens |
   | - | - |
   | `4242 4242 4242 4242` | Payment succeeds and you land on the order confirmation page |
   | `4000 0027 6000 3184` | A test 3-D Secure popup appears. Complete it to place the order |
   | `4000 0000 0000 0002` | The card is declined |
   | `4000 0000 0000 9995` | Insufficient funds |

   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

| Claude says | What to do |
| - | - |
| No Framer project is connected | Connect one on the **MCP** page of the dashboard ([Set up the connector](https://docs.framerfy.ae/ai-builder/install.md#step-3-connect-a-framer-project)) |
| The store is on the Free plan | The connector builds stores on Pro and Agency. During the beta, ask us to add your account |
| There's no CMS collection named "Framerfy Products" | Products aren't synced yet. Ask Claude to sync your products |
| The confirmation expired, or the arguments changed | Approvals last 10 minutes and cover one exact change. Ask Claude to show the change again and approve the new one |
| Framer won't link product cards to the product page | The product page was made before the collection was created again. Delete the product page in Framer and ask Claude to build the product pages again |
| The layout has no cart button | Add a cart icon or button to your header in Framer, or tell Claude which element it is |
| This API key isn't allowed to publish | Create a new key in Framer with publish rights and update it on the **MCP** page, or publish from Framer |
| The Shopify store is password protected | Shoppers can't reach checkout. In Shopify, open **Online Store → Preferences** and remove the password when you launch |

For anything else, email [support@framerfy.ae](mailto:support@framerfy.ae) with the `run_id` from Claude's last answer. It lets us see each step of your build.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.