For you
Before the launch
Checklist.
Framer publishes a list of best practices for templates. We went through it line by line against this one. Here is what was checked, what passed and what is left for you.
How to read this
Only the owner can do it. The last group collects all of these in one list.
Two things do not fully pass: the custom code relies on layer names, and performance on a slow phone falls short. Each is clearly marked and says why, so you can decide whether it matters to you.
Originality
The template is made for one kind of owner: a small drinks or food brand that wants a site with drinks, recipes, posts, ingredients and stockists.
Three working tools go beyond Framer’s own features: a recipe scaler, a party planner and a filter for the stockist list.
Design
Six brand colour styles and a short set of text styles carry every page, with six product colours, one per can, beside them. Only button labels and the form error message set their own font.
Done
The hairline rules have their own colour style, Rule. Change it once and every rule on the site follows.
A designed 404 page is included. Type a wrong address to see it.
Layout
Sections are stacks and grids with automatic height, so they grow with your text. The only fixed heights are the colour swatches on the style guide.
Text
Responsive
The headline and text styles carry their own sizes for tablet and phone, set as breakpoints on each text style, so no page needs separate styles.
Links
Only one link leaves the site: Instagram in the footer and on Contact, which points to the template author’s profile. Replace it with your own. The email address and phone number on Contact are plain text, and the nine sample stockists carry no website link. Add your own where you want them.
CMS
Nine collections hold everything that repeats: Products, Recipes, Posts, Stores, Questions, Authors, Post topics, Recipe kinds and Ingredients.
No published item has an empty required field.
Code
Six overrides: NameSplit, Season, Count, LocalDate, SectionParallax and BackToTop. NameSplit sits on the three form components; it adds the hidden fields, and splits the name on the contact and stockist forms. Season fills in the season label on the home page, and Count keeps the numbers in headlines and labels in step with the CMS. LocalDate writes each date in the order the visitor is used to: month first in the United States, day first everywhere else. SectionParallax lets the photograph behind the stockist section drift as you scroll. BackToTop rolls the page to the top from the strip above the footer.
Site Settings holds the template’s CSS and nineteen short scripts: text wrapping and hover details, the photo reveal, the loading order of photographs, the gliding FAQ accordion, campaign tags for the forms, the cookie link’s name, the cookie banner’s Reject all and Accept all buttons, the active filter pill, the colour of the page transition, the footer’s “Back to top” roll, the drift of wide photographs, closing the phone menu, the card hovers and their colour strips, the spruce tip on the first two dividers of a page, the footer that waits under the page, a can page’s own line colour, the can and plant names that link in body text, the browser toolbar’s colour and a set of small accessibility repairs. The page works without any of them, and the ones that animate stand down for visitors who ask for reduced motion.
Known limit
Effects
Three animations are repeated everywhere: headlines rise in line by line, blocks fade up, photographs unmask. Nothing loops. Wide photographs drift a little inside their frames as you scroll, and the can gallery on Cans is driven by the scroll. The reading progress bar and the privacy page’s index also follow the scroll. On hover, cards show a second photo or a strip of the can’s colour, and underlines draw in and out; these run on large screens with a mouse only.
Assets
38 components sit in eight named folders (Cards, Editorial, FAQ, Forms, Navigation, Posts, Recipes and UI), with Button on its own. Each is used on at least one page.
Tags
The page body, sections, page headers, the menu and the footer carry their proper HTML tags.
Headings run h1, h2, h3 in order, on every page.
Accessibility
Done
Framer’s cookie component names the footer link “Cookie Trigger” for screen readers while it reads “Cookies” on screen. A short script gives it the name it shows.
Performance
Lighthouse on desktop scores 75 to 99 for performance on Home, Cans, Recipes and About, and 96 to 100 for accessibility, best practices and SEO.
Known limit
On a phone with a simulated slow connection the same pages score 67 to 86. In that test the largest piece of the page takes four to seven seconds to show.
Framer resizes each photograph for the screen, and the sample photographs were compressed before upload: they are 2048 pixels on the long edge and most are under 700 KB. Compress your own the same way before you add them.
Copyright
The images on the demo site are generated and credited to Totte Annerbrink. They are placeholders and are not included for reuse, as noted on Credits & licences.
The cans are mockups. Replace them with pictures of your own product.
Support
Support is four pages inside the template: the Template guide, this Checklist, the Style guide and the Components page. There is no individual support beyond them.
Before you launch
Connect the three forms. You will find them under Forms in Assets. None of them sends anything until you choose a destination under the option Send To.
Replace the example email address, phone number and street address on Contact, and the same details plus the company name, number and contact person in the privacy policy.
The privacy policy is a sample written for this template, not legal advice. Rewrite it for your own company and tools, have it checked, and check the cookie banner wording against the rules where you trade.
Set your domain, site title, default description, favicon and social image in Site Settings. Then change “Sprig” in each page’s own title and description; the CMS pages use one title pattern per collection.
Yours to do
Rewrite the two lines at the bottom of the footer, the copyright line and the designer credit, and the texts of the cookie banner.
Yours to do
Most numbers written into headlines follow the CMS by themselves through the Count override: the counts and the This season sentence on the home page, “Six cans” on Cans, “Nine recipes” on Recipes, “Eleven flavours” and “Eleven entries” on Ingredients, and the numbers beside the cities on Stockists. Two do not, so update them by hand: “Nine places, five cities” on FAQ and “Ten plants make six drinks” on Ingredients.
Delete the pages made for you: Template guide, Checklist, Style guide and Components. Remove their links under Help in the footer and the Framer template questions on the FAQ. They are hidden from search engines, but a hidden page is still a page.