Edit me

Plain Framer layers, two CMS collections and one small cart component. Here’s how to make it yours.

Change the words

Double-click any text and type. Text uses text styles (Hero, Heading, Statement, Body and so on), so new words keep the look.

The big Field wordmark in the hero is a fit-to-width text layer. Type your own name and it resizes to fill the space.

Swap the photos

Select a photo layer and pick a new image in Fill. The hero uses two plates: Plate (desktop) and Plate box › Plate (tablet and phone). Keep an empty floor under your products so the wordmark sits on clean ground.

Products

CMS › Products. Each product has a Name, Price (for example $48), Collection, Summary, Details, Image, Hover image, Gallery and Description. Order sets the order of every list. Every product gets its own page.

Collection must match a Collections name exactly (Living, Carry or Table) for the product to appear on that collection’s page.

Collections

CMS › Collections: Name, Line, Image (3:4) and Order. Each collection gets its own page that lists its products.

Connect Shopify

Open the Main layout template, select Cart Drawer and type your store in Shopify store (your-store.myshopify.com or your own shop domain). Set Currency to your store currency, for example USD or EUR.

Checkout opens your real Shopify checkout through a cart link, so there’s no app, token or plugin to install. Until a store is set, the Checkout button stays disabled.

Variant IDs

In Shopify admin open a product, click a variant and copy the number at the end of the address bar. Paste it into the product’s Variant ID field.

For products with options, fill Option name (Colour, Size) and Variants as Name: ID pairs separated by commas, for example Natural: 4500…, Charcoal: 4500…. Swatches is optional: one colour per option in the same order. The demo IDs are placeholders, so replace them with your own.

Cart

The cart is one code component, Cart, with three modes: Drawer (in the layout template), Cart button (in the Navigation) and Add to cart (on the product page). The cart is saved in the visitor’s browser, so it survives page changes and visits.

Forms

The newsletter and contact forms send to Framer form submissions. Select a form to send them to email, Google Sheets or a webhook. The Submit Button has five states and a Label control.

Colours and fonts

Colours are colour styles: Page, Tile, Card, Ink, Soft, Mute, Line and Floor. Type is Inter Tight for headings and Inter for text.

Before you publish

Replace the email and address on the Contact page, adapt the Legal page and set your site title, description and social image in Site Settings.