Skip to content

Protocol Raw Website Documentation: Homepage

Version: 4.4 Last Updated: 18 April 2026 Owner: Protocol Raw Operations Classification: Internal Reference URL: https://www.protocolraw.co.uk

1. Document Overview

This document provides a complete reference for the Protocol Raw homepage as currently live on Shopify. It captures the structure, copy, design decisions, and strategic intent behind every section, serving as the single source of truth for the site as built.

The homepage is a conversion page. Its job is to move a raw-curious premium buyer from interest to action (entering the calculator) in a single scroll. Every section either advances commitment, resolves a concern, or directs to action.

Attribute Detail
Page type Conversion page
Primary CTA Calculate Your Plan (links to calculator)
Secondary CTA See Sample Batch Report (moved to Proof section in v3.0)
Platform Shopify
Design system Visual Identity Guide v2.4, Web Design System v1.0
Voice Brand Voice & Copy Guidelines v1.4
Page title Protocol Raw | Complete Raw Dog Food
Last captured 26 March 2026

2. Global Navigation

The navigation is persistent across all pages, using a sticky header with the Protocol Raw wordmark on the left and navigation links in the centre. The primary CTA button sits on the right.

Item Destination
Protocol Raw (logo) Homepage (/)
How It Works /pages/how-it-works
Ingredients /pages/ingredients
Nutrition /pages/nutrition
Calculate Your Plan (CTA button) /pages/calculator

Design Notes

Logo: "Protocol Raw" set in Montserrat Bold, Espresso (#2B2523).

Nav links: Inter Medium, Espresso. Hover state transitions to Burnt Sienna (#B85C3A).

CTA button: Outlined style with Burnt Sienna border and text. Arrow icon animates on hover.

3. Page Title & SEO

The homepage <title> tag is: Protocol Raw | Complete Raw Dog Food

Inner pages use: {page_title} | Protocol Raw — with deduplication logic that omits | Protocol Raw if the page title already contains "Protocol Raw".

JSON-LD Schema (Homepage Only)

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Protocol Raw",
  "url": "https://www.protocolraw.co.uk"
}

Plus an Organization schema with logo and social links.

4. Section Flow Summary

The complete scroll order of the homepage, with each section's conversion job:

# Section Section Type Conversion Job
1 Hero hero-protocol Hook with emotional promise + proof signal
2 Waitlist Hero CTA waitlist-hero-cta Early email capture (pre-launch only)
3 Trust Strip trust-strip-protocol Establish institutional credibility (passive)
4 Dog Size Preview dog-size-preview-v3 Price transparency, create engagement
5 The Feeling outcome-section Emotional anchor — Phase A feelings (simplicity, certainty, pride, joy)
6 The Food the-food Build confidence in formulation + defend single-SKU
7 Signature Divider signature-divider Dark Declaration — cooking vs testing contrast
8 How It Works how-it-works Remove complexity anxiety (3 simple steps)
9 The Proof proof-showcase Demonstrate verification system with real data
10 Founder Beat homepage-founder-beat Warm founder context — deliberate contrast after proof
11 The Evolution evolution-section Bridge from cooked to raw (Butternut Box audience)
12 Lifestyle Image emotional-moment Visual warmth leading into calculator (image only, no copy)
13 Calculator feed-calculator Convert interest to personalised action
14 FAQ faq-section-v1 Defuse remaining objections (7 questions)
15 Footer Waitlist homepage-footer-waitlist Quiet final-chance waitlist capture
16 Footer protocol-footer-v2 (web component) Navigation and brand closure

Sections Removed (v2.0)

  • "Transparency isn't a claim, it's a feature you can use" divider — Removed. Philosophy statement that restated what The Proof section already delivers. Broke the v2.4 momentum rule.
  • Waitlist Mid CTA — Removed from template (file retained). Reduced homepage to two waitlist captures (hero + close) instead of three.
  • Founder Statement / Final CTA — Replaced by Founder Beat + Waitlist Close. The old section tried to do two jobs (founder warmth + waitlist capture) in one section. Now split into two sections, each doing one job well.

Changes in v4.1 (Copy Relocation + Calculator Photos)

  • Signature Divider new copy — "Some brands cook the food for safety. We test every batch instead, so the food stays raw and the nutrition stays intact." Replaces "One food done right beats twenty done halfway." Mobile font reduced 22px → 18px, container widened 540px → 620px. This is now a cooking-vs-testing contrast line, aligned with BP v2.9 thesis.
  • "One food done right" relocated to The Food section — Added as Burnt Sienna signature line (Montserrat Bold) above the CTAs. Gives the formulation section its own memorable closer.
  • Calculator "How it works at home" photos — Three placeholder spans replaced with actual product photography: Store frozen (calc-hiw-store.png), Serve fresh (calc-hiw-serve.png), Scan & verify (calc-hiw-scan.png). Lazy-loaded from Shopify Files CDN.
  • Brand Voice reference — Updated v1.3 → v1.4.

Changes in v4.0 (Phase A Emotional-Anchor Pass)

  • Dog Size Preview reframed — Subtitle, assumptions, and note copy changed to position this as a quick estimate, not a full calculator. Daily pricing (£X.XX/day) is now the primary display figure; weekly pricing is secondary. Box info line, "Delivered frozen" label, and veterinary standards confidence signal removed. CTA changed to "Get Your Exact Plan".
  • "The Feeling" replaces "What Owners Notice" — Label, title, subtitle, and signature line all changed. Cards replaced with emotional anchors (Simplicity, Certainty, Pride, Joy) in place of physiological outcomes (Appetite, Coat, Energy, Digestion). Per-card images removed; single full-width lifestyle image above headline added via Customizer image picker. Mobile carousel replaced with stacked text grid.
  • Waitlist Hero CTA redesigned — Compressed from full-width section to compact inline utility bar. Button changed to outlined "Notify me". Label and reassurance text removed.
  • The Food bridge line added — "How do you make a complete food without supplements? From the ingredients themselves." between closing copy and CTAs. Ingredients CTA renamed to "See where every nutrient comes from →".
  • Print styles added — Global @media print stylesheet and beforeprint JS handler to force lazy images to load before printing.

Changes in v3.0 (Homepage Tightening Pass)

  • Hero secondary CTA removed — "See Sample Batch Report" link removed from hero. The link already exists in the Proof section where it contextually belongs. Hero now has a single CTA: "Calculate Your Plan".
  • Founder Beat moved — Moved from position 13 (after calculator) to position 10 (between Proof and Evolution). Creates deliberate contrast: the most systematic/data-forward section (Proof) followed by the most human moment (Founder Beat).
  • Section reorder: Proof before Evolution — Proof now sits at position 9, before Founder Beat and Evolution. The sequence is: How It Works > Proof > Founder Beat > Evolution > Calculator.
  • Lifestyle Image merged with calculator flow — Copy line ("You'll know it's working. They'll show you.") removed (outcomes section already covers this). Section now renders as image-only with zero bottom spacing, sitting flush against the calculator to create one visual unit.
  • Calculator desktop top padding tightened — Reduced from 64px to 16px so the calculator tucks under the lifestyle image.
  • Proof section conversion CTA removed — The "Calculate Your Plan" button + "No contract..." + "Transition guide..." reassurance text removed from proof-showcase. Proof section now ends after the depth link. Reassurance text moved below the calculator.
  • Reassurance text below calculator — "No contract. Pause or cancel anytime." and "Transition guide included with your first box." now render below the calculator as secondary text (Inter 400, 14px, Warm Gray #918A85, centred).
  • Calculator prelaunch waitlist capture — In prelaunch mode, the "Start Your Plan" CTA is replaced with "Your plan is saved. We'll let you know when your area is live." + waitlist email capture (source: calculator_result).
  • Mid-page waitlist removed — homepage-waitlist-close section removed from template. Eliminated dual-mode confusion between "join waitlist" and "calculate your plan".
  • Footer waitlist added — New quiet homepage-footer-waitlist section after FAQ. Cream background, tight padding (40px mobile / 48px desktop). Label: "LAUNCHING SOON IN LONDON." Copy: "Be first to know when we're ready." Source: homepage_footer.
  • FAQ trimmed from 12 to 7 questions — Removed: "Is this safe to handle in a normal kitchen?" (covered by How It Works), "What if I forget to defrost?" (trivial), "Can I pause or change deliveries?" (stated elsewhere), "Does the price include delivery?" (visible in price slider), "Can I transition gradually from my current food?" (duplicate). Remaining 7 reordered.

5. Hero Section

The hero is the first full section the visitor sees. It uses a split layout with lifestyle photography on the left/top and copy on the right/below.

Photography

Warm-toned lifestyle image: woman in a modern kitchen with a golden retriever sitting attentively on the floor. Warm natural light from windows. Wood and natural material kitchen. The image communicates "premium home, calm dog, real life" rather than studio or stock photography.

Copy (exact)

Headline: Feed them well.

Subtitle (Burnt Sienna): It's all worked out.

Body: One complete food. Calculated for your dog. Tested before it ships.

Note (v4.3): The hero has no eyebrow label. The first thing a visitor reads is the headline "Feed them well." A "Starting in London." eyebrow was present in the live template up to v4.2 but was never documented; it was removed in v4.3 so the headline carries the entire opening moment. The launch geography message now lives only in the footer waitlist section (§17), where it has the right context.

Benefit Markers

Icon Text
Target icon Complete for every life stage
Shield icon Tested with published results
Snowflake icon Frozen ready to serve

CTAs

Primary: "Calculate Your Plan". Large outlined button, links to calculator.

Note: The secondary CTA "See Sample Batch Report" was removed in v3.0. The batch report link lives in the Proof section where it contextually belongs.

Design Notes

Hero uses full-bleed image with 0px top padding per v2.4 conversion spacing. The headline "Feed them well." is in Montserrat Bold at hero scale (80px desktop / 44px mobile). The subtitle "It's all worked out." is in Burnt Sienna, creating the signature warmth moment. Body text is Inter Regular in Taupe.

Strategic Intent

The headline leads with the emotional outcome (feeding well) rather than the mechanism (batch testing). The subtitle provides reassurance that the complexity has been handled. This follows the Brand Principle: lead with the feeling, back with the system. The benefit markers provide quick proof-point scanning. The secondary CTA to the batch report establishes "proof, not promises" positioning from the very first section.

6. Waitlist Hero CTA (Pre-Launch Only)

Renders only when settings.prelaunch_mode is enabled.

Redesigned in v4.0 from a full-width section to a compact inline utility bar. Email input and "Notify me" button sit side by side on one line. The "LAUNCHING SOON IN LONDON." label, "No spam. Just a launch notification." line, and snippet heading/body are all hidden via CSS — the section provides only the form.

Background: Warm Linen (#EBE8E3) Vertical padding: 16-20px (utility strip, not a full section) Source value: homepage_hero Form: Waitlist email capture via waitlist-form snippet. Button: Outlined/ghost style (Burnt Sienna border and text, transparent background). Text overridden to "Notify me" via CSS so the shared snippet is unchanged for other pages. On hover, fills to Burnt Sienna with white text. Layout: Email input + button inline on all screen sizes (no stacking on mobile).

7. Trust Strip

A horizontal strip of three credential markers providing instant credibility signals.

Copy (exact)

Independently lab tested · Complete for every life stage · Produced in a DEFRA-approved facility

Design Notes

Sentence case, Inter Semibold, small type (11-12px), letter-spacing 0.08-0.1em. Separated by centre dots. Cream background. Full-width strip. "DEFRA-approved" retains its hyphenated form because it's a recognised UK consumer phrase.

Note (v4.4): the section historically rendered in all-caps via text-transform: uppercase on .trust-strip__text. That CSS rule was removed and the source strings rewritten in sentence case, so the line now reads as plain-English credentials rather than regulator acronyms. See Version History.

8. Dog Size Preview

Label: FIND YOUR PLAN

Title: See what it costs for your dog

Subtitle: A quick estimate based on weight alone.

Interactive weight slider allowing the visitor to drag between 5kg and 50kg. As the slider moves, daily portion, daily calories, and daily cost update from a backend calculation.

Results Display

Assumptions line: "Based on a typical adult · the full plan is more precise"

Three asymmetric columns with deliberate visual hierarchy (cost > portion > calories):

Column Value Desktop / Mobile size Colour Label
Daily portion g/day 28px / 21px Espresso #2B2523 "Daily portion"
Daily calories kcal/day 22px / 17px Warm Gray #918A85 "Daily calories"
Daily cost £X.XX 32px / 24px Burnt Sienna #B85C3A "/day", weekly cost as secondary muted line below

Daily cost is the PRIMARY display (largest, Burnt Sienna). Daily portion is secondary (medium, Espresso). Daily calories is tertiary (smallest, Warm Gray) — a precision signal showing the underlying MER, not a sales lever. Weekly cost sits directly below the cost column as a secondary note (smaller, Warm Gray, no parentheses).

Framing line below results grid: "Portions built around your dog's energy needs." (Inter 400, 13px, Warm Gray #918A85, centred)

Note above CTA: "The full calculator builds a plan around your dog." (Inter 400, 14px, Warm Gray #918A85, centred)

Backend computation (v7.3)

The section no longer computes portion, calories, or cost on the frontend. On every slider change, the section calls the same calculator-compute-plan Supabase Edge Function used by the full calculator (feed-calculator.liquid), passing a fixed pet profile: adult / moderate activity / ideal body condition / neutered. The response provides householdDailyGrams, householdDailyCalories, and firstWeeklyPrice, which the section renders directly.

Implementation details: - 250ms debounce on slider input — backend is not called on every pixel of movement - AbortController cancels in-flight requests when the slider moves again - Weight number and slider track fill update immediately for tactile feel; numeric values update on debounce - Last successful response is cached as lastGood; if a request fails, the section falls back to those values silently (no flash, no loading state, no error UI) - Initial render fires a compute request on page load with the default 15kg value

This is the single source of truth for portion/calorie/price arithmetic. Removing the duplicate frontend formulas eliminates the risk of the homepage preview drifting from the full calculator. Any change to RER/MER/box recommendation logic in calculator-compute-plan is automatically reflected here.

CTA

"Get Your Exact Plan". Large outlined button with arrow icon.

Strategic Intent

The section was reframed in v4.0 from a calculator-like interaction to a quick estimate preview. Copy changes ("quick estimate based on weight alone", "the full plan is more precise") set expectations that the full calculator offers more precision. Daily pricing as primary enables instant comparison against Butternut Box (who show daily pricing). The "veterinary metabolic standards" confidence signal was removed from this section — it belongs on the full calculator.

The calorie column was added in v7.3 as a precision signal: it shows the customer that the portion is derived from a specific energy requirement, not a body-weight percentage. This reinforces "veterinary-standard calculation" without using those words. Visual hierarchy keeps it tertiary so it doesn't compete with cost.

9. The Feeling Section

Label: THE FEELING

Title: It just works.

Body: Feeding your dog well stops feeling complicated.

Lifestyle Image

A single full-width lifestyle image sits above the headline. Selected via Shopify Customizer image picker (lifestyle_image setting). Current image: owner and springer spaniel in a London kitchen, warm morning light, calm domestic moment. Responsive srcset (600w–1600w), eager loading, no border radius. Full-width edge-to-edge on mobile, contained within section max-width on desktop. If no image selected, the section renders without it.

Feeling Cards

Text-only cards in a 2×2 grid on desktop, single column on mobile. No per-card images. Cream (#F9F7F4) background, 12px rounded corners, subtle box shadow.

Card Title Copy
1 Simplicity No meal prep. No rotation schedules. No mental load. Just feeding, done.
2 Certainty You know exactly what's in it. And you can check the results yourself.
3 Pride The kind of food you're proud to tell people about.
4 Joy No coaxing. Most bowls empty quickly.

Closing Line

Signature line (Burnt Sienna): The difference is how it feels.

CTA: "Calculate Your Plan →"

Strategic Intent

This section was deliberately moved from Phase B visible-change language (physiological dog outcomes: Appetite, Coat, Energy, Digestion) to Phase A emotional-anchor language (owner experience feelings). Three cards address owner feelings (Simplicity, Certainty, Pride), one addresses the dog's experience (Joy). This aligns with the Phase A crown: "they made raw feeding something you don't have to worry about." Per-card lifestyle images were removed in favour of a single hero image above the headline — the cards are now clean text blocks that read faster. The mobile carousel was replaced with a simple stacked grid.

10. The Food Section

Label: THE FOOD

Title: Multiple proteins, organs, and bone. One complete food.

Anchor line (Burnt Sienna): Everything your dog needs. Already worked out.

Ingredient Tags

Displayed as pill-shaped tags in a flowing grid:

Beef Heart, Beef Lean Meat, Beef Green Tripe, Beef Liver, Beef Kidney, Chicken with Bone, Chicken Gizzards, Dehydrated Mussel, Dehydrated Oyster, Whole Egg, Fish Oil, Kelp Meal

Contextual Aside (footnote-style, under the pills)

Organ meats, bone, and shellfish aren't unusual. They're where the nutrients are. Each ingredient replaces a synthetic supplement that other foods add separately.

Sits immediately below the last ingredient pill, before the closing copy. Styled as a quiet aside, not a competing paragraph: Inter 400, 14px, Taupe (#6B6360) at 70% opacity, max-width 640px, centred. 16px top margin from the pills, 32px bottom margin before the closing copy. Reads as a footnote to the ingredient list. Mirrors the same line on the Ingredients page so visitors entering from either page see the same explanation.

Closing Copy

Complete for every life stage. No synthetic additives. One recipe done right beats six done halfway.

Bridge Line

How do you make a complete food without supplements? From the ingredients themselves.

(Same font, size, and colour as the closing copy. Reads as a natural continuation, not a separate element.)

CTAs

"See where every nutrient comes from →". Text link to /pages/ingredients.

"Calculate Your Plan →". Text link to calculator.

10a. Signature Divider Section

Section: signature-divider

Position: Between The Food (Section 6) and How It Works (Section 8).

Job: Dark Declaration. Creates a visual breathing moment and delivers the cooking-vs-testing contrast line.

Copy:

Some brands cook the food for safety. We test every batch instead, so the food stays raw and the nutrition stays intact.

Design: - Background: Espresso (#2B2523) — Dark Declaration pattern - Dot texture overlay (consistent with Stone/CTA sections) - Text: Cream (#F9F7F4), Montserrat 700 - Font size: 18px mobile / 26px tablet (600px+) / 28px desktop (900px+) - Max-width container: 620px, centred - Compact vertical padding: 40px mobile / 56px desktop - Scroll-triggered fade-up animation - No label, no CTA — just the line

Previous copy (pre-v4.1): "One food done right beats twenty done halfway." — relocated to The Food section as a signature line above the CTAs.

11. How It Works Section

Label: HOW IT WORKS

Title: Simpler than you think.

Body: Feeding your dog well should never be complicated.

Three Steps

Step Title Copy
1 Calculate your plan Tell us your dog's weight, age, activity level, and body condition. We calculate the exact daily calories they need. If they're carrying extra weight, the portion adjusts.
2 We prove it's safe Every batch is tested at a UKAS-accredited lab before it ships. If it doesn't pass, it doesn't leave. Results published with every box.
3 Thaw. Serve. Done Move tomorrow's portion to the fridge tonight. Serve at room temperature. Clean the bowl like you'd clean a chopping board.

Closing Line & CTAs

Signature line (Burnt Sienna): No prep. No mess. No expertise required.

"Calculate Your Plan". Large button.

Below CTA: "No contract. Pause or cancel anytime."

"See the full process →". Text link to /pages/how-it-works.

12. The Evolution Section

Label: THE EVOLUTION

Title: You already know food quality matters.

Copy (exact)

That's why you've been looking. Fresh, cooked food for dogs exists because cooking kills bacteria. It works. But heat inevitably alters nutrients.

There's another way to solve safety. Test every batch independently before it ships. Keep the food raw. Keep the nutrition intact. Publish the results.

Closing Line

The next step is verified.

13. The Proof Section

Label: THE PROOF

Title: You don't need to check. But you can.

Body: Your dog's food. Tested before it ships. Results published with every box.

Sample Batch Report Card

Field Value
Salmonella NOT DETECTED
Listeria NOT DETECTED
Hygiene PASS
Lab UKAS Accredited

CTAs

"See a Sample Batch Report →". Links to https://proof.protocolraw.co.uk/batch/sample (pre-launch). Post-launch this swaps to https://proof.protocolraw.co.uk/batch/latest per the launch wake-up checklist; the value is held in templates/index.json under the proof-showcase section's cta_url setting.

"Why testing replaces cooking →". Depth link pill, links to /pages/why-testing-replaces-cooking.

Note: The "Calculate Your Plan" button and reassurance text ("No contract..." / "Transition guide...") were removed from this section in v3.0. Reassurance text now appears below the calculator.

14. Lifestyle Image (Visual Lead-in to Calculator)

A full-width warm lifestyle photograph: dog relaxing in a home kitchen in warm natural light.

Design Notes

Image-only section with no copy line (removed in v3.0, as the outcomes section already covers this sentiment). Zero bottom spacing and no gradient overlay, so the image sits flush against the calculator section below. Together they read as one visual unit: warmth flowing into action. Calculator desktop top padding reduced to 16px to complete the merge.

15. Calculator Section

Label: YOUR FEEDING PLAN

Title: Let's find the right plan.

Body: We calculate the exact calories your dog needs based on their age, activity, and body condition. Not a percentage of body weight. Not a guess. If their condition changes, the plan changes too.

Calculator Embed

The full calculator is embedded inline with a multi-step form: dog name, life stage, weight, activity level, body condition.

Below Calculator

"Calculated using veterinary-standard metabolic energy requirements (MER). Not a percentage. Not a guess."

Reassurance text (added v3.0): "No contract. Pause or cancel anytime.", "Transition guide included with your first box.", and "Most dogs take to it quickly." (added v4.2). Styled as Inter 400, 14px, Warm Gray (#918A85), centred. Moved here from the Proof section.

Design Notes

Background: Cream (#F9F7F4). Compact padding (16px top on both mobile and desktop / 20px bottom mobile, 40px bottom desktop). Internal spacing tightened: header margin 24px, progress dots 16px, input groups 28px.

Pre-Launch Mode

When settings.prelaunch_mode is true, the "Start Your Plan" CTA in calculator results is replaced with: - "Your plan is saved. We'll let you know when your area is live." (Inter 400, 16px, Espresso, centred) - Waitlist email capture via waitlist-form snippet (source: calculator_result) - The secondary "Start Your Plan" CTA below results is also hidden

Throttle Mode

When settings.throttle_enabled is true, the calculator section redirects to the waitlist page and shows a fallback section with heading "Worth the wait." and a waitlist CTA link.

16. Founder Beat Section (NEW in v2.0, MOVED in v3.0)

Section file: sections/homepage-founder-beat.liquid Position: Between Proof and Evolution (moved from after calculator in v3.0). Creates deliberate contrast: the most systematic/data-forward section (Proof) followed by the most human moment. Purpose: Compressed founder warmth. Emotion-first, evidence-second. A breathing moment.

Design

Background: Dark Espresso (#2B2523) with white dot texture overlay (radial-gradient(circle, rgba(249, 247, 244, 0.06) 1px, transparent 1px) at 24px grid).

Copy (exact)

Label (Burnt Sienna): THE SHORT VERSION

Headline (Cream): We just wanted to know we were getting it right.

Body (Cream): So we built something different. A single, complete recipe. Independently tested. Nothing hidden.

Design Notes

No CTA. No signature line. This is a breathing moment. The body copy is the resolution. The next section handles the action. Padding: 48px desktop / 28px top 36px bottom mobile.

Strategic Intent

The homepage already has a full Proof section with the batch testing story. The ending does not need to repeat any of that. The Founder Beat provides warm, human context that points toward the differentiator without leaning into any single pillar (safety, completeness, or portioning).

Section file: sections/homepage-footer-waitlist.liquid Purpose: Quiet final-chance waitlist capture after FAQ, before footer. Replaces the mid-page Waitlist Close section removed in v3.0.

Copy (exact)

Label (Burnt Sienna, uppercase, 11px): London first. Then everywhere.

(Renders as "LONDON FIRST. THEN EVERYWHERE." on screen via text-transform: uppercase.)

Body: Be first to know when we're ready.

Form

Waitlist email capture via {% render 'waitlist-form', source: 'homepage_footer' %}. The snippet's built-in heading and body are hidden via CSS (.footer-waitlist .waitlist-capture__heading, .footer-waitlist .waitlist-capture__body { display: none; }); the section provides its own quieter label and subline. Note: The shared snippet's heading was also updated to "London first. Then everywhere." in v4.3 — that change does not affect this section visually (heading is hidden) but does update every other place the snippet renders, including the dark Espresso CTA blocks on /pages/ingredients and /pages/nutrition.

Source value homepage_footer preserved for analytics continuity.

Design Notes

Background: Cream (#F9F7F4). Tight padding: 40px mobile / 48px desktop. Max-width 480px. This is a utility section, not a conversion moment. No large headlines, no dramatic spacing.

Previous Section (Removed in v3.0)

The Waitlist Close section (homepage-waitlist-close) was removed from the homepage template in v3.0. It created dual-mode confusion between "join waitlist" and "calculate your plan". The section file is retained for potential use elsewhere.

18. FAQ Section

Label: THE PRACTICAL STUFF

Title: Questions you're probably already asking.

Displayed as an accordion with expandable answers. One open at a time. Scroll-triggered staggered reveal animation.

Questions & Answers (7 questions, reordered in v3.0)

How do you ensure safety? Every batch is independently tested for Salmonella, Listeria, and Enterobacteriaceae before it ships. If it doesn't pass, it doesn't ship. You can check the results yourself via the QR code on your box. "Read the full explanation →"

Is it nutritionally complete? Yes. Protocol Raw Complete uses nineteen whole-food ingredients, each chosen for a specific nutritional role, so no synthetic additives are needed. One recipe for every life stage, from puppies through to seniors, independently lab-confirmed. See the full breakdown on our Nutrition page.

What if my dog doesn't take to it? Most dogs take to it quickly. It's made with green tripe, organ meats, and animal fats, ingredients many dogs respond to strongly. Because it's raw, the smell is intact. Your first box includes a transition guide with exact amounts and timing. If your dog needs a slower transition, get in touch. We'll help you work through it.

My dog has a food allergy. Is Protocol Raw suitable? Protocol Raw Complete contains beef, chicken, fish, egg, and molluscs (mussel and oyster). If your dog has a confirmed allergy to any of these, this food isn't the right fit for them. We'd rather be honest about that than have you find out after your first box.

What if my vet asks about it? We'd welcome that. Every box includes a QR code linking to the batch report and full ingredient list. Your vet can review the independent lab results and our full nutritional analysis at their own pace.

Why don't other brands test every batch? We can't speak for other brands. We can tell you that independent batch testing costs money, takes time, and means holding stock in a freezer until results clear. It's simpler not to. We chose to do it anyway.

How much freezer space do I need? About one drawer for a medium dog's monthly supply. Trays are flat and stackable.

Questions Removed (v3.0)

Five questions removed to tighten the FAQ: - "Is this safe to handle in a normal kitchen?" (covered by How It Works step 3) - "What if I forget to defrost?" (trivial, not a real blocker) - "Can I pause or change deliveries?" (already stated elsewhere on the page) - "Does the price include delivery?" (already visible in the price slider) - "Can I transition gradually from my current food?" (duplicate of the existing transition question)

Relationship to the Dedicated FAQ Page (/pages/faq)

The 7 questions on the homepage are a deliberately curated subset chosen to handle the most common in-flow blockers without breaking conversion rhythm. The full FAQ corpus lives on the dedicated FAQ page at /pages/faq, which carries 18 questions across 5 categories:

Category Anchor Focus
Safety and testing #faq-safety Independent UKAS testing, Hold-and-Release protocol, batch report access
Nutrition and formulation #faq-nutrition FEDIAF All Life Stages compliance, single-recipe rationale, no-synthetic-additives, puppy suitability
Feeding and transition #faq-feeding Switching from kibble or cooked food, fussy eaters, portion sizing
Delivery and storage #faq-delivery Frozen delivery, freezer space, defrost timing
Pricing and subscriptions #faq-pricing Cost vs comparable fresh brands, pause/cancel, what's in the box

Template: templates/page.faq.json. Section: sections/page-faq.liquid. The page uses a utility-style layout with category nav pills at the top, alternating cream/linen section backgrounds, scroll-triggered reveal per category, and accordion-style question expansion (one open at a time per group). Each category section includes a "Read more" link to a related Journal article where applicable (e.g. Safety → "How to Read Your Batch Safety Report").

The homepage FAQ does not currently link to /pages/faq directly — visitors discover the full FAQ via the global footer or by typing the URL. If the homepage FAQ ever needs to handle a question it doesn't cover, the answer is to add a "See all FAQs →" link below the homepage accordion rather than expanding the homepage list back beyond 7 items.

Design Notes

Background: Warm Linen (#EBE8E3). 7 accordion items with staggered scroll-triggered reveal. Compact bottom padding (8px mobile / 16px tablet / 20px desktop).

The footer is a web component (<protocol-footer-v2>) rendered in layout/theme.liquid outside of <main>. It uses Shadow DOM with encapsulated styles. The source file is assets/protocol-nav-v2.js (deployed via Shopify asset CDN) and also maintained at customer-portal/public/protocol-nav-v2.js (deployed via Cloudflare Pages for the customer portal).

Structure

Column Content
Brand Protocol Raw wordmark + "Proof, not promises." tagline
Protocol Raw About Protocol Raw, Journal, Lab Results
Support FAQ, Contact, My Account, hello@protocolraw.co.uk
Legal Privacy Policy, Terms of Service

© 2026 Protocol Raw is a trading name of True Prey Ltd · Registered in England

Design Notes

Dark Espresso (#2B2523) background. Padding: 40px top / 32px bottom (default), 20px top on mobile (≤600px). Dot-textured watermark at bottom (hidden on mobile).

20. Homepage Waitlist Capture Points (Pre-Launch Only)

When settings.prelaunch_mode is enabled, the homepage has three email capture points at different scroll depths, each serving a different visitor intent:

Section Source Value Background Position Purpose
Waitlist Hero CTA homepage_hero Warm Linen (#EBE8E3) After hero "Already sold" visitors who don't need the full page
Calculator Result calculator_result Cream (#F9F7F4) Inside calculator results Engaged visitors who've completed the calculator
Footer Waitlist homepage_footer Cream (#F9F7F4) After FAQ, before footer Quiet final-chance capture

All call the waitlist-signup Edge Function via the shared waitlist-form snippet.

21. Page-Level Design Summary

Colour Usage

Colour Usage on Homepage
Espresso (#2B2523) Headlines, body text, navigation, Founder Beat background
Burnt Sienna (#B85C3A) CTAs, section labels, subtitle, prices, signature lines, links
Forest Green (#2D5144) Batch report verification badge only
Cream (#F9F7F4) Primary background, calculator background, Waitlist Close background
Warm Linen (#EBE8E3) Trust strip, FAQ background, alternating section backgrounds
Stone (#C4BCB0) Dot-textured accent, FAQ divider lines
Warm Gray (#918A85) Muted meta text
Taupe (#6B6360) Supporting body copy, micro-copy

Typography

Element Specification
Hero headline Montserrat Bold 700, 80px desktop / 44px mobile, Espresso
Section titles Montserrat Bold 700, 40px desktop / 28px mobile, Espresso
Section labels Inter Semibold 600, 12px, Burnt Sienna, uppercase, 0.15em spacing
Body text Inter Regular 400, 18px desktop / 16px mobile, Espresso
Signature lines Montserrat Bold 700, various sizes, Burnt Sienna
CTA buttons Inter Semibold 600, 16-18px

Mobile Spacing Targets

Section transitions target ~48px on mobile. This is achieved through a combination of reduced section padding at smaller breakpoints and compact top/bottom padding on adjacent sections.

22. Demand Throttle Mode

When the demand throttle is enabled in Shopify Customizer (Theme Settings > Demand Throttle), the homepage changes as follows:

Announcement bar: A dark bar appears at the top of every page with two-part copy: bold reassurance for existing subscribers followed by a muted explanation.

Navigation CTA: Changes to the throttle CTA text (default: "Join the Waitlist") and links to the waitlist page.

Hero CTA: Changes to the throttle CTA text and links to the waitlist page.

Calculator section: Redirects to the waitlist page and shows a fallback "Worth the wait." section.

All other sections: Any CTA that links to /pages/calculator is replaced with the waitlist CTA.

Settings controlling this behaviour: - throttle_enabled (checkbox) — master toggle - throttle_announcement_reassure (text) — bold part of announcement bar - throttle_announcement_explain (text) — explanation part - throttle_waitlist_url (text) — default /pages/waitlist - throttle_cta_text (text) — default "Join the Waitlist"

22a. Scroll Animation Reliability (Technical Note, v4.3)

Four homepage sections (outcome-section, the-food, how-it-works, evolution-section) use IntersectionObserver to trigger entrance animations. Elements within each section start at opacity: 0 and only become visible once the section enters the viewport and JavaScript adds the .is-visible class.

Failure mode (pre-v4.3): If JavaScript failed to load, was blocked, or errored before the observer attached, all four sections stayed invisible — visitors saw blank cream space for multiple screen-heights between Hero and Proof. There was no fallback. Reduced-motion users were handled correctly via the existing prefers-reduced-motion media query, but no-JS users were not.

Fix (v4.3): Two changes per section:

  1. <noscript> fallback block added to each section's stylesheet. Forces opacity: 1, transform: none, transition: none, animation: none on all animated elements with !important. If JavaScript does not run, content is visible immediately in its final state.
  2. Lower IntersectionObserver thresholds. threshold reduced from 0.15–0.2 to 0.05; negative rootMargin reduced from -60px/-80px to -40px. Sections now reveal as soon as a sliver enters the viewport, not when 15–20% of the section is visible. This eliminates the perceived "lag" on tall mobile viewports.

The signature-divider and proof-showcase sections were not affected — they use CSS-only animations that fire on load (no IntersectionObserver), so they have always been visible without JavaScript.

Document Relationship
Visual Identity Guide v2.4 Design system, colour palette, spacing and momentum system
Web Design System v1.0 Component patterns, interaction standards
Brand Voice & Copy Guidelines v1.3 Copy principles, terminology standards
Calculator Documentation v7.0 Full calculator specification (RER/MER calculation, purchase flow)
SOP-PROOF-01 v1.0 Proof Portal system (batch report destination)
SOP-WEB-01 v1.0 Social acquisition landing page (/start) specification
Growth Strategy v2.5 Phase A customer acquisition targets

Version History

Version Date Changes
4.4 18 April 2026 Homepage compliance-language reframe (plain-English pass). Follows the Nutrition and Ingredients page headroom reframe. Four targeted edits shift specific lines from regulator-as-reference to dog-as-reference. Trust Strip (§7): "UKAS-ACCREDITED LAB TESTING · FEDIAF ALL LIFE STAGES · DEFRA-APPROVED PRODUCTION" → "Independently lab tested · Complete for every life stage · Produced in a DEFRA-approved facility". CSS text-transform: uppercase on .trust-strip__text removed; source strings rewritten in sentence case so the line now renders as plain-English credentials. "DEFRA-approved" retained as hyphenated UK consumer phrase. The Food closing copy (§10): "Complete for all life stages. No synthetic supplements. One recipe done right beats six done halfway." → "Complete for every life stage. No synthetic additives. One recipe done right beats six done halfway." "synthetic supplements" aligned with the locked vocabulary from the Nutrition and Ingredients pages; "for all life stages" aligned with phrasing used elsewhere on the site. FAQ "Is it nutritionally complete?" (§18): "synthetic vitamins or minerals" → "synthetic additives"; "Independently verified to FEDIAF All Life Stages standards." → "One recipe for every life stage, from puppies through to seniors, independently lab-confirmed." Final "See the full breakdown on our Nutrition page." unchanged. FAQ "What if my vet asks about it?" (§18): "FEDIAF nutritional analysis" → "full nutritional analysis." A vet will recognise the nutritional analysis maps to FEDIAF standards from reading the document; the regulatory qualifier isn't needed in consumer-facing copy. Out of scope (noted for a future pass): The Food bridge line still reads "How do you make a complete food without supplements?" and the contextual aside still references "synthetic supplement" (singular). These are adjacent to but not part of this patch — if rewritten later, vocabulary should converge on "additives" for consistency with the closing copy and the cross-page lock.
4.3 10 April 2026 Hero: launch geography eyebrow removed. The <p class="hero-v4__label">Starting in London.</p> element above the headline was removed entirely. The first thing a visitor now reads is the headline "Feed them well." with no logistical text above it. The launch-geography message has been consolidated into the footer waitlist section where it has the right context. Footer waitlist + shared waitlist snippet: copy reframed. "We're starting in London." → "London first. Then everywhere." Updated in two places: the section label in homepage-footer-waitlist.liquid (visible on the homepage) and the heading in snippets/waitlist-form.liquid (the shared snippet, which propagates the new copy to every place the snippet renders, including the dark Espresso CTA blocks on /pages/ingredients and /pages/nutrition). All styling unchanged. The Food: contextual aside + closing-line reframe. Added a quiet footnote-style line below the ingredient pills: "Organ meats, bone, and shellfish aren't unusual. They're where the nutrients are. Each ingredient replaces a synthetic supplement that other foods add separately." Styled at 14px Taupe at 70% opacity, max-width 640px centred, 16px above pills / 32px below — reads as an aside to the ingredient list, not a competing paragraph. Mirrors the same line on the Ingredients page. Closing copy reframed: "Complete for all life stages. No synthetic supplements. One recipe. Nothing left to figure out." → "Complete for all life stages. No synthetic supplements. One recipe done right beats six done halfway." Last sentence now reframes single-recipe as a quality advantage rather than restating simplicity. The standalone "One food done right beats twenty done halfway." signature line documented in v4.1 was already absent from the live template — doc corrected (subsection removed; the new closing copy now plays that role). Scroll animation reliability fix (§22a): four homepage sections (outcome-section, the-food, how-it-works, evolution-section) had no no-JS fallback for their IntersectionObserver-driven entrance animations — if JS failed to load, content stayed invisible. Added <noscript><style> blocks forcing visible final state, and lowered IntersectionObserver thresholds (0.15–0.2 → 0.05; rootMargin -60px/-80px → -40px) so sections reveal earlier on scroll. FAQ section: dedicated FAQ page documented. Added a new subsection to §18 documenting the relationship between the homepage's curated 7-question FAQ and the dedicated /pages/faq page (18 questions across 5 categories: Safety, Nutrition, Feeding, Delivery, Pricing). Notes that the homepage FAQ is intentionally curated, that the dedicated page exists for visitors who want depth, and that the homepage does not currently link to /pages/faq directly. Documentation also updated: Ingredients v1.3 (organ-meat aside on Composition card), Nutrition v1.3 (FEDIAF context line, evidence table row swap, Ca:P context, analysis link copy).
4.2 5 April 2026 Picky eater positioning pass. FAQ: rewrote third Q&A answer ("What if my dog doesn't take to it?") to lead with formulation-backed confidence instead of generic reassurance. Feeling section: Joy card copy softened from "The bowl just empties." to "Most bowls empty quickly." Calculator: added third reassurance line "Most dogs take to it quickly." below CTA. All changes driven by market research identifying picky eating as the #1 blocking category (25.2% of blocked buyers).
4.1 26 March 2026 Signature Divider: copy changed from "One food done right beats twenty done halfway." to "Some brands cook the food for safety. We test every batch instead, so the food stays raw and the nutrition stays intact." Mobile font size reduced 22px to 18px to accommodate longer text. Container max-width widened 540px to 620px. The Food: "One food done right beats twenty done halfway." added as a new signature line (Burnt Sienna, Montserrat Bold) above the CTAs — relocated from the Signature Divider. Scroll-animated. Calculator "How it works at home": placeholder images replaced with actual product photography (calc-hiw-store.png, calc-hiw-serve.png, calc-hiw-scan.png from Shopify Files CDN). Brand Voice reference updated to v1.4.
4.0 22 March 2026 Phase A emotional-anchor pass. Dog Size Preview: reframed as quick estimate (subtitle, assumptions, note changes); daily pricing as primary display (£X.XX/day in Burnt Sienna), weekly as secondary (£XX/week, muted); removed box info line, "Delivered frozen" label, and veterinary standards confidence signal; CTA changed to "Get Your Exact Plan". The Feeling (was "What Owners Notice"): label changed to THE FEELING; title to "It just works."; subtitle to "Feeding your dog well stops feeling complicated."; cards replaced with emotional anchors (Simplicity, Certainty, Pride, Joy); per-card images removed, single lifestyle image above headline added via Customizer image picker; mobile carousel replaced with stacked grid; signature line to "The difference is how it feels." Waitlist Hero CTA: redesigned from full section to compact inline utility bar; button changed to outlined "Notify me"; label and reassurance text removed. The Food: bridge line added ("How do you make a complete food without supplements? From the ingredients themselves."); ingredients CTA changed to "See where every nutrient comes from →". Global: print styles added to theme layout (beforeprint lazy→eager, print-color-adjust).
3.0 18 March 2026 Homepage tightening pass. Removed hero secondary CTA (batch report link already in Proof section). Moved Founder Beat from position 13 to position 10 (between Proof and Evolution) for deliberate contrast. Reordered: Proof now before Evolution. Merged lifestyle image with calculator flow (removed copy line, tightened spacing to zero gap). Moved reassurance text from Proof section to below calculator. Added prelaunch waitlist capture in calculator results (source: calculator_result). Removed mid-page Waitlist Close section. Added quiet Footer Waitlist section after FAQ (source: homepage_footer). Trimmed FAQ from 12 to 7 questions, reordered. Page now has 15 sections (was 15, but different composition).
2.0 March 2026 Major restructure: removed transparency divider, waitlist mid CTA, and founder statement. Added Founder Beat (dark Espresso, breathing moment) and Waitlist Close (consequence-driven capture, preserves homepage_footer source). Tightened mobile spacing across all sections (~48px gap targets). Fixed FAQ stagger reveal for items 11-12. Updated title tag to "Protocol Raw | Complete Raw Dog Food". Added WebSite JSON-LD schema. Documented footer as web component (Shadow DOM). Updated section flow to reflect current 15-section order.
1.4 March 2026 Added two inline waitlist capture sections. Updated founder CTA source to homepage_footer.
1.3 March 2026 Pre-launch updates: hero label, proof portal links, founder waitlist form.
1.2 March 2026 Added Demand Throttle Mode section.
1.1 February 2026 Added "NOW LAUNCHING IN LONDON" hero label.
1.0 February 2026 Initial release.

Document Owner: Protocol Raw Operations