THE DAILY CRUMB: TEMPLATE INSTRUCTIONS

Welcome to The Daily Crumb! This template is designed like a classic, high-quality newspaper. It relies on strong typography, clean lines, and a single CMS collection to keep your bakery or café running smoothly.

💡 THE GOLDEN RULE: USE FRAMER AI AND CANVAS NOTES

Look for Canvas Instructions
You don’t need to memorize this Read Me. Every complex or important part of the template has visual instructions placed directly on the canvas next to it.
For example, if you open the Menu page, simply look to the left of the Desktop breakpoint. You will find step-by-step notes explaining how to edit the menu, update the categories, and manage the CMS without breaking the layout.

1. Use Framer AI
   Framer has a powerful built-in AI assistant. If you ever feel stuck, accidentally break a layout, or want to change the structure of a page (like adding a new menu category), ask the AI to do it for you.
   To access the AI assistant, click anywhere on the empty canvas so that no objects are selected. The AI Assistant panel will appear on the right side of your screen. Type your request in plain English, and the AI will guide you or make the changes for you.

GLOBAL SETTINGS & BRANDING

Before editing the content, set up your basic site settings so it feels like your own brand.
Site Name, SEO & Favicon

1. Click the "Framer" logo in the very top-left corner of the app, then choose Settings

2. Go to General to change your Site Title, Description, and upload your Favicon (the tiny icon in the browser tab).

Colors & Fonts

This template uses a strict “Paper and Ink” editorial palette. If you want to tweak the colors or fonts:

1. Open the Assets panel on the left side of your screen.

2. Scroll down to Color Variables and change them

3. Scroll down to Text Styles to safely change the fonts without breaking the newspaper aesthetic.

UPDATING YOUR MENU (THE CMS)

The heart of this template is the CMS (Content Management System). You don’t need to design new pages for your menu items—you just fill out a simple form, and the website updates itself.
To open it, click the CMS icon (the stacked database symbol) in the top-left menu (with Framer logo) and select Menu collection.
How to add or edit an item:
Click on any existing item to edit it, or click + New Item in the top right. Fill in the text fields (Title, Price, Description, Dietary Tags).
Understanding the special toggles and fields:
We created specific rules so your menu looks like a curated publication:
• Category: The general category of your item (e.g., Freshly Baked, Coffee & Tea).
• Menu Section: This strictly controls exactly which block the item appears in on the Menu Page. Make sure this matches the section you want it to live in.
• Featured (Toggle): Turn this ON if you want the item to appear in the quick “Today’s Particulars” showcase on the Homepage.
• Today’s Favourite (Toggle): Turn this ON for only one item per category. This item will be highlighted in the large, beautiful feature block at the top of the Menu Page.

EXTERNAL LINKS (ORDERING & MAPS)

“Order Now” & “Order Ahead” Buttons
This template is designed to link out to your existing online ordering system (like Square, Toast, Shopify, or UberEats).

4. Select the Header component on a template page (Basic template or Nested page).

5. In the right panel, look for the link property (e.g.,  Online Order URL ).

6. Paste your external ordering link.

7. Important: Make sure it is set to open in a New Tab so visitors don’t lose your website.
   (If you don’t have online ordering, you can delete the URL to hide the button, or change the text to “CALL TO ORDER” and use  tel:+yournumber  as the link).
   Google Maps (“Find Us” Page)
   To make the “OPEN IN MAPS” button work perfectly for your location:

8. Open Google Maps in your browser and search for your café’s address.

9. Click the “Share” button, then “Copy Link”.

10. In Framer, go to the Find Us page and click directly on the “OPEN IN MAPS” button.

11. In the right panel, paste your link into the “Link” field and set it to open in a New Tab.
    
    
    

CATERING & NEWSLETTER FORMS

The template uses Framer’s standard, built-in forms for the Catering Modal and the Footer Newsletter.
To receive email notifications when someone submits a form. Follow the instructions in Header and Footer components

ADVANCED: CHANGING MENU CATEGORIES

If you need to change the menu categories (for example, you don’t serve “Coffee & Tea” but want a “Sandwiches” section), it requires updating the CMS filters, the sticky navigation, and the scroll links.
Instead of doing this manually, let Framer AI do the heavy lifting.
Click the empty canvas to open the AI assistant in the right panel, copy the prompt below, fill in your categories in the brackets, and paste it to the AI:

COPY THIS PROMPT INTO FRAMER AI:
I am editing the Menu page of this Framer template. Please update the existing menu system to use these CMS categories:

1. [Category One]

2. [Category Two]

3. [Category Three]
   Use the existing CMS collection named “Menu”. Do not create a new collection.
   TASKS:

4. Update the Menu sections so there is one section for each category. Connect them to the “Menu” CMS and filter them by the exact category names. Exclude items where “Today’s Favourite” is enabled.

5. Update the sticky submeny component to include these new categories.

6. Update the Scroll Sections to match the new categories, and link the sticky navigation items to them with smooth scrolling.

7. Update the Active Navigation State variants so the links highlight correctly when scrolling.
   Keep all existing editorial design, typography, and newspaper aesthetics intact.
   
   

PUBLISHING YOUR SITE

7. Click the Play icon in the top right corner to preview your site and test the links.

8. When you are ready to go live, click the Publish button in the top right corner.

9. To connect a custom domain (e.g.,  yourbakery.com ), click the Framer logo in the top left, go to Site Settings ➔ Domains, and follow the instructions.