Build report 001 / E-commerce

Verdant Life

A plant-based nutrition brand in Cape Town with paid traffic that wasn't converting. We audited the live store, found a conversion-system problem, and rebuilt it as a hand-coded, offer-first storefront with a custom cart, Stitch payments and real shipping logic, in an 18-day sprint.

Sector
Plant-based food & nutrition
Engagement
Audit → custom e-commerce build
Stack
Hand-coded HTML / CSS / JS + PHP, WooCommerce bridge, Stitch
Live
verdantlife.co.za
verdantlife.co.za
Verdant Life rebuilt homepage: a benefit-led hero
Build sprint18 daysBrief to live store, May 23 to June 10
Pages13Hand-coded. No theme, no builder.
Bugs tracked22Logged and fixed before launch day
CSS written3,400Lines, responsive, framework-free

The brief

Verdant Life makes quinoa-led, plant-based whole-food nutrition: porridges, baking mixes and pantry staples, made in Cape Town. The product is genuinely good: clean ingredients, real nutritional transparency, and a founder story that lands. Four products from R99 to R139, plus starter bundles at a 20% saving.

But the store was running on a stock theme, and the numbers told a familiar story: paid traffic from Meta was arriving, browsing, and leaving. This wasn't a product problem. It was a conversion-system problem. The site explained the brand, but it didn't remove enough doubt, show enough proof, or make the first purchase obvious enough for a cold, mobile-first visitor.

SED11Q was brought in to diagnose it properly, then rebuild the storefront as a custom site the client fully controls.

01 / The audit

Five questions the site had to answer faster.

We reviewed the homepage, product and collection pages, policies, and the cart and checkout start, plus the technical layer: performance, accessibility, SEO basics, page weight, and tracking. A buyer needs five answers quickly: what is this, is it for me, can I trust it, what should I buy first, and what will it cost me delivered? Those answers existed, just not in a strong enough order.

Critical

Shipping promise was inconsistent

The banner advertised free delivery over R750, while the policy listed different regional thresholds. Doubt at the exact moment a buyer calculates value. A R95 fee on a R99 product killed first orders.

Fix

One shipping promise, repeated across banner, product, cart, policy and checkout, plus a "you're R__ away from free delivery" progress cue.

High

No visible proof near the purchase

Food and wellness products need proof from real customers before a first purchase. The site had policies and a story, but no proof close to the decision.

Fix

A reviews section, customer photos, a founder trust block, and payment / delivery badges placed near the buy moment.

High

Product pages educated more than they closed

The ingredient and nutrition detail was a strength, but the purchase decision wasn't framed early enough.

Fix

Rebuild product pages around benefit, use case, proof, delivery and FAQ, with Add to Cart and price kept in reach.

High

Homepage was brand-first, not offer-first

A Meta visitor needs a clear starting product, not a general shop path they have to interpret.

Fix

Lead with the starter bundle and a hero product, aligned to the ad message, so the first choice is obvious.

Medium

Mobile performance and accessibility

Heavy theme sections, unused script weight, and slow paint times, on traffic that is overwhelmingly mobile and low-patience.

Fix

A lean custom build: compressed WebP media, no theme bloat, clean heading order, contrast and keyboard states.

02 / Before & after

From catalogue to guided sales path.

Verdant Life's previous theme-based homepage Before: stock theme
The rebuilt Verdant Life homepage, offer-first and benefit-led After: SED11Q custom build

03 / What we built

Every section earns its place in the sales path.

01

Offer-first homepage

A benefit-led hero leads straight into the range and a single, obvious first order (the starter bundle at a 20% saving) instead of a brand essay.

02

Custom cart with upsells

A hand-coded localStorage cart with an add-to-cart modal and upsell suggestions, plus a live free-shipping progress indicator that lifts baskets past the R750 threshold.

03

The checkout bridge

A single PHP bridge rebuilds the cart server-side in WooCommerce with validated SKUs, then hands off to Stitch Express payment links, with a webhook callback confirming each order.

04

One honest shipping promise

The Courier Guy nationwide, free over R750, one consistent message repeated on the banner, product pages, cart, policy and checkout.

05

Semantic nutrition tables

Per-100g and per-serving data in proper HTML tables with captions and scoped headers, transparency that's also accessible and indexable.

06

SEO, metadata and WebP pipeline

Benefit-and-category page titles, Schema.org Organization markup, clean descriptions, and a WebP image pipeline for fast mobile paint.

The architecture

The storefront is fully static, hand-coded HTML, CSS and JavaScript served directly, which is why it's fast. The only stateful work happens in one PHP bridge: when a customer checks out, it rebuilds their cart server-side in WooCommerce with allowed SKUs only, then hands them to a Stitch Express payment flow. A webhook callback confirms the order, and the client manages fulfilment from the WooCommerce dashboard she already knows.

That pattern (static front, one narrow dynamic seam) gives the speed of a static site with the order management of a real commerce backend, and nothing else to maintain or patch.

Front endHand-coded HTML, CSS & JS13 pages, ~3,400 lines of CSS, no framework
CartCustom localStorage cartAdd-to-cart modal, upsells, shipping progress
CheckoutPHP bridge → WooCommerce → StitchServer-side cart rebuild, webhook order confirmation
ShippingThe Courier GuyFree over R750, one promise everywhere
HostingVPS: Caddy + PHP-FPMStatic files served directly
ImagesWebP pipelineCropped pack shots, lifestyle photography

04 / The result

Live in eighteen days.

Brief on May 23. Live store June 10. Twenty-two bugs logged and closed through the launch window, tracked in writing, not in someone's head. The client owns the code, the content, and the order pipeline outright.

verdantlife.co.za
Verdant Life rebuilt desktop homepage
Verdant Life rebuilt mobile homepage

Running a store like this on a template?

If your storefront is a theme with your logo on it, this is what the alternative looks like. Send one message and we'll tell you what a rebuild would involve: scope, price, timeline.

See pricing →