Built with Framer
Rise & Shine: Framer Build of a Coffee Shop Template
Approve request to show earnings
View
Kazi Mohammed Erfan
Verified
Rise & Shine: Framer development of a coffee shop website template
Rise & Shine is a coffee shop website template designed by a template studio. We built it in Framer from their designs, with the menu, workshops and blog in the CMS, so a café owner can edit them without code.
Client: A template studio · Industry: Website templates, cafés · What we did: Framer development · Platform: Framer · Timeline: May 2025 to January 2026 · Live: rise-n-shine.framer.website
About the client
The studio designs and sells website templates. Rise & Shine is its coffee shop design, and the studio also sells a Webflow template with the same name. The Houston café on the page, with three locations, is demo content, not a real business.
The challenge
The design is loud on purpose, and it had to stay loud in Framer without falling apart on a phone.
Big type, bold shapes. Oversized chunky headings, rounded pill shapes and solid orange fills had to match the design exactly.
Many layouts on one page. Hero, intro cards, delivery banner, remote workers, menu, reviews and workshops all look different but had to flow as one page.
Content a café changes often. Menu items, workshops and posts could not be hard-coded.
Type that scales. Headlines this large break easily on small screens.
What we did
Built the bold home page
Built the hero, “Locally brewed and roasted coffee beans in the city of Houston”, with the opening hours next to it.
Built three intro cards, Our locations, Warm welcome and Yummy menu, each linking to its own page.
Built the “Use online delivery!” banner as an animated ticker strip, and a section that welcomes remote workers.
Put the menu and workshops in the CMS
Built the Menu page in three groups, Coffee, Snacks and Sweets. Every item is a CMS entry with its own page.
Built the snacks, coffee and sweets tabs on the home page as pills with hover states.
Set up Workshops as a CMS collection, from a barista beginner class to a cooking class, each with a date and its own page.
Gave every visitor a path
Built the Locations page, “Find us in Houston”, with three shops, each with address, hours and contact details.
Built the reviews section, “But don’t just take our word for it”, with four customer quotes.
Built About, Contact, Blog and a 404 page, plus two extra home page versions for buyers to choose from.
Scaled the type for phones
Built the desktop and phone layouts, resizing the large headlines at every breakpoint.
Added scroll animations: text entrances, image reveals and feature cards that arrive one after another.
Scope
Included:
Framer development of the template from the studio’s designs.
Ten pages: three home page versions, About, Menu, Locations, Workshops, Contact, Blog and 404.
CMS collections for menu items, workshops and blog posts.
Desktop and phone layouts, with scroll and hover animations.
Not included:
The visual design. The studio designed it; we built it.
A real café. The shops, menu, reviews and workshops are sample content for template buyers.
Listing and selling the template, which is the studio’s side.
Results
The template is live as a Framer preview.
It has 10 pages, plus CMS pages for the menu items, 3 workshops and 6 blog posts.
A café owner can add menu items, workshops and posts in the Framer CMS without writing code.
What we’d improve next
Add pickup ordering. An order button on each menu item page would let a café take orders straight from the menu.
Add workshop sign-ups. A short booking form on each workshop page would let a café fill its classes from the site.
Add maps to Locations. A map and a directions link for each shop would help first-time visitors find the nearest one.
Working on something similar?
I design websites in Figma and build them in Framer or Webflow, so your team can edit every page without a developer. Message me here on Contra with your site or Figma file, and I’ll reply with a plan and a fixed price.
Like this project
Posted Apr 27, 2026
A bold orange coffee shop template built in Framer for a template studio, with menu items, workshops and blog posts in the CMS.
Likes
2
Views
16
Timeline
May 25, 2025 - Jan 13, 2026
Clients
Wavesdesign
