Pip & Nut

Every build starts with a design system. For Pip & Nut, that meant translating an evolved brand identity into a full Shopify 2.0 digital design system – typography, colour, components, and UI rules – before a single template was built.

The system is built around the brand’s core palette: deep brown, warm white, and a set of flavour-driven accent colours that map to product categories. Saturated and Rogliano typefaces carry the brand’s character across every touchpoint. Every component was designed to work across the full range of page types – from high-energy homepage modules to quieter editorial layouts – without losing coherence.

The result is a site that feels like one thing. Not a set of pages, but a considered digital product.

The old site had done its job for years. But the product range had grown, the brand had evolved, and the D2C channel was being asked to carry more weight. The new site needed to handle a more complex catalogue – nut butters in multiple flavours and sizes, snack bars, protein bars, cups — without making the shopping experience feel complicated.

Tribe built a full Shopify 2.0 theme from scratch, starting mobile-first. Every template was built to flex: the PDP supports variant-level metafields so flavour and size selectors update independently, nutrition information surfaces per variant, and Bazaarvoice reviews are integrated at product level.

The homepage leads with energy and product confidence. Secondary pages – Ingredients, Careers, Sustainability, Recipes, FAQs – were all built custom within the same system, each with their own interactive moments. The Ingredients page features a clickable nut selector that updates the information panel in real time. A modular layout system means Pip & Nut’s team can build and update pages without developer involvement.

The bundle builder was the most technically demanding part of the project. Pip & Nut sells across two distinct purchase types — one-time purchase bundles and subscription bundles – with different discount structures for each. Getting those experiences to feel simple for the shopper, while handling the underlying logic correctly, took significant development effort.

The OTP builder uses spend-threshold messaging that updates dynamically as items are added – unlocking 10% at £60, 15% at £80. The subscription builder mirrors the structure but applies a flat 20% saving with a £15 minimum spend, and carries its own progress bar and threshold states.

Both builders feed into a custom cart with inline upsell from OTP to subscription, spend-based messaging, and a free gift toggle the client can switch on and off without code changes.

The product catalogue had grown considerably since the original site was built. Consolidating variants into a cleaner, more intuitive structure was a core part of the brief – fewer dead ends, faster path to purchase, and product information that updates meaningfully when a customer switches flavour or size.

The PDP supports variant-level metafields throughout: the product name, description, nutritional information, and imagery all update per variant selection. Adding a peanut butter to the cart opens a slide-out cart with an inline upsell prompt – directing the customer into the bundle builder to increase their basket value before checkout.

Pip & Nut had active subscribers on Recharge when the project kicked off. The migration to Skio ran alongside the site build.

Skio was chosen for its customer-facing portal experience and its native bundle subscription functionality, which maps directly to how Pip & Nut’s subscription products are structured. Cancellation flows, subscription intervention logic, and the customer account portal were all aligned to the new site’s design before go-live – so the retention engine launched ready to work from day one.

The Klaviyo lifecycle was designed, written, and built in parallel with the site. Seven core flows – Welcome, Browse Abandonment, Cart Abandonment, Checkout Abandonment, Post-Purchase, Winback, and Sunset – totalling 26 emails – were delivered as part of the project scope.

The email design system was built to match the new site’s visual language: the brand’s warm palette, Saturated and Rogliano type, and the brand’s illustration style carried through from site to inbox. Each flow was designed and written by Tribe before being built in Klaviyo’s editor, giving Pip & Nut a fully configured lifecycle from launch day.