(10)
Edit me
Wire it to Shopify in five steps.
This page is the manual. Every object is one row in the Products CMS. Paste that product’s checkout link into its row and the Add buttons work everywhere.
Create the product in Shopify
In your Shopify admin open Products, press Add product, and fill in the title, price and photos. Save it. That is the product a visitor will pay for.
Copy its checkout link
Pick whichever of these you prefer. Any of them works in the Checkout Link field.
Product page: open the product on your store and copy the address bar, like yourstore.com/products/ambit-radio. The visitor lands on the product page and presses Buy.
Cart permalink (goes straight to checkout): yourstore.com/cart/VARIANT_ID:1. Open the product in the admin, click a variant, and copy the number after variant= in the address bar.
Buy Button or Payment Link: in Shopify’s Buy Button channel, or in Stripe or Lemon Squeezy, create a link for the product and copy its URL.
Paste it into the CMS row
In Framer open the CMS and choose Products. Open the row with the same name, click the Checkout Link field and paste the link. Each field has a short reminder under it.
Edit the row
In the same row set the name, shelf, price, photos and the five spec lines. The shelf must match a Shelf name exactly (Sound, Desk, Kitchen, Carry or Care). The row then appears on the home page, shop, shelf page and product page by itself.
Publish and test
Publish the site, press Add on your new row and check that your store’s checkout opens with the right product and price. Place a test order using your store’s test mode before you share the link.
(02)
The Products CMS
What every field does.
Nothing else on the site needs editing to sell a product.
Name
The product name. Appears in every list and as the page title.
Shelf
Sound, Desk, Kitchen, Carry or Care. Decides which shelf page the row is on.
Price
Numbers only, in your currency. Shown as euros; change the currency in the price text’s format if you sell in another.
Compare at price
Optional. If greater than 0, the product page shows a Was price. Also set the Badge to Sale.
Badge
Optional label on the row: New, Bestseller, Sale or Low stock. The New arrivals list shows rows whose Badge is New.
Stock text
One line under the price, e.g. In stock, ships in two days.
Collection
Decides which collection page the row is on. Must match a Collection name exactly.
Photo 1 to 3
Use square images at least 1600 px wide. Photo 1 is the row thumbnail, Photo 2 shows on hover.
Checkout Link
Your Shopify link from step 2. Every Add button for this product uses it.
Featured
Optional. Reserved for lists you add later.
(03)
Make it yours
Change the look in three places.
Colours
Open Styles and edit the colour styles: Stone is the page, Paper the raised bands, Ink the text and dark sections, Signal the orange for numbers and badges. Change them once and the whole site follows.
Type
Open Styles and edit the text styles. Display and Row Title carry the look; Label is the small mono caps. Fonts are Schibsted Grotesk, Funnel Sans and Geist Mono.
Cart and links
The Cart page has an editable Open cart button for a shared cart. The nav Cart button opens that page. The footer Friday list form can be connected in the form settings.
(04)
Before you launch
Ten-minute checklist.
01
Every row has a Checkout Link that opens the right product.
02
Prices in the CMS match your store.
03
Shelf and Collection names match exactly.
04
Replace the sample About, Journal and Shipping copy with your own.
05
Swap the demo photos for your supplier or studio photos, square and at least 1600 px.
06
Set your real address and email in the footer and on the Contact page.
07
Connect the Contact and Friday list forms in the form settings.
08
Publish, place a test order, then remove this Wire up page from the nav if you do not want customers to see it.