Template
Instructions
Everything you need to edit Side Pocket in Framer without writing code.
Tables and menu
Tables and menu items live in the CMS. Open CMS in the top bar, choose Tables or Menu Items and edit the name, photo, price or description. Cards on the Home, Tables and Menu pages update automatically. Use Sort Order to change the order of menu items.
Booking popup
The popup is the Booking Modal component, shown in an Overlay by every Book a table button. To add another button that opens it, add a Click interaction with Show Overlay and place a Booking Modal instance inside the overlay. Select any form to choose where submissions go: email, Google Sheets, a webhook or one of Framer’s integrations.
Animations
The news strip and the photo marquee use Framer’s Ticker effect. Popups and cards use Appear and Hover effects. Select a layer and open Effects in the right panel to change the speed or remove an animation.
Colors and fonts
Colors and fonts are Color Styles and Text Styles. Open the Assets panel and change a style once to update it across the whole site.
Hero video
The hero clip is a Video component inside the hero. Select it and paste a new MP4 link or upload a file. Keep the clip under 3 MB, muted and looping.
Dish popup
Every menu card opens its own dish popup with a larger photo, description and price. The popup sits inside the CMS collection list and uses the same fields, so new menu items get a popup automatically.
Order to my table
The Order Modal component is a request form: guests pick a table, list what they want and add a comment. It opens from every Order to my table button.
Pages and navigation
All pages use the Main Layout template with the Navbar and Footer components, so a link changed once updates everywhere. The mobile menu is the Phone Open variant of the Navbar component.
Fonts
The template uses Archivo Black for display text and Inter for everything else. To change a font, edit the Text Styles in the Assets panel.
404 page
The custom 404 page lives at /404. Framer shows it automatically when a visitor opens a page that does not exist.