Template guide
Make TESSOVRA yours.
Everything you need to edit the content, connect your store and launch. This page is hidden from search engines; delete it before going live.
01 Start here
Open the project in Framer. Pages are listed on the left; shared parts (header, footer, announcement bar, cart drawer) live in the Main layout template.
Rename the brand in the Logo component (Wordmark) and in the footer wordmark. The footer resizes to fit longer names.
02 Colours and fonts
All colours are Color Styles in Assets. Each has a light and a dark value, so dark mode updates automatically.
Text uses Manrope (headings) and Inter (everything else) through Text Styles. Change a style once to update every page.
03 Products (CMS)
Edit products in CMS → Products: name, images, price label, unit, box price, coverage, swatches, stock and description.
Categories, Finishes and Uses are separate collections. Add an item there and tag products with it; the Shop filters update automatically.
04 Product types
Tile (sold by area) shows the area calculator on the product page. Piece and Apparel show an enquiry button by default.
For furniture or clothing, place the Option Purchase component (see the Flexibility page) and set its option groups, sizes and sold-out values.
05 Cart and checkout
The cart works in the browser: drawer, badge and cart page. Set Checkout URL on the Cart Drawer (layout template) and the Cart Page component to your checkout.
Every add dispatches a tessovra:add-to-cart event with product, SKU, quantity and price, so a Shopify or other integration can create a real cart. Test each purchase flow with your provider.
06 Moodboard
Visitors tap the heart on any product to save it. The Moodboard page lists saved items and sends them to the Enquiry form as a project request.
Saved items are stored in the visitor’s browser only.
07 Forms
Newsletter, showroom appointment, enquiry and contact forms are native Framer forms. Select each form, set where submissions go and verify the email address.
08 Announcement bar
Edit the text in the Main layout template. To hide it on every page, set the template variable Show Announcement to off.
09 Motion
Appear and hover effects are native Framer effects you can change in the Effects panel. Two homepage images use a gentle scroll movement from Motion.tsx; it switches off on phones, tablets and with reduced motion.
Prices, options, the calculator and cart totals never animate.
10 Before you launch
Replace demo photos, products and placeholder contact details.
Rewrite Delivery & returns, Privacy and Terms with your own policies.
Add your favicon and social image in Site Settings, then delete the Guide, Style guide and Flexibility pages if you don’t need them.