Web Design

Lyons Blade

A premium UK knife and EDC retailer. We hand-coded a completely bespoke Shopify theme from scratch, with native commerce and not a template or paid app in sight.

100%

Custom-Coded

0

Paid Apps

0

JS Frameworks

Our Work

A Storefront That Refuses to Look Templated

Lyons Blade is a premium UK retailer of knives and everyday-carry (EDC) gear. They needed a storefront that felt as considered as the products they sell, one that looked and behaved nothing like a templated Shopify store, while still running on the full strength of Shopify's commerce platform.

So we did not adapt an off-the-shelf theme. We hand-coded a completely bespoke Shopify Online Store theme from scratch in Liquid, with a fully custom design and front end, while keeping everything commerce-related native to Shopify: checkout, cart, customer accounts, the merchant theme editor, and metafields for content.

Clean Shot 2026 06 18 at 19.57.33@2x

Bespoke Design, Native Commerce

The whole build followed one rule: the design is ours, the commerce is Shopify's. That gives Lyons Blade a genuinely distinctive shopfront without giving up any of the reliability, security and familiarity of native Shopify checkout and accounts.

The design language is dark and editorial, a deep charcoal background, warm off-white text and a confident brand gold, with Playfair Display serif headings paired against clean DM Sans body text. It feels closer to a premium magazine than a typical product grid.

Clean Shot 2026 06 18 at 19.57.45@2x

Fast by Default

Every page is server-rendered Liquid, delivered as HTML straight from Shopify's CDN. That makes the store fast and naturally SEO-friendly, with no heavy client-side framework to download and run before anything appears.

Clean Shot 2026 06 18 at 19.58.00@2x

The Engineering Under the Hood

The interesting work is in the details. A single shared IntersectionObserver powers every scroll-reveal animation, with directional variants and per-element stagger, and it re-initialises whenever the theme editor reloads a section. Buttons feature an animated SVG border that draws itself on hover, measured per button at runtime so it stays pixel-perfect at any size.

The cart deliberately keeps no client-side state at all. Shopify's servers are the single source of truth, so every interaction re-fetches the cart drawer through Shopify's Section Rendering API and swaps it in place, preserving the open state. Handlers are delegated on the document and driven by a small set of data attributes, so they survive any re-render. A debounced predictive-search overlay, an image-led mega menu, a frosted sticky header and a zoomable product gallery round out the front end.

The Fitted Sheath: A Real Commerce Problem, Solved

The standout piece of engineering solved a genuinely tricky modelling problem without reaching for a paid app. Many knives have an optional matching sheath, but modelling that as a product variant was wrong: each variant carries its own stock, so a single physical knife would show as two units of inventory.

Instead, we modelled each sheath as its own independently-stocked product, then surfaced it on the knife's page as an optional add-on. A custom metafield links a knife to its sheath, so an add-on checkbox appears only when there is a matching sheath in stock, with live price and availability pulled from the linked product. Ticking it adds both items in a single request, with the sheath tagged as fitted to that specific knife.

Clean Shot 2026 06 18 at 20.00.33@2x

In the slide-out cart, the sheath is not shown as a separate line. It renders as a compact add-on row nested under its knife, so the basket stays clean while both items keep their correct, separate inventory. The helper sheath products are hidden everywhere across the storefront via a single tag, kept out of search, collections and their own URL, so they can be bought as add-ons but never stumbled upon. Correct stock on both items, per-knife pricing, no third-party app, and fully controllable from the theme editor.

Built Around the Merchant

For all the custom engineering, the store is built to be run by Lyons Blade, not by us. Product specifications render automatically into a tidy spec table from metafields, alongside touches like a pre-owned condition meter and a UK safe-carry legal badge. Sections expose proper settings so the team can edit copy, toggles and content from the theme editor, and our deploys are file-scoped and non-destructive, so shipping code never overwrites the content they own. Change a single design token and the whole site updates in step.

Bespoke, Without the Compromises

The result is a storefront that looks and feels hand-crafted, because it is, yet runs on rock-solid native Shopify commerce. It is fast, SEO-friendly, fully editable by the client, and free of the app sprawl that slows so many Shopify stores down. Exactly the premium, distinctive shop Lyons Blade set out to build.

Clean Shot 2026 06 18 at 19.58.07@2x

I stumbled across CreateTheWeb whilst looking for a website design company and boy do I feel lucky! Otis has been a fantastic support throughout the whole process of creating my website and I couldn't be happier. The entire process has been very clear all the way through and they even have a customer portal keeps you up to date with progress as and when things are completed. Nothing is too much trouble for them, even when I was asking for things to be changed it was done without complaint and in a very efficient manor. I couldn't recommend them enough to be honest. Thanks to Otis and the team for everything.
Matt Lyons, Managing Director
Otis
Luke
Excellent·Trustpilot

Ready to Start Your Growth?

Get in touch with our team today and discover how we can help your business grow with our comprehensive digital marketing services.