Everything you need to customize, populate, and launch your roofing site — no code required for the basics, and clearly-labeled knobs when you want to go deeper.
Customize, populate, and launch your roofing site — no code for the basics, clear knobs when you want more.
Purlin's colors, fonts, type sizes, font weights and spacing are Variables, so you update a value once and every style that uses it follows. In Webflow, open the Variables panel: colors are in the Colors group (Cream, Forest, Forest Deep, Orange, Orange Dark, Ink, Card and more), fonts in the Fonts group, and sizes and spacing in the Type Scale, Spacing, Font Weight, Line Height, Letter Spacing and Radius groups. A few values are typed directly in their styles: the colors inside shadows and gradients (Webflow can't hold a Variable there), the hero headline size (a clamp() value) and a handful of one-off sizes used in only one or two places.
SWAPPING IMAGES
Most images update the same way: double-click the image on the canvas and choose Replace Image. To change a file everywhere it is used, open the Assets panel, choose ⋯ → Replace on the file. The Home hero photo is an Image element, so it updates the same way. The two crossfade slides behind it are class backgrounds (rl-hero-bg and rl-hero-bg-2) — change them in the Style panel under Backgrounds. Team photos come from the CMS (see below). CMS-driven images (service images, project Before / After and Gallery photos, team photos, and blog post covers) live on the Collection item itself, so update them from the CMS panel rather than the page canvas. The map on the Home, Contact and Service Areas pages is an illustration (a normal image, not an interactive map): replace it with your own map image the same way. The Open Graph preview image for each page is set separately under Page settings → Open Graph and won't update automatically when you change an on-page hero image. Every page currently points to the same Open Graph file (purlin-og-1200x630.jpg, 1200×630). Replace it with your own image once and select it in each page's Open Graph settings.
Ten CMS collections power the dynamic pages and local SEO. Add an item to Services, Projects, Service Areas, or Blog Posts and its detail page builds itself from the matching template; each of those detail pages uses the item’s Meta title and Meta description as its SEO title and description. FAQs and Process Steps appear as lists inside other pages and have no page of their own; Reviews, Team and the two category collections are lists too. A list shows every item (up to 100 per list) unless a limit is named below; the related-items lists on Service, Project and Blog Post pages show at most 3. There is no Load more button. The sort order of each list is written under its collection.
Typed text: what is still typed on the page, and is not a Fact and not in the CMS. Quote form dropdowns: the “I need” options on the Home quote form and the service dropdown on the Contact form are plain form options (both lists use the same order and values), so when you add or rename a service in the CMS, edit the options in both forms too. Names, places and numbers: the company-wide figures (rating, review count, roofs installed, years in business, material warranty years, workmanship warranty, financing APR and reply time), the company name, the short brand name, the city, region and state, the year, the inspection count and the emergency response are Company Facts, described under Components below. The claims tiles in the Home storm section and the financing example in the Home Financing section (the example roof total and the monthly payment for each term) are typed text; replace them with your own (each service’s own financing wording is a CMS field). Company-wide sections: the Home “How it works” and “The Purlin difference” sections and the About “How we work” section are one text for the whole company, so they are typed on the page and are not CMS fields; rewrite them for your own business. Sentences that name your region (Austin and Central Texas in the demo) are built with Fact City, Fact Region and Fact State: the Home, Services, Projects, Service Areas, Contact, Reviews and Blog sections and intros, the About story, the Footer description (shown on every page except the 404 and the Style Guide) and the Mobile Menu line (shown on every page). Change the Fact default and every sentence that uses it follows; the sentence itself stays as written. The Orange CTA Band texts no longer name a city or your company. Page titles, descriptions and structured data are listed below. Structured data: in Page settings the Home page JSON-LD lists the cities you serve (areaServed) as typed text, so update it when you add or remove a Service Area, and it carries your company name, phone, address and rating. The Contact JSON-LD carries the company name and phone. Every other regular page has a short JSON-LD whose name, description and url are typed text, including the purlin-premium.webflow.io address: Services, Projects, Service Areas, Reviews and Blog use CollectionPage, About uses AboutPage, and the legal, docs and Style Guide pages use WebPage. Replace them with your own. The 404 page and the CMS detail pages (Services, Projects, Service Areas, Blog Posts) have none. Section labels such as “How a project runs”, “FAQ” and the Home page section headings are fixed text on the page.
Your phone numbers, company name, license number, business hours and your address are stored in small Components, so you change each one in a single place and every use of it follows. To change one everywhere, select it on the canvas and click the component icon at the top of the right panel to open it, select the text or link inside, then in the Settings panel click the arrow next to its Property, choose Edit settings and change the default value (press Tab to confirm). The Properties panel shown when one placed copy is selected changes only that copy, and clicking a component in the Components panel adds a new copy to the page instead of opening it. A few related details (such as the phone number in the form placeholders) are plain text; they are listed at the end.
The shared pieces are Webflow Components — open one and edit it, and every page that uses it updates. You'll find them in the Components panel (clicking one there adds a new copy to the page):
Cards reused in more than one place are Components too: Blog Card, Project Card, Review Card, About Card, Maker Badge, Services Grid (and Services Grid Featured for the Home page) and Filter Chips. The other listing cards use shared classes — edit the class to restyle every card at once.
Navigation links (change once): the menu links are seven components in the Navigation group: Nav Services, Nav Projects, Nav Service Areas, Nav Reviews, Nav About, Nav Blog and Nav Contact. Each one is used in the Navbar, the Mobile Menu and the Footer (Blog is not in the Navbar, Services is not in the Footer). To rename a link or change where it goes, open its component: select it in the Navigator, then click the component icon at the top of the right panel. Open the Properties panel in the left sidebar, click Label or Link, and change Default Text or Default Link in Property settings. Press Tab to apply. All three menus follow. Do not change Label or Link in the right panel of a single instance: that changes only that one place, and it no longer follows the default.
Your business details are Components as well: Phone, Emergency Phone, License Number, Company Address, Hours and, in the Company Facts group, Fact Company Name. Change their default values once (see the phone, address, license, hours and company name notes above). Several components also have text Properties: Trust Bar (labels), Orange CTA Band (heading and subtext; their default wording names no city or company), Sticky CTA Bar (quote button) and Nav Docs (last link). The Announcement Bar has none: its two messages are plain text with Fact Inspection Points inside. Text inside a component that is not one of its Properties (for example the Privacy, Terms and Licenses links in the footer) is edited inside the component: double-click the component on the canvas to open it, select the link, then change its text in the Settings panel under Link settings > Text. For text that is not a link, select it and double-click to edit it on the canvas. Keep the two switches on Services Grid on.
Company Facts: the numbers that describe your company are Components in the Company Facts group of the Components panel, so you change each one once. Change a Fact’s default value (open it, select its text, then Edit settings in the Settings panel) and every place that uses it, including the Trust Bar, follows. Some numbers are still typed inside sentences and tiles; the main ones are listed under Typed numbers below, so check any figure that does not match your business. Nine of the Facts are: Fact Company Name (the full company name; the © line in the Footer and the 404 footer), Fact Rating (4.9; Home hero stats, hero review chip and reviews heading, Reviews hero and badge, Trust Bar), Fact Review Count (600+; Home hero stats and reviews heading, Reviews, Trust Bar), Fact Roofs Completed (2,400+; Home hero stats, About stat tiles), Fact Years in Business (17; About stat tiles), Fact Material Warranty Years (25; About stat tiles), Fact APR (3.99%; Home financing tile), Fact Response Time (1 business day; Home hero badge, Contact hero badge) and Fact Workmanship Warranty (Lifetime; Home hero stats). Eight more Facts hold the names and places that sentences are built around, in the same group: Fact Brand Name (Purlin), Fact City (Austin), Fact Region (Central Texas), Fact State (Texas), Fact State Code (TX), Fact Year (2026), Fact Inspection Points (21) and Fact Emergency Response (24/7). Fact Brand Name is the short name inside sentences (the difference heading on Home, About, the Service Area trusts heading, the Terms and Privacy text and the Style Guide); Fact Company Name stays the full name in the © line. Fact City, Fact Region and Fact State are the city, region and state inside the Home, Services, Projects, Service Areas, Contact, Reviews and Blog sentences, the About story, the Footer description and the Mobile Menu line. Fact State Code (TX) is used with Fact City in the Company Address component. Fact Year is the year in the © lines of the Footer, the 404 footer and the Style Guide footer: change its default when the year changes. Fact Inspection Points is the number in the Announcement Bar messages and the About timeline, and Fact Emergency Response is the 24/7 in the Home storm section and on the Contact page. The Trust Bar has no rating Property of its own: its rating line is built from Fact Rating and Fact Review Count. Only Page settings carry some of these numbers as typed text — the Reviews SEO title, the Reviews JSON-LD name and the Home JSON-LD — so update them there when you change a Fact.
Page settings to edit by hand: the SEO and structured data fields are typed in each page's Page settings (Webflow cannot set them globally), so only a few places still carry company numbers as typed text. Home: the JSON-LD ratingValue (4.9) and reviewCount (600, digits only). Reviews: the SEO title and the JSON-LD name (4.9, 600+). The other page descriptions and structured data contain no Fact numbers, but a few descriptions mention “24/7” or the 21-point inspection, so reread them when you rewrite. Open Graph titles and descriptions copy the SEO fields on every page, so you only edit the SEO fields; the Open Graph image is chosen on each page.
Values kept per CMS item: these are not company-wide, so you edit them item by item. The Projects Spec warranty field holds each project’s own warranty. The FAQs answers mention the liability coverage amount and the 21-point inspection. Customer quotes in Reviews (for example “The written warranty sealed it.”) belong to your customers, so reread them if you change your warranty. The Terms page warranty clause (a written workmanship warranty) is typed on the page, so rewrite it to match your own terms.
Typed numbers and where they are: the Home storm tiles, the 40+ in-house crew count on About, the founder’s “15 years” in the Team bio, the Home FAQ figures (the liability coverage amount, “1–2 weeks”), the Home financing table (3, 5 and 10 year terms and the example payments) and the “60 seconds” it takes to fill in the quote form. The 21-point inspection uses Fact Inspection Points in the Announcement Bar and the About timeline. The six cities you serve are typed in the Home JSON-LD (see above). Credential and badge names come from several places: the Trust Bar (Credential 1 and 2), the About Cards in the credentials section, the Maker Badges on the Service Detail template, the Projects Spec Material field (for example “Dimensional shingle · Charcoal”) and the typed “Licensed & insured” badge on the Reviews page. The Home and Services hero paragraphs only say “a written workmanship warranty”, but the Home hero stats also show the Workmanship Warranty Fact (“Lifetime”). Update that Fact if your warranty differs.
Scripted motion on this template runs on GSAP 3.12.5, loaded from cdnjs, plus a handful of registered site-footer scripts. Scripted scroll and hover motion animates transform and opacity; the exceptions are the FAQ accordion (height), the nav bar shadow (a CSS transition) and two text effects (the count-up and the headline typewriter). Button, link and card hover changes (colour, border and shadow) are plain CSS transitions. Under prefers-reduced-motion: reduce the scripted reveal, count-up, typewriter, hover effects, sticky-bar hide and hero crossfade are switched off, and the mobile menu, FAQ and filter chips change instantly; only the back-to-top button and the filter-chip scroll hint still fade (opacity, about 0.3s). The CSS hover transitions on buttons, links and cards and the nav bar shadow are not switched off.
data-reveal attribute.rl-stat-num / .rl-abtp-stat-num.rl-nav-bar.rl-fab.rl-mtoggle .rl-mclose .rl-menu-wrap .rl-menu-1data-filter-group data-filter data-tags.rl-nav + current page matchA short excerpt of the reveal animation:
data-reveal and similar attributes on elements are harmless once the scripts are gone — they do nothing without the script.gsapCore and gsapScrollTrigger). The scripts that need GSAP then do nothing, including the current-page nav underline and the back-to-top button; the mobile menu and filter chips still work, without the fade, and the CSS hover transitions stay..rl-fab back-to-top button as you scroll (the smooth scroll on click is in rlMotionInit2)The Financing section on the Home page shows static example monthly payments for a typical project (one example roof total, paid over 3, 5 and 10 years at 3.99% APR), so there's no calculator script to configure. To change the example, edit the typed amounts in the financing table and the APR Fact.
FORM SUBMISSIONS
The quote form on the homepage (named Home Quote, with name, ZIP code, phone and service) and the form on the Contact page (named Contact) both use Webflow's native form handling, so no extra script or third-party service is required; the form names are what you see in Submissions. The Style Guide page also has a demo form (Style Guide Demo) that shows up in Submissions; ignore it or remove it. Set where notifications go: select the form, open its element settings and add the email address that should receive new submissions under Send to → Email notifications; otherwise they only appear under Site settings → Forms. To change the message people see after sending a form, select a field inside the form, open the Settings panel, set State (under Form settings) to Success or Error, then double-click the message on the canvas to edit it, or change the text in the Settings panel. Webflow stores submissions made on the staging (.webflow.io) domain and on a custom domain alike, and you can read them under Site settings → Forms. Add the address that should receive an email for each new submission (see above). You can review or export every submission at any time from Site Settings → Forms → Submissions.
Need something this guide doesn't cover? Here's where to look next.
