START HERE / TEMPLATE ONBOARDING GUIDE

How to Customize Your Template

Welcome to your Serein Objects template. Built with clean native tokens, reusable components, and an art-directed layout. Follow this step-by-step checklist to tailor it to your single-product brand in under 30 minutes.

Phase 01 / Design System & Brand Identity

STEP 01

Update the Brand Wordmark and Visual Motif

Locate the Serein / Header and Serein / Footer components. Replace the demo text ‘SEREIN OBJECTS’ with your brand name. Replace the placeholder footer inquiry address (studio@sereinobjects.demo) with your actual brand support email or contact form. The terracotta dot represents an ambient light source; feel free to change its color, shape, or replace it with your custom SVG logo.

STEP 02

Tune the 8 Global Color Style Tokens

Open the Assets sidebar on the left and select Color Styles. You will find: Color / Paper (main surface), Color / Ink (primary text), Color / Night (dark accents), Color / Clay (terracotta primary), Color / Moss (subdued green), Color / Sand (warm card surface), Color / Line (delicate borders), and Color / White. Changing any color token will instantly cascade across all 8 pages without manual restyling.

STEP 03

Connect Your Custom Typography

The template uses Instrument Serif for editorial display headlines and DM Sans for clear, readable body copy. To change fonts, open Assets > Text Styles and update the font family. All headings (Display, H1, H2, H3, Quote) and body styles will update simultaneously.

Phase 02 / Product Story & Photography

STEP 04

Upload Your Product Photography

Select any photo frame on the Home or Product page, open the right-hand design panel, and click Fill > Image to replace the demo artwork with your high-resolution product photography. We recommend 1600px wide photography compressed via WebP or optimized JPEG.

STEP 05

Customize the Interactive Scene Switcher

On the Home page, locate the ‘Serein / Light Scene Switcher’ component. Double-click the component to view its three variants: Read, Unwind, and Gather. You can customize the image, caption, and title for each state, or rename them to match your product’s key modes.

STEP 06

Customize Sample Specs, Claims & Pricing

The product details, specifications, and policies shown across this template are editable sample demonstration content, not verified information about a real product. Before publishing, replace these demo items with your own verified information:

• Product Price: Replace the sample $285 USD price with your product’s actual price (the $25 template sale price is separate).

• Specifications: Update dimensions, weight, light temperatures (2200K–2700K), and battery runtimes.

• Product Images: Replace sample lamp photography with your brand’s coordinated product shots.

• Store Contact: Replace concierge@serein-objects.com with your active customer service email.

• Shipping & Policies: Replace the sample 30-day trial and 2-year warranty with your real terms.

• Demo Checkout Links: Connect the ‘Buy Serein One’ buttons to your live payment provider or shop URL.

Phase 03 / Commerce, CMS & Launch

STEP 07

Connect Your Checkout Link or Storefront

Select the primary purchase action buttons on the Home (‘Buy Serein One’) and Product page. In the right panel, update the link from the demo route to your external checkout URL (Shopify cart link, Stripe Payment link, LemonSqueezy, or custom cart).

STEP 08

Manage the Field Notes CMS Collection

Click CMS in the Framer top bar to access the ‘Field Notes’ collection. Add new editorial articles, change categories (e.g. Design Journal, Light Studies, Craft), write rich-text body copy, and upload custom hero covers. The listing and detail pages update automatically.

STEP 09

Pre-Publish SEO & Domain Verification

Before publishing, open Site Settings > General to set your custom domain. Check the Page Settings on each of the 8 pages to update meta titles, descriptions, and social preview images. Test responsive layouts on Tablet and Phone variants, then hit Publish!

Need personal guidance with your template?

If you need help tailoring components, adding custom integrations, or commissioning unique art direction, reach out to our studio team.

“Light for the in-between.”

SEREIN OBJECTS

Tactile objects for quiet living spaces.
Designed for evening contemplation.

INQUIRIES

Demo email (replace with your brand contact)
Worldwide shipping available.

© 2026 SEREIN OBJECTS. Demo template designed for Framer.

Create a free website with Framer, the website builder loved by startups, designers and agencies.