Where to change things
Colours: the 12 colour styles, such as Ground, Ink and Accent. Each has a light and a dark value.
Type: the text styles. Panchang sets display headings in capitals. Familjen Grotesk sets the rest.
Spacing: Section components such as Section / Figures, and page sections. Standard padding is 128, 104 and 64 on desktop, tablet and phone.
Copy and pictures: CMS collections, and component properties such as Title on Section / Page header.
Repeated parts: components such as Strip and Card / Product, and the layout template Main. Main holds the nav, the cart and the footer, and each page picks its closing band in its Closing setting.
Behaviour: code components for the wall, pins, filter, cart, video and theme button.
The CMS
Eight collections hold the content.
Products (12): the Home wall, Collection and product pages.
Lookbooks: rails and lookbook pages. A new lookbook appears on the Lookbooks page; the Home shows the first three by Sort order.
Scenes (7): lookbook, Home and product photos.
Pins (8): numbered markers on scenes.
Journal (3): Journal and Home.
Stockists (8): Stockists page.
FAQs (10): Shipping and returns.
Team (4): the people wall on About.
Common fields
Prices: Price (euro). Tick On sale to show Was price (optional).
Flags: On sale and Sold out on Products. Home only on Pins.
Shopify variant ID: an optional text field on Products. Fill it when you connect a store.
Pin positions: X (%), Y (%) and Number on Pins, and Focal height (%) on Scenes.
Picture descriptions: write alt text for every image, and fill Caption on Scenes. Cards, strips and rows are components: if one shows a generic description, open the component and edit the alt text of its picture.
Counts: Framer cannot count. Retype “12 pieces” and the count labels after you add items.
Common jobs
Change the brand name and wordmark
1. Change Brand name on Nav and Footer, and Giant mark and Copyright line on Footer.
2. Replace “Vesterby” in the site title and page titles.
Change the colours
1. Edit the light and dark value of each colour style. Code components follow the styles.
2. In Site Settings, open Custom Code and change the two theme-color values in the head code to your new Ground colours.
3. On the Style guide page, the dark half of each swatch and the two theme panels are fixed colours. Recolour them by hand.
Change the fonts
1. Pick a family for each text style.
2. Code components and form inputs keep their own font setting. Change it on each.
Add a product
1. In Products, add an item and fill every required field.
2. Set Catalogue number and Sort order to the next number.
3. Set Next piece, Previous piece and Next label on the new item and its two neighbours.
4. Every product has exactly two Pairs with: fill Pairs with (first) and Pairs with (second).
Add a lookbook scene and place its pins
1. In Scenes, add an item, fill every required field and tick Has pins and Has lookbook.
2. In Pins, add an item for each product. Set Scene, Product, Number, X (%) and Y (%).
3. Number sets the order. Number offset on the Pin layer continues a count.
4. For a product page, set Seen in (scene), Has scene and No scene on the product.
5. A product sits in one lookbook’s Shop this look: set Shown in lookbook once on the product.
Add a journal article
In Journal, add an item and fill every required field.
Connect a Shopify store
Before a store is connected, Checkout shows a demo note.
1. Follow the steps on the Connect your store page.
2. In the layout template Main, select Cart drawer and paste your store domain, without https://, in Store domain.
3. In Products, paste each product’s Shopify variant ID into Shopify variant ID. Without variant IDs, Checkout opens an empty cart in your store.
4. Keep CMS prices equal to Shopify prices.
How orders reach you
The cart on this site is a list the visitor builds in the browser; nothing is charged in Framer.
Checkout opens a Shopify cart link built from the Store domain on Cart drawer and each product’s Shopify variant ID, and Shopify takes the payment and the order from there. Connect it on the Connect your store page.
Until a store is connected, Checkout shows a demo note.
The order lives in that store, not in Framer: look for it there, and keep the variant IDs in the Products collection current.
Change the hero picture and video
1. On Home, select Hero video in Section: Hero.
2. Replace Poster and Video, and fill Poster description.
3. Use an MP4 loop of 8 to 14 seconds, under 3.5 MB at 1600 px wide.
4. Edit the statement and lead on the canvas.
Turn dark mode off or change its default
Visitors get their device theme and can save a choice with the theme button.
1. To start every visitor in light, untick Follow the device by default on the Theme button in Nav. Nav has one in the bar and one in the menu. Visitors can still choose dark with the button.
2. To remove dark mode, give each colour style the same dark value as its light value and delete the Theme buttons in Nav.
Plan and add-ons
Framer plan: Pro, because the template has eight collections. Basic allows 2. Pro allows 10.
Plugins: none needed.
Other needs: a Shopify plan for live checkout. Forms use Framer’s form handling.
Second language: Spanish is set up for the navigation, buttons, footer, form labels, cart labels and the 404 page. The language picker is in the footer. Journal articles and the other pages stay in English. Each extra language is a paid Framer add-on, so check Framer’s pricing first.
Redirects: none are set up. Add any you need in Site Settings.
Not included: payments, subscriptions, a store password page, a live Stockists map and form error summaries.
What differs from an ordinary Framer page
Code components draw these parts. Settings are in the right panel.
Theme button, Cart button (Nav): light and dark button; cart count.
Cart drawer (Main): slide-out cart. Settings: Store domain, labels, demo note.
Buy box, Product gallery (Product page): quantity and Add to cart; image thumbnails.
Wall (Home, About): strips that open on hover, focus or tap. [open=3] in the list name sets the open width.
Pin layer (scene photos): markers read from Pins. Settings: Scene key, Focal height, Number offset.
Collection filter (Collection page): filter boxes; deals Set row layouts A, B and C.
Hero video, Rail arrows, Timeline (Home, Lookbooks, Product, About): background video, rail buttons, process steps.
Nav scroll, Site styles (Main): clear nav over the hero; hover and focus styles.
Forms show errors as browser messages.
