For the new owner
Read once
Template guide.
You have just remixed Sprig. Here is where everything lives and what to change first, in seven steps. It takes about an hour, most of it choosing photographs.
1
Change the colours
Open Assets and look under Styles. The whole template runs on six colour styles, in the folder Brand: Paper for the page, Ink for text and the few dark sections, Accent for the oxblood details, Contrast for text on Accent and Ink, Shade for raised surfaces, and Rule for the hairlines. Six more, in the folder Product, hold one colour per can; they colour the block in the page transition and are shown on the style guide. The colour on a can’s own card comes from the Products collection: Colour is the can’s colour, and Tile Colour is the paler background behind its photo, which should match the background of the photo itself. So a can’s colour is changed in the style and in those two fields.
Change a value once and every page follows. The style guide shows all six in use, so check your new palette there before anywhere else.
2
Set the type
The template has 17 text styles. Eight carry most pages: Display, Heading, Title, Heading 4, Heading 5, Heading 6, Body and Label. The other nine each have one job, such as Pull quote, Standfirst and Numeral. Swap the typeface on the style itself, never on a single text layer, and the change reaches every page.
The headline and text styles carry their own sizes for tablet and phone, set as breakpoints on each style under Assets. The style guide shows the eight main styles and the Code style at their real size.
3
Find the content
Everything that repeats lives in the CMS. Open the CMS tab and you will find one collection for each kind of thing.
The drinks. They fill the Cans page and each drink’s own page.
Things to make, with ingredients, method and a linked drink.
Posts
Stories and announcements, with cover, date and body text.
Stockists, with city, country and type of place.
The questions and answers on the FAQ page, grouped by topic.
The people who write the posts, each with a page of their own.
Post topics
The categories that group posts.
The categories that group recipes. Title is the plural shown on the filter buttons (Cocktails); Singular is the word shown on the recipe itself (Cocktail).
Ingredients
The plants in the drinks, each with a page of its own.
4
Replace the photographs
Select any photograph on the canvas and choose a new image in the panel on the right. Photographs inside the CMS are replaced in their collection instead.
Write alt text while you are there: one plain sentence saying what is in the picture. Screen readers read it aloud to people who cannot see the image, and search engines use it to understand the page. Captions under photographs are the Editorial/Caption component, and they want rewriting too.
5
Connect the forms
There are three form components, under Forms in Assets: Forms/Contact form on Contact, Forms/Stockist form on Stockists, and Forms/Newsletter form, which is used on both Posts and Subscribe. Change a form in its component and every page that uses it follows. They are built from the smaller field components: Forms/Field, Forms/Select, Forms/Input and Forms/Submit button. Each form ends with Forms/Consent, a checkbox the visitor must tick before sending. Its sentence is a control on the layer, and on the contact and stockist forms its last words link to the privacy policy.
None of them sends anything yet. Open each form component, select the form inside it, find Send To in the panel and choose a destination: an email address, a Google Sheet or a webhook. Then publish and send yourself a test.
Every form also sends a few hidden values, filled in automatically: Page title and Source URL (where the form was sent from), and utm_source, utm_medium, utm_campaign, utm_term and utm_content when the visitor arrived through a tagged link. The contact and stockist forms add First name and Last name, split from the one name field. You will see them as extra columns wherever the form delivers. They come from the override on each form (NameSplit under Assets, Code); remove the override from a form to switch them off.
6
Understand the motion
The template uses three animations and repeats them everywhere, which is why it feels like one piece. Headlines rise into place line by line, out of a slight blur, as they come into view. Blocks of content, such as paragraphs, lists and forms, fade in while moving up a short distance. Photographs unmask from the edge they enter by: from the bottom when you scroll down, from the top when you scroll back up.
You will find them under Effects on each layer. Copy an existing section or component and the motion comes with it. Cards carry their own hover state as a variant inside the component.
7
Delete the guide pages before going live
The Style guide, Components, Checklist and this Template guide are for you, not your visitors. Delete all four. If you have replaced every photograph, delete Credits & licences as well, or rewrite it for your own pictures.
This page is already hidden from search engines, but a hidden page is still a page. Last of all, rewrite the privacy policy, set your site title and social image in Site Settings, and publish. The full list is in the last group of the Checklist, Before you launch.
Good to know
Newsletter form
Top bar
Photographs unmask as they scroll into view. A script called sprig-image-mask does it, in Site Settings under Custom Code, at the end of the body. Delete the script and the photographs simply appear.
Page transition
Between pages, a block of colour wipes up from the bottom edge of the window and the new page is unmasked right behind it, the same reveal the photographs use.
It replaces Framer’s own page effect and is written in CSS: look for sprig-page-mask in Site Settings, under Custom Code, in the block called text-wrap.
The old page is clipped away from the bottom, the new page follows 0.13 seconds later, and the colour you see in the gap is the background behind them. The two durations (0.42s and 0.45s) and the delay are plain numbers you can change; a shorter delay gives a thinner band of colour.
Delete the rule and Framer’s short fade comes back, with the menu standing still. Visitors who ask for reduced motion get no wipe, and browsers without view transitions change page instantly.
Transition colour
The colour of that block is chosen by a short script, sprig-page-colour.
A link to a can uses that can’s colour. A link to a recipe or an ingredient uses the colour of the can it belongs to: the recipe’s Drink, or the first can in the ingredient’s Used In. Every other link gets Ink or Accent at random, never the same twice in a row.
The script reads the colours from the colour styles, so a change under Assets follows through. At the top of the script are three short lists: PRODUCT pairs each can’s slug with its colour style, and RECIPES and INGREDIENTS say which can each entry belongs to.
A new recipe or ingredient needs no edit; the script looks it up the first time a visitor points at its link, and until then it gets Ink or Accent. A new can needs a colour style in the Product folder and one line in PRODUCT.
To use fewer colours, remove lines; to use one colour only, delete the script and the block is always Ink.
The script recognises these links by their paths: /cans/, /recipes/ and /ingredients/. If you rename those pages, change PRODUCT_PATH and RELATED at the top of the script to match.
Recipe ingredients
Each recipe has a field called Scalable Ingredients. Write one ingredient per line as amount | unit | description, for example 30 | ml | dry vermouth.
For a unit with a plural, give both: 1 | can/cans | Sprig, cold. Leave the amount and unit empty for a line that should not scale, such as | | Ice.
Write in ml and g or in fl oz and oz; the recipe page converts between the two and shows US units to visitors in a United States time zone.
Makes sets how many servings the amounts are written for, and Serving is the word shown after the number, as glass/glasses.
Colour strips
Point at a recipe card and a low strip rises in the colour of the can it is made with, reading Made with and the can’s name. An ingredient card does the same for the can it goes into. The recipe takes its can from the Drink field and the ingredient from Goes Into; without one there is no strip. The layer is called Can strip in Cards/Recipe and Cards/Ingredient, and the style sprig-recipe-can moves it at the speed of the photo’s own zoom, on large screens with a mouse only. On a recipe’s page the line You will need is a strip in the same colour.
A can’s colours
Each can has three colours in Products. Colour is used for strips, marked names and selected text. Tile Colour is the paler ground behind its photo. Line Colour is a deeper tone for the 1 px lines, since a pale colour does not read at that thickness. Recipe and ingredient cards carry the line of their can. On a can’s own page every hairline takes its Line Colour and selected text its Colour: the script sprig-can-page reads both from two hidden layers on that page, Page line colour and Page tile colour. Which plants belong to a can is chosen on the can as well, under Main Ingredients and Additional Ingredients; an ingredient’s page lists the cans that have it as a main ingredient. The card’s strip still needs one can chosen on the plant itself, in Goes Into.
Names in the text
In body text a can’s name sits on its colour, is shown with Sprig before it and links to the can, and a plant’s name is underlined and links to its ingredient page. Write a can as Sprig Rhubarb & Rose or Rhubarb & Rose; a one-word name such as Blackcurrant needs Sprig before it. The script sprig-can-marks does this in the browser. It reads names and links from two hidden lists in the layout template, Can index and Ingredient index, so a new can or plant is picked up by itself. Only running text is touched, in the text layers named in BODY at the top of the script. SKIP holds phrases that should not link, such as lemon verbena, and BRAND is the word before a can’s name.
Next up
Recipe, post and can pages end with one strip that leads on to the next: the component UI/Next strip, with a label, a title, a short note, a colour and a text colour. On a phone it becomes a card set in from the edges, with the title larger. On post pages the phone card also carries the next post’s cover photograph under a dark veil, with light text, and stands directly under the writer’s name; that is a second copy of the section, Next up (phone), shown on phones only, so change its label or link in both. The strip’s Mark control swaps the label and note for a spruce tip at each end, which is how the Back to top strip is made.
Raised labels
The small numbers after the section titles on the home page, such as 06 cans, are text layers called Count. They follow the CMS through the Count override (see Live counts), so what you type is only the starting value; change their link in the same place. On post cards the reading time sits on the row under the photo, to the right of Post or Story. That is the control Read time on top on Cards/Post; switch it on, for every breakpoint, on any post card you add. Only the large card at the top of Posts leaves it off on desktop, where the reading time rides after the italic title instead.
What’s in the water
On a can’s page the Ingredients field is set as one sentence by the code component IngredientSentence. Write the field with commas and put a percentage in brackets, as in rhubarb juice (11%). The percentage rides after its ingredient, and an ingredient whose words contain a plant’s name links to that plant: lime juice and lime zest both lead to Lime. The closing words are the control Ending.
Spruce tip
The small spruce tip is the code component SprigMark; draw your own mark there. It sits on the first two full-width dividers of a page, the second one mirrored, which the script sprig-divider-count looks after. A spruce tip also closes every post and recipe after the last line. That one is a small drawing inside the style sprig-can-colour; delete its rule there if you would rather end without it.
This season
On the home page the four doors to Cans, Recipes, Posts and Stockists are written as one sentence by the code component RunningContents. Each phrase is a link, every second one is set in italics, and the small label after it is typed text. Add, remove or reorder the phrases in the property panel, and write the commas and the full stop as part of each phrase. The four-column row it replaced is still there as the component Contents entry.
Stockist cities
On Stockists the cities stand as one line of large words with the number of places after each, and clicking a city filters the list; click it again to show all. It is the ListFilter component with Index switched on, and the cities are typed in Options 1. A store is counted under a city when its City field is spelled the same way.
What’s in the water, home
On the home page and at the foot of an ingredient’s page the ingredients stand as a list of names beside one window, set by the code component IngredientWindow. The names are in alphabetical order and read down the columns; the first is at full strength and the others are faded until pointed at. Point at a name and its photograph is unmasked from the side the pointer is heading for, with its note and a link; Hover delay is how long the pointer has to rest on a name first. On a phone the photographs stand in a row to swipe, each with its name and note. Switch on Can strip to show which can each ingredient goes into. Nothing is typed in the component: it reads the hidden list Ingredient source in the same section, so a new ingredient in the CMS appears by itself, and the order is that list’s sorting. On the canvas it shows sample content.
Field descriptions
Every field in the CMS carries a description that says how its value should be written. Open a collection, choose Fields and click a field to read it.
Back to top
Every page ends with a strip above the footer that rolls the page back to the top. It is one layer, Back to top, in the Main Layout, with the override withBackToTop. Can, post and recipe pages end with Next up instead, so there it is switched off: select the page and untick Back To Top in the layout’s controls on the right. The strip is the component UI/Next strip with its Mark control switched on, which sets a spruce tip at each end in place of the label and the note; change the title on the layer.
Fact rows
The short lists of facts on can and ingredient pages are the component Fact row: a label, a thin line and the value in the serif at the right edge, with no lines between rows. The value uses the text style Fact value, which is ordinary text and not a heading. A few lines of CSS, sprig-fact-leader, make the line stop just before the value’s words when the value wraps; without them the rows still work. The recipe’s ingredient list is set the same way inside RecipeScaler.
Links in sentences
Round buttons are kept for Find a stockist and Become a stockist. Elsewhere a link is written into a sentence with the Text link style, as in “Read our story” on the home page or “Go back to home, or explore the cans” on the 404 page. On the dark Our story section the style sprig-link-on-dark turns the link light. On tablets and phones, links that only show an underline on hover are underlined from the start.
Sticky columns
On a can’s page the text column stays in view on desktop while the photographs scroll, and on a tablet the photographs stay instead; on recipe and ingredient pages the left column does the same. Each is a frame set to Sticky with a Top of 48. On the home page the headline over the cover photograph is sticky in the same way.
Page links from code
Links that code writes into the page (a can’s name in a text, an ingredient in a sentence, the ingredient cards, “You will need”) change page through Framer’s own router, so they get the page transition on every device. The helper for that lives in the Smooth scroll layer in the Main Layout. Delete that layer and those links still work, as ordinary links without the transition.
Spacing
Every gap, padding and sticky offset comes from one scale: 4, 8, 12, 16, 20, 24, 32, 48, 60, 80 and 120 px. When you add or move something, pick the nearest step.
Browser colour
Browsers that tint their own toolbar take the announcement bar’s colour while the bar is at the top of the window, and the page colour once it has scrolled away. The script sprig-theme-colour does it; delete it and the browser decides for itself.
404 page height
On the 404 page the navigation and the message fill the window exactly, so the Back to top band starts just below the fold. Framer cannot subtract the navigation’s height from the window’s, so a small style in the custom code (sprig-not-found-height) does it. If you change the navigation’s height, change the three numbers there: 96, 88 and 72 px for desktop, tablet and phone.
Scripts
Site Settings, under Custom Code, also holds the template’s short scripts. The notes above cover the newer ones; the rest are these. sprig-accordion makes the FAQ glide open, keeps one question open at a time, opens the first question on arrival and, when a topic button scrolls to a section, opens that section’s first question. On a phone no question opens by itself, which keeps the page still while it scrolls. sprig-utm remembers campaign tags for the forms. sprig-cookie-label names the cookie link for screen readers. sprig-cookie-actions adds Reject all and Accept all beside Save choices in the cookie banner, and makes its privacy link open in the same window. sprig-current-pill marks the filter pill, menu link and footer link for the page or section you are on, and makes a footer link to the page you are already on scroll back to the top. sprig-page-colour picks the colour of the block in the page transition: a can’s own colour on the way to that can, or to a recipe or ingredient that belongs to it, and Ink or Accent at random for every other page. sprig-footer-top prepares the footer links so that, on desktop, the link of the page you are on rolls over to “Back to top” when you point at it. sprig-a11y makes small accessibility repairs: headings are read as words, the phone menu button and the page you are on are announced, and email fields work with autofill. sprig-image-priority, the only one at the start of the head, tells the browser to fetch the first photograph on a page before the rest. sprig-image-protect keeps photographs from being saved with a right click or dragged out of the page. Delete it if you would rather leave them open. sprig-image-parallax lets wide photographs drift a little inside their frames as you scroll, and sprig-menu-close closes the phone menu when you move to another page.
Custom CSS
One block of CSS, called text-wrap, sits in the same place. It handles line breaks, the hairline hovers and active states, the page transition, the cookie banner’s layout, anchor offsets and the height of the form card. Delete it and the site still works, with plainer details and Framer’s own page fade. A few smaller rules sit at the start of the head: the looped ampersand in headings, the spacing of the ingredient links on a can page and the wrapping of the filter pills on a phone.
Code components
Season label
An override called Season sits on the band at the top of the home page. Its Label reads {season} {year}, and the override fills those two words in from today’s date. Type anything else there and it shows exactly what you typed.
Live counts
Numbers that depend on the CMS keep themselves up to date through an override called Count. The Main Layout holds five small hidden lists, Can index, Ingredient index, Recipe index, Post index and Stockist index. Give a text withCanCount, withIngredientCount, withRecipeCount, withPostCount or withStockistCount and its first number is rewritten to match that collection, as digits (06 cans) or as a word (Six cans). The This season sentence does the same for each phrase with Count from. What you type is the starting value and what the canvas shows; the published site shows the live number. “Eleven entries” on the Ingredients page counts the list under it instead: the list carries withCountSource and the text carries withItemCount. “Ten plants make six drinks” on Ingredients holds two numbers and stays typed.
Local dates
An override called withLocalDate sits on the layers that show a date: the post cards, the post page, the author line and the band on a recipe. Visitors in the United States see the month first (Oct 6, 2026); everyone else sees the day first (6 Oct 2026). It goes by the browser’s time zone. Put it on any other layer that shows a date, or remove it to keep Framer’s own order. A fifth override, withSectionParallax, sits on the photograph behind the stockist section and lets it drift as the section scrolls past.
The Components page shows every component with its variants. It is for you, like this guide.
The Checklist page records what was checked against Framer’s template best practices and what is left for you. Delete it and the Components page before going live, along with the other pages in step 7.
Can cards in a row
In the can grids on the home page and on Cans, the coloured line and the pack size sit at the same height across a row, also when one name wraps to two lines. A small style in the custom code (sprig-card-rule-align) stretches each card to its row and lets the tagline take the spare room. It looks for the layer names Product list, Product, Info and Tagline, so keep those names.
Next, never twice
On a post and on a recipe, the piece offered as Next is never also a card under Keep reading or More for the occasion. Those two grids fetch four cards and show three; a small script in the custom code (sprig-next-not-twice) leaves out the one that repeats the Next link. Keep the limit at four, and keep the layer names Next list, Post grid and Recipe grid.
Phone menu sentence
On a phone the open menu is one sentence with the page links written into it, not a list. It is the text layer Menu sentence in the Drawer of Navigation/Topbar (variant Phone Open), in the text style Menu sentence. To add or rename a page, edit the sentence and set the link on the word. The six old rows are still in the Drawer, hidden; show them and hide the sentence if you prefer a list.