The challenge
GAIL’s is a British bakery with neighbourhood bakeries across the UK. Online, it sells bread, cakes and boxes for collection from its bakeries and for local delivery, and at seasonal times such as Christmas it ships hampers nationally.
Every online order passes from Shopify through GAIL’s own middleware to the bakeries and the delivery partners who fulfil it. A missing delivery date or a badly formatted phone number can stop an order after the customer has paid. GAIL’s ecommerce team brought us six problems in its Shopify set-up and asked whether there was a better way to handle each one.
Solution
Find the cause, set out the options, then fix what matters most.
We started with a code and UX audit of the Shopify store. We worked through each problem with GAIL’s team and set out options for each one: a quick fix where one existed and a fuller solution where it did not.
Three problems needed more than a quick fix. Customers could start checkout before the 48-hour order cut-off, leave it open and pay after the cut-off had passed, so orders went through with dates the bakeries could no longer meet. Phone numbers sometimes reached Shopify without the country code, which the delivery partner needs to accept an order. And delivery dates stored in custom fields were hard for GAIL’s systems to query and reconcile.
We then built the fixes. A custom checkout extension checks the cut-off against server time, set to London time, at the payment step. If the cut-off has passed, the customer sees a clear message and goes back to choose a new date. We deployed it to a duplicate checkout first so GAIL’s team could test it. New validation requires the plus sign and international dialling code on every phone number. For delivery dates, we recommended tagging orders through Shopify Flow so they can be filtered through Shopify’s GraphQL API.
What we built
The build
- A code and UX audit of the Shopify store, with options for each problem
- A custom checkout extension that enforces the 48-hour cut-off at payment
- Phone number validation that requires the international dialling code
- Recommendations for delivery date tagging, cancelled orders and order flags in Shopify Flow
Technology: Shopify, checkout extensibility and Shopify Flow.
Impact
The result
Orders that miss the cut-off are stopped at checkout, before they reach a bakery with a date it cannot meet, and phone numbers reach the delivery partner in the format it needs. GAIL’s team also has a clear set of options for the problems that remain.
