Setup
GET IT RUNNING
IN AN HOUR.
Everything in Selvedge is a normal Framer layer: double-click text to edit it, select an image to replace it. This page covers the handful of things that are not obvious.
01
The film behind the page
The film is one layer: FX — Film Bed, at the top of the layer list. Select it and paste a direct .mp4 link into Film URL, then set a Poster image — the poster is what shows on slow connections and when a visitor has reduced motion turned on, so pick a strong frame.
Keep the file under about 2 MB. Ours is 1280px wide and six seconds. Long or heavy films are the fastest way to make a beautiful site feel slow.
Delete the layer and the page still works — every section keeps its own background.
02
Products and orders
Your products live in one CMS collection called Products. Each item holds a name, a price, a short spec and four photographs. Add an item and it gets its own checkout page and its own card on the home page. Delete one and both disappear.
To take real orders, select Order — Fields on a product page and fill in three things: a free form key from web3forms.com, the address orders should land at, and your payment link, whether that is Shopify, Stripe or Polar. The order emails you and sends the customer a confirmation, then hands them to your payment page.
Leave the payment link empty and it simply takes orders, which suits a made-to-order run where you invoice afterwards.
03
Swapping the photography
Every image is a normal image fill. Select the layer, open Fill, and choose your own file. Nothing is locked to a size — the frames crop for you.
The lookbook is four cards in one row. To use three, delete a card; to use five, duplicate one. The row re-spaces itself.
Clicking a lookbook image opens it full screen. That reads the image off the card, so swapping the card image is all you need to do.
04
The scroll story
The Process section holds four stages that cross-fade as you scroll, with the red stitch filling down the edge. The four images are stacked inside Film Col and the four steps sit beside them in Steps Col.
Replace an image, edit the step title and copy, and it keeps working. To use three stages instead of four, delete the fourth image and the fourth row.
On phones this becomes a swipe strip, because a scroll story needs more height than a phone has.
05
The menu on phones
The phone menu reads its links out of the nav. Edit a nav link once and the menu follows — there is no second list to keep in sync.
The hamburger and the panel only appear below 810px.
06
The offer popup
It appears ten seconds after the page loads. The card is a component called Offer — Popup: edit the code, the heading and the copy directly on it.
To remove it entirely, delete the Offer — Modal layer at the bottom of the layer list.
The Copy code button copies whatever text sits in the code field.
07
Colour and type
Colours are named styles — Ecru, Ink Indigo, Indigo Mid, Selvedge Red and the two hairlines. Change one in the style panel and it updates everywhere it is used.
Type is two families: Big Shoulders for display and Archivo for everything else. Swap them in the font manager and the whole site follows.
The red is a signature, not a background. It works because it only ever appears as a thin line.
08
Before you publish
Replace the six store links. Put your own title, description and social image in Site Settings, and your own favicon. Point the demo email at an address you actually read.
Then open the site on your phone and scroll the whole thing once.
The Made in Framer badge is part of the free plan and disappears on a paid site.
Anything this page does not answer, email the address on the template listing and we will answer it.