Chapter 02
Start with the free starter template
The starter brings every moving part of a shop and leaves the design to you. Everything the plugin would ask you to connect by hand is already connected, so your first afternoon goes into your brand instead of into setup.
Who this is for
For everyone starting fresh: you want a shop in Framer, you are starting from a blank slate, and you would rather design it yourself than buy a finished look. The starter is deliberately plain - five greys and one typeface - so your own style has room.
If you want a complete design with its own character, remix a kspr studio template instead. If you already have a Framer site, add the shop to it.
1. Remix it
Open the Stripe Shop Starter and click "Remix". Framer copies the whole project into your account, including the parts that usually take the longest to wire up.
What you get
- a CMS collection "Products" with the eleven fields the plugin expects, and three sample products: one one-off, one with sizes, one subscription - so you see all three button states at work;
- a product page **
/products/:slugwhere "Add to Bag"** is already connected to all ten CMS fields; - a product grid on **
/shop** where every card shows its own product and carries its own buy button; - **
/thanksand/cart-cancelled** with "Order Status" and "Cart Cancelled", a cart button in the navigation, and a mobile menu on the phone; - imprint, privacy and terms as a frame with neutral placeholders, linked in the footer;
- five colour styles and six text styles in greyscale;
- a "Guide" page inside the project with the five steps - it lives outside your website, so it stays private.
2. Connect Stripe
Open the plugin: Canvas → Plugins → Browse all → Stripe Shop for Framer. Then:
- "Connect Stripe" - a normal Stripe login. Shoppers pay into your own Stripe account, and every sale is yours in full.
- "Update products" - this creates a Stripe product and price for each entry and writes the price IDs back into your CMS.
The checkout's test mode costs nothing, so you can run a full purchase with a test card before you subscribe. Details: connect Stripe and test and go live.
3. Your products instead of the samples
The three samples are real entries in your CMS. Replace them with your own and run "Update products" again - your Stripe account then holds exactly your range. You can also keep them for a first test purchase and archive them in Stripe later; the plugin reminds you while they are still there.
How prices, variants, subscriptions and "Sold Out" work: update products. Where to put product images and copy: content and products.
4. Make it yours
This is where the starter earns its name. Two levers, and the first one is the big one:
Change the five colour styles in Framer - Paper, Ink, Muted, Line, Surface. Your pages follow, and so do the shop components: the plugin links them to your colour styles instead of copying fixed values. One change, one coherent shop, in light and dark.
Change the six text styles for your own typeface and sizes. Your pages follow here too. The shop components take their typeface as a plain value, so give "Add to Bag" and "Cart Button" the same font once in their properties on the right - the plugin's "Design" section does it for all of them in one go.
Everything else is yours to move, rename and restyle. The CMS connections stay intact while you do, so feel free to try things out.
5. Go live
- Publish your site in Framer.
- In the plugin under "Checkout", allow your published address.
- Choose where you ship, set shipping and tax.
- One test purchase with a test card, then switch to real payments.
The full checklist: test and go live.