Avijit
← Back to work Get in touch ↗

Fen Farm Dairy

A dispatch date picker built around real capacity

Client

Fen Farm Dairy

Store

fenfarmdairy.co.uk ↗

Platform

Shopify, Horizon theme

Role

Shopify Developer

Try it before you read about it

This is the picker's rule set running in your browser. Pick a dispatch date, place a few test orders, and watch a day fill up and close. The storefront is on the left; what happens behind it is on the right.

Cart drawer

Storefront
Order placed on a
Farm shop orderChanging the quantity re-renders the drawer
2
Select Preferred Dispatch Date

Your order will arrive up to 48 hours later.

Select a date

Behind the store

Order pipeline

Dispatch slots

Metaobjects

Orders, as the packing team sees them

A simulation of the build. Slot capacity and order numbers are demo data; the dispatch rules, shopper messages and tag format are the ones running on the store.

The challenge

Fen Farm Dairy is a UK farm selling fresh dairy products online. Fresh food can't sit in a warehouse waiting to ship, so every order has to go out on a day the team can actually pack and dispatch it.

Customers needed to choose their dispatch date before checkout. The dates had to reflect real capacity, meaning a day should close once it's full. The team also needed each order clearly marked with its date so packing could be planned without digging through order notes. On top of that, the store runs a subscription club, so pricing and date logic had to work for both one-off and subscription purchases.


What I built

A date picker in the cart and on product pages

Shoppers can pick a dispatch date from a calendar in the cart or on the product page. The cart version works inside the AJAX cart drawer, which re-renders whenever items change. I used a MutationObserver to watch for those updates and reattach the calendar each time, so the picker never disappears or loses the chosen date.

Fen Farm Dairy cart drawer open over a product page, showing the Select Preferred Dispatch Date calendar for October 2026 with Monday to Thursday dates selectable and Friday to Sunday greyed out
The picker in the live cart drawer. Friday to Sunday and dates inside the lead time are greyed out.

The earliest date on offer depends on the day the order is placed, because dispatch runs Monday to Thursday and the team needs lead time to pack. Pick a row to load it into the demo above.

Order placedEarliest dispatchLead

Shoppers can book up to six weeks ahead.

Slot management that tracks capacity

Each dispatch day is stored as a Shopify Metaobject with its own slot count. When an order comes in, a Shopify webhook calls a Cloudflare Worker, which updates the slot for that day and creates new entries automatically when needed. Once a day fills up, it's no longer offered to shoppers. The team can see and adjust slots from the Shopify admin, with no separate database or server to maintain.

Shopify admin list of Dispatch Slot metaobject entries, one per dispatch date, with columns for dispatch date, booked count and available
Dispatch Slot entries in the Shopify admin: one per day, with its booked count and whether it is still available.
A single Dispatch Slot entry for 6 October 2026 with fields for dispatch date, max slots set to 50, booked count at 24 and available set to true
One day's entry. The team can change the maximum slots or switch a day off by hand.

Automatic order tagging

Shopify Flow tags every order with its dispatch date, so the packing team can filter and plan by day straight from the orders screen.

Shopify Flow workflow with two steps: Order created, then Add order tags, which builds a tag from the word dispatch and the order's Requested Dispatch Date attribute
The Flow workflow: when an order is created, it reads the Requested Dispatch Date attribute and adds a matching tag.
Shopify order page header with the Additional details panel showing Requested Dispatch Date 2026-10-06 The same order's Tags panel showing the tag dispatch-2026-10-06
A real order: the chosen date arrives with the order, and Flow has added the dispatch tag. Customer details are cropped out.

Updated confirmation emails

Order confirmation emails now show the chosen dispatch date, so customers know exactly when to expect their delivery and don't need to contact support to check.

Subscription-aware pricing

The store uses Appstle for its subscription club, which offers members 20% off. I updated the product page so the displayed price changes instantly when a shopper switches between one-off and subscription options. In the cart, I built Liquid logic for member discount display, subscription items, and tag-based exclusions for products that shouldn't be discounted, tested across both live and draft themes.

Illustrative products and prices. The 20% member discount and the tag-based exclusion are how the store behaves.


The result

The dairy now only takes orders it can fulfil. Shoppers pick a real dispatch date in a couple of clicks, full days close on their own, and every order arrives in the admin already tagged for packing. The whole system runs on Shopify's native features plus a lightweight Cloudflare Worker, so there are no extra app fees and nothing heavy to maintain.

Tech used

Shopify Liquid JavaScript Horizon theme Metaobjects Shopify Flow Webhooks Cloudflare Workers MutationObserver Appstle Subscriptions