Instructions

Everything you need to make Halden your own: the brand, the products, the sell button, the journal and the motion. Delete this page before you launch.

(01)

Make it yours

Rename the studio in four places: the wordmark in the Header component, the large wordmark in the footer of the Main layout, the Wordmark control of the Loader, and the site title in Site Settings. Page titles end in “— Halden”, so update them too.

Colours live in eleven colour styles. Oxide is the only accent; keep it for links, focus lines and small details. Every style has a dark value. Type uses thirteen text styles built on Bodoni Moda and Geist, so changing a style updates the whole site.

(02)

Products

Products are a CMS collection. Turn on Featured to show a piece in the home strip (up to six) and use Strip Size to choose its tile shape there. Grid Size sets the tall or wide tile on the Collection page.

Room drives “Pairs well with” on each product page: it shows up to three other pieces from the same room. Finishes become the swatches, and an Old Price above zero is shown struck through.

If you change the Collection grid columns or page padding, update the tile image heights: tall is the column width × 1.25, wide is the column width ÷ 1.5.

(03)

The sell button

Each product has a Purchase Mode. Buy link shows “Add to order — €price” and opens the Buy Link field, which can be any checkout link: a Stripe Payment Link, Lemon Squeezy, Gumroad, a Shopify checkout link or an Etsy listing.

Enquire opens the Contact page with the piece already filled in. Sold out shows a muted button that cannot be clicked.

The template has no cart. If you need one, look at Framer’s own commerce options or a Shopify integration, and check what Framer supports today before you plan around it.

(04)

Journal

Articles are a CMS collection. The newest entry is featured at the top of the Journal page, and the three newest appear on the home page.

Pull Quote, Image Break and Body Continued are optional. Leave them empty and those parts of the article are hidden.

(05)

Forms

The contact form and the newsletter use Framer forms. Select a form and choose where submissions go in the panel on the right, for example your email or a connected tool.

The Piece field on the Contact page fills itself from the product page, through two small overrides in Prefill.tsx.

(06)

Motion

The header hides as you scroll down and comes back as soon as you scroll up. That is the withHideOnScroll override (HideOnScroll.tsx) on the Header in the Main layout; remove it to keep the header fixed.

Site Styles, also in the Main layout, adds a visible two-tone focus ring for keyboard visitors. Leave it on; you can change the ring width and offset in its controls.

(07)

Images

All photographs are placeholders from Unsplash. Replace them with your own pieces, and keep one warm, low-contrast grade so pages feel like one shoot. Team portraits get a grayscale and light sepia filter on the layer, so mixed photos still match.

When you change photos, update the Licenses page.