Partake Foods

Partake Foods sells top-nine-allergen-free cookies, grahams and wafers direct to shoppers, and routes everyone else to the grocery shelves that stock them.

What they came with

A brand whose whole promise is an absence has to prove that absence on every page, in wording a food-safety team and a worried parent will both accept. Most of the volume does not come through the cart either: the boxes sit on grocery shelves, so the site has to sell the product and then hand the shopper to a shop near them. The catalogue cannot be cut by diet, because every product is already free of the same nine allergens, which makes the claim a standing line above the grid rather than a filter inside it. And the ingredient and nutrition copy moves with every reformulation and every regulatory change, which puts the people who own that text outside the development team.

What the build had to do

Catalogue split by format, not diet

Six pills run across the collection pages — full lineup, cookies, mini cookies, grahams, vanilla wafers, teeny tiny — because the allergen claim is a constant rather than a facet. Each pill is a sibling collection page, not a query string, so a new format is a menu entry; the rail also stashes the scroll position in sessionStorage before it navigates, so moving between formats does not throw the shopper back to the top of the page.

Ingredient and nutrition text as metafields

Description, ingredients, the nutrition panel and the certification icons sit in per-product metafields and render into four collapsible rows below add-to-cart. The nutrition row is ordinary rich text that the theme styles into a label layout, so a food-safety editor types servings, values and percentages as paragraphs and the panel comes out reading like a panel.

Store locator wired to the catalogue

The find-us page hosts a third-party where-to-buy map as a theme section, with tabs for finding a store and for buying online, and a product finder that narrows the map to chosen items. Each product carries the locator's own product id, so the product page links through as ?wbprod=… and the finder arrives already reporting one item selected rather than asking the shopper to pick the box again.

Two ways to buy on one page

Below add-to-cart the product page offers a marketplace button and a find-near-you button, both resolved per product — the classic grahams link to a Target listing, the soft baked chocolate chip to a Publix one. Not every product has a marketplace listing, and the teeny tiny snack packs prove it, so the block renders conditionally instead of leaving a button that goes nowhere.

Scroll scene authored as editable positions

In the pinned cookie scene the claim badges are not baked into the artwork. Each carries its own percentage coordinates, rotation and separate desktop and mobile sizes on the element, and the section emits its own scoped style block, so the composition of the scene is rearranged in the theme editor without reopening the Liquid.

Allergen FAQ grouped and anchored

The FAQ is an anchor rail over three collapsible groups: facility and cross-contact, what is in the food, and storage. These are the questions that decide a first order, so the facility answers — shared lines, suppliers, coconut, corn, oats — are each their own addressable block rather than a paragraph buried in a page of prose.

Technical detail

One clipped shape, reused at every size

The theme declares a single SVG clipPath once per document with clipPathUnits set to objectBoundingBox, normalising a hand-drawn path into 0–1 space with a scale transform, then references it from pills, buttons and cards — twenty-six times on a product page. Because a box-shadow on a clipped element would still draw a rectangle, the offset shadow under each button is a second clipped element behind it, moved on hover by transform rather than by repainting a shadow. The trade-off is accepted deliberately: the shape stretches with the box it is applied to, and in exchange one path serves every control on the site.

Pinned GSAP timeline with a settle guard

The cookie scene pins a sticky 150vh wrapper through ScrollTrigger with scrub set to 2 and pin spacing off, starting each cookie and crumb 45vh above the viewport. A scrubbed timeline can be left mid-flight by a fast scroll or a resize, so the trigger's onComplete re-sets every cookie, crumb and badge to its final top and left with overwrite auto, and each badge falls back to dead centre if an editor leaves a coordinate blank. A matchMedia check shifts the whole composition down on narrow screens rather than authoring a second animation.

Where-to-buy kept behind one boundary

The locator is a div carrying four data attributes and a deferred script; the script injects the map and product-finder iframes and forwards the parent page's own query string into them, so the join between catalogue and locator is a single id travelling in a URL rather than an API call the storefront has to keep alive. The iframe is given its height and its corner radius by the section's own CSS and asks for geolocation through an allow attribute. If the embed does not load, the heading, the product carousel and every other section still render, and the product pages still take orders.

Pack sizes as one product, not several

Six-box and twelve-box are variants of one product under a Size option, emitted as ProductGroup JSON-LD with a nested Product and Offer per variant, while single-pack items emit a plain Product instead. That keeps one URL, one set of metafields and one nutrition panel per recipe, so a reformulation is edited once rather than once per pack size, and search engines see the sizes as one item with two offers.