Building a Custom Checkout That Actually Converts

Northshore Provisions is a specialty food retailer based in Vancouver. They sell curated gift boxes, individual artisan products, and corporate catering packages. They started on Shopify, which worked well enough when it was just gift boxes.

The problems started when they added corporate catering. Shopify's checkout wasn't built for orders where the customer needs to select a delivery date, specify dietary restrictions for 40 people, and add a personalized note, all in the same flow. They were using a combination of three apps to handle this, and the checkout experience was clunky. Customers had to fill out a form on one page, then go to checkout on another page, then get redirected to a third-party scheduling widget. Cart abandonment was running at about 68%.

Their gift box builder had similar issues. They wanted customers to be able to pick individual items to fill a box, see a running total, and preview the box layout. The closest Shopify app they found cost $150/month and still didn't handle variable-weight pricing correctly. Their team was manually adjusting about 30% of orders after they came in to fix pricing errors from the app.

Beyond the checkout, their site speed on mobile was poor. The combination of Shopify's theme, the apps, and the third-party widgets meant pages were loading in about 3.5 seconds. Google's Core Web Vitals scores were in the red across the board.

We built a custom Next.js storefront with a headless commerce backend. The checkout is a single, unified flow regardless of whether the customer is buying a gift box, individual items, or placing a corporate catering order.

The gift box builder is an interactive component where customers drag items into a box graphic, see the price update in real time, and can save their box to come back to later. It handles variable-weight items by pulling current pricing from the inventory system at the moment of checkout rather than relying on cached app data.

For corporate catering, we built a multi-step form that collects delivery details, dietary information, and headcount in a logical sequence. The order summary updates as they go, and the whole thing feeds into their operations dashboard without manual data entry.

Payment processing goes through Stripe, with Apple Pay and Google Pay as options on mobile. We added address autocomplete using Canada Post's API, which cut down on delivery errors and sped up the checkout significantly.

The site itself is statically generated for product listing pages and uses server-side rendering for anything with real-time inventory. Product images are served through an image optimization pipeline that delivers WebP with appropriate sizing for each device.

Revenue per visitor went up 240% in the first quarter. Cart abandonment dropped from 68% to about 34%. The gift box builder alone accounts for about 40% of their online revenue now.

The manual order adjustment problem went away completely. Pricing is accurate because it comes from one source of truth at checkout time instead of being cached in three different apps.

Their first Black Friday on the new platform handled 12x their normal traffic without any issues. The site stayed at 99.99% uptime through the entire holiday weekend. On Shopify the previous year, their site had gone unresponsive for about 45 minutes during peak traffic.

Checkout page load time is 1.2 seconds on mobile. Their Core Web Vitals are green across all metrics. Mobile orders now account for 62% of their revenue, up from 41% on the old site.