Where to change things
Colours: the 20 colour styles, such as Ground, Ink and Accent. Each has a light and a dark value.
Type: the text styles. Gambetta sets headings. Satoshi sets body text and labels.
Spacing: Section components such as Section / Team, and page sections. Standard padding is 128, 96 and 72 on desktop, tablet and phone.
Copy and pictures: CMS collections, and component properties such as Tiles on Section / Shop by room.
Repeated parts: components such as Card / Product, and three layout templates: Main, Main with newsletter and Main with closing band. Each template holds its own Nav, Footer and Cart drawer with their own values, so change a setting in all three.
Behaviour: code components for the cart, filter, pins, video, carousel and theme button.
The CMS
Nine collections hold the content.
Products (24): the shop, Home and product pages.
Collections (4): Seating, Tables, Lighting and Storage pages.
Lookbooks (3): lookbook pages.
Scenes (8): lookbook, Home and product photos.
Pins (19): numbered markers on scenes.
Articles (6): Journal and Home.
Stockists (8): Stockists page.
FAQs (10): Shipping and returns.
Reviews (6): Home and product pages.
Common fields
Prices: Price (EUR). Compare-at price (EUR, optional) shows a sale price. Set it to 0 to clear it.
Flags: New, Sold out, Featured on Home page, Show in New arrivals and Has reviews on Products.
Shopify variant ID: an optional text field on Products. Fill it when you connect a store.
Pin positions: Left (% of photo width), Top (% of photo height) and Card opens on Pins.
Picture descriptions: write alt text for every image, and fill Photo description on Scenes and Cover photo description on Articles. Cards and rows are components: if one shows a generic description, open the component and edit the alt text of its picture.
Counts: The Shop filter counts the products on its own. A count line in a page header is plain text: write it without a number, or retype the number after you add items.
Common jobs
Change the brand name and wordmark
1. In each of the three layout templates, change Brand name on Nav and Footer, and the Footer Legal line.
2. Replace “Atelier” 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 chips follow the styles. The hex values printed under them are typed text. Retype them by hand.
Change the fonts
1. Pick a family for each text style. Display lead and Scene caption need an italic.
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. Update the counts.
3. The third gallery picture comes from Close-up photo and Close-up description. Leave both empty and the gallery shows two pictures. Every product appears on Shop: the list shows the whole catalogue, and the filter and the sort cover all of it, so a new item needs no new page.
4. Pairs well with and Other finish hold two references each. The third Pairs well with tile is a lookbook: fill Third tile photo and Third tile lookbook.
5. The Shop filter keeps its collection, room, material and price labels as typed settings on the Shop filter of the Shop page. Add a label there for a new room, material or collection.
Add a lookbook scene and place its pins
1. In Scenes, add an item and fill every required field. Type its Pins line, and tick Has pins and Has lookbook as they apply.
2. In Pins, add an item for each product in the photo. Set Scene, Lookbook, Product, Number and Sort key.
3. Left and Top are percentages of the photo. Card opens: left if Left is over 55, up if Top is over 55.
4. Home, In the room, lists scenes by Sort order from the highest number down. Give the scene you want first the highest Sort order; a reordered set reverses.
Add a journal article
1. In Articles, add an item and fill every required field.
2. Choose a Related product. Show new pieces instead lists every New product.
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 each of the three layout templates, select Cart drawer and paste your store domain, without https://, in Store domain. Set it on the Desktop copy; Tablet and Phone follow.
3. In each product, paste its Shopify variant ID into Shopify variant ID. Without a variant ID, Checkout shows the demo note.
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 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. The Phone hero shows its own line, Proof on phone. When you change the three proof lines, change Proof on phone to match.
Turn dark mode off or change its default
Visitors get their device theme, and the theme button saves their choice. There is no setting for the starting theme.
1. To keep the site light, give each colour style the same dark value as its light value.
2. Delete the Theme toggle in Nav. Nav has one in the bar and one in the menu, in each of the three layout templates.
Plan and add-ons
Framer plan: Pro, because the template has 9 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. The journal, the CMS items and the long copy of 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. Each finish is its own product.
What differs from an ordinary Framer page
Code components draw these parts. Settings are in the right panel.
Theme toggle, Cart badge (Nav): light and dark button; cart count.
Cart drawer (layout templates): slide-out cart. Settings: Store domain, labels, demo note.
Cart add, Product gallery (Product page): quantity and Add to cart; image thumbnails.
Shop filter (Shop pages): filters and sorting. Settings: group labels, price bands, Total.
Pin marker, Scene photo (scene lists): markers and photos, read from Pins and Scenes.
Materials wall, Carousel, Loop video (Home, About): the materials wall with its Wall / List control, review carousel, background videos.
Nav scroll, Site styles (templates): clear nav over the hero; hover and focus styles.
Forms use Framer’s form handling. Errors show as browser messages.
Accessibility
These are facts about how the template is built. They are not a conformance claim.
Keyboard: the menu, the cart drawer, the Shop filter panel and the pin cards close with Escape. The menu and the cart drawer keep focus inside while open and return it to the button that opened them.
Motion: background videos are muted and have a visible pause control. They play from 810 px wide when motion is allowed. Phones, and visitors who ask for reduced motion, see the poster. Nothing else moves by itself.
Forms: every field has a visible label above it and no placeholder. Errors show as browser messages, with no summary at the top.
Colour: every text colour is a colour style with a light and a dark value. Check the contrast of any pair you change; Framer does not check it for you.
Not included: a skip link and a main landmark. Framer adds neither.
Statement for your site: We want everyone to use this site. Pages use real headings, labelled fields and keyboard controls, and video has a pause button. If something does not work for you, write to us from the Contact page and we will fix it.