Chapter 03

How your Framer project should be set up

The plugin looks at your project first and fits itself in. A few names and fields tell it where everything belongs, and ten minutes of preparation means every building block lands in the right spot on the first run.

Before you start

Run through this page before you open "Set up shop". The plugin reads your project and places each building block next to what is already there, so what it finds decides where things go. Nothing here is required - the plugin runs on any project and reports what it did for each step - and each point below makes one more step land on its own.

If you use a kspr studio template, everything on this page is already in place. Go straight to connect Stripe.

What the plugin does with work you already have

The plugin adds, it never overwrites. When it finds something of yours in the place it was going to use, it keeps your version and says so in the result for that step.

That is worth knowing in advance, because on a finished site it can look as though the run did very little:

• a page that already has your own content keeps it, and the plugin notes that it left the page alone;
• a cart button anywhere in your project means no second one is added;
• a file of yours with the same name as a shop component stops the run, with a note telling you which one to rename.

None of those is a failure. Each one means one thing is now yours to finish: place the component from Assets → Code → Shop where you want it, or let the plugin use an empty page. Read the result of each step - it says exactly which of the two applies.

This is also why the two kinds of project behave differently:

1. The pages you need

Three things are worth knowing:

1. **A home page at / has to exist.** The plugin puts the cart button there when it cannot find a navigation component. Without it, that step reports back that there is no home page.
2. The detail page is yours to create. A plugin cannot add CMS pages in Framer. In Framer's pages, click +, then New CMS page and Detail page for your product collection. Do this first and "Add to Bag" lands on it during the run; do it later and you run "Set up shop" once more.
3. **Leave /thanks and /cart-cancelled to the plugin if you do not have them yet. It creates both with the right component inside. If you already designed those pages, keep them - the plugin leaves them as they are and tells you so. You then add the component yourself from Assets → Code → Shop**.

2. How your product collection should look

Name the collection "Products" and give it a text field called "Stripe Price ID". With that field, the plugin finds your collection every time, whatever else it contains.

Without it, the plugin looks for a price field plus a collection name that sounds like a shop ("Products", "Shop", "Store", "Merch", "Catalog", "Items"). That works, and it is easier to get wrong: a collection called "Items" with a text price and several journal-style fields (Content, Author, Date, Tags) reads as a journal rather than a shop, and the plugin passes over it.

These are the fields the shop uses. The plugin adds any that are missing, so you only need to create the ones you want to fill yourself:

Framer provides the slug itself. Leave "Stripe Price ID" and "Stripe Variant IDs" to the plugin - it writes them when you update your products.

A field that already exists under a different name is used as it is: "Title" counts as the name, "Amount" as the price, "Cover" or "Photo" as the image. Rename nothing just for the plugin.

> Tip: if you keep several collections, give the one with your products the clearest name. The plugin picks the first collection that looks like products, and under "Products" in the plugin you can always point it at a different one.

3. Component names

The plugin fits its building blocks next to yours, and it looks for two things by name: a navigation component for the cart button, and your own button components when you want to use them in place of the built-in one.

Two habits help here:

1. Give components distinct names. Two components with the same name are easy to mix up when you pick one in a property - you choose the name you want and get the other component. Your button then stays as it was, because the layer belongs to a different component than the one on your page.
2. Delete components you no longer use. An old draft with a familiar name is the most common reason a building block ends up somewhere unexpected.

If your navigation is a component, the plugin puts the cart button inside it, so the cart appears on every page at once. If your navigation has several variants - one for phone, one for a scrolled state - check the cart button's position in each of them afterwards.

4. Using your own button

Every shop component takes a Framer layer of yours as its button. You design the button once, in your own style, and the shop uses it for the real thing: the click, the loading state, the counter and the checkout stay with the component.

To prepare for it, build a button component with one variant per state:

Hover and pressed states work as usual. Give the variant root a fixed width in pixels - Framer does not allow percentage or fraction widths there, and a fixed width is the better behaviour anyway: your button stays on one line next to the quantity stepper instead of breaking onto its own row.

Then select "Add to Bag" in the editor and put one instance of your component into each of the button fields on the right. Every field is optional - leave them empty and the component draws its own button.

Where to keep your button layers

The plugin adds a page called "Shop Design". That is the place for this work: it shows each shop building block side by side, each one in a frame whose layer name tells you what belongs there. The page stays outside your website - it is never published, appears in no navigation and needs no SEO.

Build your button there rather than on your product page, and keep it there. The button is yours to draw - the page gives it a home, so you design it once instead of keeping a copy on the product page, another on your cards and another in the header. Once it exists, select the shop component and choose your layer in its "Button layer" property.

If the page shows fewer blocks than you expect, read the result of that step: it lists by name what it could add and what it left out, and the rest of the run is unaffected. You can add any missing block yourself from Assets → Code → Shop.

A layer can serve several components at the same time, so one button can appear in the cart, on the product page and on the thank-you page.

5. Running the plugin again

You can run "Set up shop" as often as you like. It never creates anything twice, and your work is kept:

• Your edits stay. The plugin only replaces the shop components it wrote itself and that you have not changed. Edit one and it stays as you left it, until a newer version of the components comes along - and the previous version is always in Framer's version history.
• A file of yours with the same name is never touched. The run stops and tells you which file to rename first, so nothing of yours is overwritten.
• Pages with your own content stay as they are, and the plugin says so.
• Your collection is only added to. Existing fields and entries stay; missing fields are added.
• One cart button is enough. If your project already has one - yours or the plugin's - no second one appears.

A short checklist

1. Home page at / exists.
2. Product collection is called "Products" and has a text field "Stripe Price ID".
3. A CMS detail page for your products exists.
4. Components have distinct names, unused ones are deleted.
5. Your button component has the four states, with a fixed width.

Then open the plugin and go to a shop in your own Framer project.