G Johns & Sons is a specialist architectural ironmongery supplier, serving architects, contractors and trade professionals across the UK with an extensive catalogue of door furniture, cabinet hardware, window fittings and security products, including fire-rated, DDA-compliant and heritage-specification lines.
G Johns & Sons had outgrown their Magento 2 storefront. Maintenance overhead, hosting complexity and escalating total cost of ownership were diverting resource away from growth.
Meanwhile their trade customers — architects and contractors working to tight project deadlines — needed a faster way to browse specification
A single door handle listing spans six or more finish variants, each with unique dimensions, fire ratings and fixings. Shopify has no native equivalent for Magento's grouped products.
15–20+ attributes per product inherited from Magento's EAV catalogue — dimensions, base material, spindle size, fire rating, fixings. All of it had to stay filterable and printable.
Trade account applications, architectural drawing uploads up to 35 MB (DWG, PDF, XLSX) and departmental email routing — none of it possible with Shopify's native forms.
Years of established ranking across architectural hardware long-tail terms. A careless migration would have undone all of it.
B2 Agency was engaged to deliver a migration that would not only reach feature parity with Magento 2, but decisively surpass it — faster, more maintainable and commercially scalable on Shopify Plus.
Client compositions set the visual frame. B2's R&D resolved everything they left open: interaction states, the merchandising layer, and how a product page behaves when a specialist item carries fifteen variants and a technical drawing set.
A Brand System Built Three Ways
One system, defined once and expressed identically across a vanilla HTML prototype, a Tailwind mockup and the production Liquid theme. Every token had to hold in all three.
Every Component Solves a Friction Point
Each pattern targets a specific point of friction in selling specialist ironmongery online. The prototypes carry their persuasion principle in the markup — the cross-sell block's eyebrow reads Reciprocity · Higher AOV — so the reasoning is documented in the code itself.
42 screenshot captures document the design evolution. Superseded versions were kept alongside the finals, so the client could see exactly what was explored and why the final direction won.
Reduced-motion respected properly — the scroll-reveal system skips animation entirely, falls back where IntersectionObserver is unavailable, and carries a safety timeout so content is never stranded invisible.
No off-the-shelf theme. Every component was architected around how specifiers actually buy: on dimensions, finishes, fire ratings and trade terms.
Shopify's native variant system caps at three options and 100 combinations. G Johns' grouped catalogue — one product, many finishes, each with its own specification set — does not fit inside that ceiling.
A custom grouped-product system on Shopify metafields with a reactive front end: selecting a finish swaps price, specification table, drawings and stock without a page load. Magento parity, without Magento.
Cloudflare Workers replace Shopify's native forms: trade applications, 35 MB drawing uploads and departmental routing, with bot protection that never blocks a genuine trade customer.
15–20+ Magento attributes carried across intact, rendered as a filterable accordion and a print-ready data sheet.
A global inc/ex VAT toggle applied site-wide, alongside multi-buy tiers priced for projects bought in volume.
Redirect mapping and metadata carried across so years of long-tail architectural hardware authority survived the platform change.
The migration didn't just match the old platform, it decisively beat it. Lighthouse performance monitoring, comparing the Magento 2 baseline against the new Shopify Plus build, shows the scale of the shift in real, measured terms rather than estimates.
Page speed was the headline gain. Largest Contentful Paint dropped by 70.3% and Total Blocking Time by 77.8%, translating directly into a faster, more responsive experience for architects and contractors browsing technical specifications under project deadlines.
Beyond speed, the migration removed Magento 2's hosting and patching overhead, activated a digital trade portal for the first time, and kept the grouped-product catalogue structure trade customers already knew intact.
70.3%
Faster Largest Contentful Paint
vs Magento 2 baseline
77.8%
Lower Total Blocking Time
Interaction readiness
84.1%
Lighter JavaScript payload
Shipped to the browser
60%
Improved Time to Interactive
Speed Index improved in step
Sessions and revenue reporting is reserved until the site has three to six months of post-launch data. Measurement window: Q1 '27 vs Q1 '26.
DCO
Simplifying complex decorating purchases online
ISO27001:2022 Certified Information Security Management System
Copyright 2026 © B2 Agency Limited - All Rights Reserved. Company Registration Number: 14668246.
