Case study

A four-level mega-menu and mobile drawer for a 40-year Montreal cutting tool distributor.

K.G. Grinding is a Montreal industrial cutting tool distributor with a catalog that needs four navigable levels (product family, tool type, flute count, brand). Shopify natively supports two. Muscled designed the bilingual EN/FR storefront in Figma and built a custom mega-menu snippet plus a section-block schema layer that delivers four live levels on desktop and mobile, with the editor controlling depth without code.

View live store Jump to outcomes
By the numbers

The numbers speak for themselves

Vault-backed numbers. No presentation-grade estimates. Each one is reconcilable to the founder's own reporting.

Navigation depth on a spec-driven B2B catalog
4 levels

Shopify natively supports two navigation levels through the standard mega-menu. The K.G. Grinding catalog needed four (product family, tool type, flute count, brand). The build delivers four full levels on both desktop flyout and mobile drawer, with the schema already wired for two more if the catalog deepens.

SRC: Live theme code (D7-Mega-Menu.liquid + header-group.json), 2026-03-20

Live navigation blocks managed in the theme editor
45 blocks

The deepest levels are managed as section blocks. The store admin adds a new brand or a new tool type by adding a block in the Shopify theme editor and typing in the parent-title key and a URL. No code change required. The live header configuration runs on 45 blocks across cutting tool families.

SRC: header-group.json (May 2026 commit), 2026-03-20

Distributor tenure brought online
40+ years

K.G. Grinding has run as a Montreal cutting-tool distributor and tool reconditioning shop for more than four decades, supplying aerospace, manufacturing, automotive, and tool-and-die industries. The Muscled engagement put that catalog into a bilingual EN/FR Shopify storefront sized for a spec-driven B2B audience.

SRC: Client about + vault notes, 2026-03-20

K.G. Grinding monthly revenue

Post-rebuild growth
Desktop & Mobile

The full homepage, shown two ways

Two side-by-side screenshots of the long homepage. Hover the desktop card to slowly scroll the screenshot top to bottom, so visitors see the entire page without leaving this one.

  • Desktop · full homepage after rebuild
    4 levels
    Navigation depth on a spec-driven B2B catalog
    /mo at peak
  • Mobile-first after rebuild
    Mobile traffic share
    Engagement length
The work

How the engagement unfolded

  1. Catalog audit, Figma direction, bilingual scope

    Q3 2024

    Audited the K.G. Grinding catalog tree (end mills, drills, taps and dies, inserts, countersinks, holders) and confirmed the depth requirement: product family, tool type, flute count, brand. Set bilingual EN/FR scope from the start. Took on the Shopify theme design in Figma with the four-level navigation as the load-bearing pattern.

    • Catalog audit
    • Bilingual EN/FR
    • Spec-driven B2B
    • Figma direction

  2. Desktop snippet build (D7-Mega-Menu.liquid)

    Q4 2024

    Built the D7-Mega-Menu.liquid snippet end-to-end (28,041 characters). Levels 1 through 3 use the native Shopify linklist iteration (link.links and subLink.links). Level 4 uses a section-block lookup, matching blocks to their parent by title key at render time. Pure CSS hover handles the flyout transitions. JavaScript on the panel only measures the deepest sub-tree and assigns a width per panel so four-level columns fit across the viewport.

    • D7-Mega-Menu.liquid
    • Native linklist levels 1-3
    • Section-block level 4
    • CSS hover flyout
    • Dynamic panel width

  3. Three-block schema in sections/header.liquid

    Q4 2024

    Added three block type definitions to the header section schema: sublink for level 3 to level 4 extension, additional-child-2 for level 4 to level 5, and additional-child-3 for level 5 to level 6. Each block stores a parent-title match key plus the item's own title and URL. The K.G. Grinding store uses 4 levels actively; the schema already supports up to 6.

    Result: adding a new brand under a flute count, or splitting a category one level deeper, is a theme-editor operation. The store operator does not need a developer to extend navigation. 45 live blocks at the time of last commit.

    • sublink block
    • additional-child-2
    • additional-child-3
    • Parent-title match key
    • Editor-managed depth

  4. Mobile drawer parity + metafield breadcrumb + collection landing

    Q1 2025

    Built header-drawer.liquid (31,637 characters) so mobile gets the same four levels as desktop: each tier is a full-width slide-in panel with a back arrow and a Shop All link at the top. Touch-native, CSS-transition based, no modal hijack.

    Added d7-custom-breadcrumb.liquid driven by a product metafield (custom.breadcrumb, list of collection_url + collection_title objects), so product pages show the full intended catalog path rather than Shopify's first-collection-found default. Added custom-collection-list-d9.liquid for visual collection landing cards at level 2.

    • Mobile drawer parity
    • Slide-in panels with back button
    • Metafield breadcrumb
    • Custom collection landing cards
Project overview

What we built

K.G. Grinding Inc. is a Montreal industrial cutting tool distributor and tool reconditioning shop, operating for more than 40 years and serving aerospace, manufacturing, automotive, and tool-and-die industries. Their catalog covers end mills, drills, taps and dies, precision tools, rotary tooling, inserts, countersinks, collet chucks, and holders across brands like Niagara, Sowa, Seco, Dormer/Pramet, and M.A Ford. The store is bilingual (English and French).

Muscled designed the storefront in Figma and built the Shopify theme end-to-end. The defining technical achievement is a custom multi-level mega-menu and navigation architecture: four navigable levels on both desktop and mobile, with the third and fourth levels editor-managed via section blocks. This is the flagship Muscled implementation of multi-level navigation, now a reusable capability for any high-SKU B2B or industrial catalog client.

In their own words

(Testimonial TBD. Vault contact is TBD; permission to publish is open. No post-launch metrics captured in vault.)

K.G. Grinding Inc. is a Montreal industrial cutting tool distributor and reconditioning shop, 40+ years in business, supplying aerospace, manufacturing, automotive, and tool-and-die industries. The Shopify storefront is bilingual EN/FR. Phone 514-323-0192.

K.G. Grinding teamDistributor operator
The challenge

What was holding them back?

Shopify's standard mega-menu stops at two levels. K.G. Grinding's catalog needs four. A buyer comparing a 2FL Carbide Endmill from Niagara against the Sowa equivalent should be able to drill from product family to flute count to brand in one navigation flow on desktop and on mobile. On top of depth, the breadcrumb on product pages had to follow the intended canonical path (product family, tool type, flute count, brand) rather than Shopify's first-collection-found default.

  1. 01

    Shopify mega-menu native ceiling is two levels

    The standard Shopify mega-menu snippet handles a parent linklist and one row of children. After that it stops. For a spec-driven catalog where buyers drill from product family to tool type to flute count to brand, two levels is a hard stop. Every standard Shopify theme hits the same ceiling.

  2. 02

    Industrial cutting tool catalog needs four navigable levels

    Endmills splits into Carbide Endmill, Cobalt Endmill, and Inserts. Carbide Endmill splits into 2FL, 3FL, and 4FL. Each flute count splits into brands (Niagara, Sowa, Seco, Dormer/Pramet, M.A Ford). Buyers expect to navigate by these specifications. A flat or two-level menu would force them onto an internal search the catalog is not built to support.

  3. 03

    Mobile usually sacrifices catalog depth and becomes the conversion hole

    Most theme builds drop the deepest navigation levels on mobile or collapse them into a single long accordion. For a B2B buyer doing field research on a phone before placing a shop order, that breaks the buying path. The mobile experience had to carry the full four-level hierarchy without becoming a wall of links.

  4. 04

    Product breadcrumb defaults expose the wrong catalog path

    When a product belongs to several collections, Shopify picks the first one it finds for the breadcrumb. For a catalog where each product has a canonical path (product family / tool type / flute count / brand) and several incidental ones, that picks the wrong path more often than not. The breadcrumb had to reflect the intended chain, not whichever collection happened to be first.

Before / After

Before and after

Before

After

Funnel collapse: we removed a full page from the path to purchase.

Solutions

What we built to fix it

Each fix maps to a specific lift in the funnel.

  • Custom D7-Mega-Menu.liquid snippet with hybrid linklist plus section-block hierarchy

    A single snippet (28,041 characters) renders the full four-level mega menu. Levels 1-3 iterate Shopify linklist children and grandchildren. Level 4 is populated from section blocks. The snippet checks each level-3 item for matching blocks and conditionally adds aria-haspopup plus a fourth-level list. Flyout is pure CSS via sibling combinators. Panel width is auto-computed from the deepest sub-tree at render time.

  • Three block types in the header schema for editor-managed depth

    Added sublink, additional-child-2, and additional-child-3 block types to sections/header.liquid schema. Each block stores a parent-title key, item title, and URL. Adding a new brand under a flute count, or splitting a category one level deeper, is a theme-editor operation. The schema already supports six levels of depth, even though the live store uses four. 45 active blocks at last commit.

  • Mobile drawer (header-drawer.liquid) with four-level slide-in parity

    Mobile uses a full-width drawer (31,637 characters of liquid). Each tier slides in as a new panel with a left-arrow back button and a Shop All link pinned at the top. The same section-block matching logic that drives desktop level 4 also drives mobile level 4 and level 5. CSS transitions handle the panel motion. No modal hijack.

  • Metafield-driven breadcrumb plus visual collection landing cards

    Defined a product metafield (custom.breadcrumb, list of objects with collection_url and collection_title). The d7-custom-breadcrumb.liquid snippet walks that list and renders the intended canonical path: Home, then each parent collection, then product. Added custom-collection-list-d9.liquid for visual collection landing pages at level 2 (image cards with title, subheading overlay, hover-reveal Shop All) and custom-main-collection-product-grid.liquid for leaf-level pages with vertical faceted filtering.

The stack

What it was built on

Tools picked for the job, not for the resume.

  • Shopify
    Platform
  • Liquid
    Templating
  • Shopify linklists
    Native navigation levels 1-3
  • Section block schema
    Editor-managed depth (levels 4-6)
  • CSS sibling-combinator flyout
    Desktop hover panels
  • Product metafield breadcrumb
    Canonical catalog path
  • Figma
    Theme design
How we engineer performance

Speed is a revenue lever, not a vanity score

Every Muscled build is engineered to the same standard. The numbers below are the published industry benchmarks we design against, not stand-ins for any one client's figures.

conversions per 0.1s of load-time improvement on ecommerce sites.

+8.4%

SRC: DELOITTE / GOOGLE

conversion rate for stores loading under 2s, vs the ~1.4% Shopify average.

2.4%

SRC: SHOPIFY PERFORMANCE DATA

conversion lift per 1s of mobile load-time gained, where 90% of traffic lives.

+10-20%

SRC: SHOPIFY MOBILE BENCHMARKS

// OUR PERFORMANCE GATE we don't ship unless field Core Web Vitals hold: LCP ≤ 2.5s · INP ≤ 200ms · CLS < 0.1 (p75, mobile)

Capability surface

The techniques behind a build like this

Four-level mega-menu architecture

  • 4 navigable levels
  • D7-Mega-Menu.liquid
  • Schema supports 6 levels
  • Native linklist levels 1-3
  • Section-block level 4
  • Parent-title match key
  • CSS sibling-combinator flyout
  • Dynamic panel width at render time
  • Spec-driven B2B catalog

Editor-managed depth via section blocks

  • sublink block
  • additional-child-2
  • additional-child-3
  • 45 live blocks in production
  • Parent-title disambiguation
  • No code change to add brands
  • No code change to add categories
  • Schema already wired for level 5 and 6

Mobile drawer with four-level parity

  • header-drawer.liquid
  • Full slide-in panel per level
  • Back button + Shop All
  • Same block-matching logic as desktop
  • CSS-transition based
  • No modal hijack
  • Touch-native sequencing
  • Bilingual EN/FR support

Catalog landing + canonical-path breadcrumb

  • custom.breadcrumb metafield
  • d7-custom-breadcrumb.liquid
  • Collection landing cards
  • List of collection_url + collection_title objects
  • Renders intended canonical path
  • Per-product control of breadcrumb chain
  • custom-collection-list-d9.liquid landing cards
  • Vertical faceted filtering on leaf collections
Storefronts

One build. Multiple markets.

Same theme code across markets, with localized pricing, currency, and region-specific content routed automatically.

  • Canada

    Bilingual EN/FR Shopify storefront / Montreal industrial cutting tool distributor
    • Shopify
    • Bilingual EN/FR
    • 4-level mega menu
    • Mobile drawer parity
    • Metafield breadcrumb
    • Spec-driven B2B catalog
    • 45 navigation blocks
    Canada screenshot
    Served from the same Shopify Markets build. Dedicated capture not included.
Full build · sections

Every section, built mobile-first

The full build is many numbered sections, each designed for the phone first. The rail below shows a sample. Scroll horizontally to step through.

The results

What the work delivered

Each number is reconcilable to the founder's own reporting.

Navigation depth on a spec-driven B2B catalog
4 levels

Shopify natively supports two navigation levels through the standard mega-menu. The K.G. Grinding catalog needed four (product family, tool type, flute count, brand). The build delivers four full levels on both desktop flyout and mobile drawer, with the schema already wired for two more if the catalog deepens.

SRC: Live theme code (D7-Mega-Menu.liquid + header-group.json), 2026-03-20

Live navigation blocks managed in the theme editor
45 blocks

The deepest levels are managed as section blocks. The store admin adds a new brand or a new tool type by adding a block in the Shopify theme editor and typing in the parent-title key and a URL. No code change required. The live header configuration runs on 45 blocks across cutting tool families.

SRC: header-group.json (May 2026 commit), 2026-03-20

Distributor tenure brought online
40+ years

K.G. Grinding has run as a Montreal cutting-tool distributor and tool reconditioning shop for more than four decades, supplying aerospace, manufacturing, automotive, and tool-and-die industries. The Muscled engagement put that catalog into a bilingual EN/FR Shopify storefront sized for a spec-driven B2B audience.

SRC: Client about + vault notes, 2026-03-20

Ready to ship yours?

Let's talk about what you want to ship.

A full Shopify theme build for a 40-year Montreal cutting tool distributor. Bilingual EN/FR storefront. The flagship Muscled implementation of multi-level navigation: four navigable levels on desktop and mobile, 45 editor-managed blocks at the deepest tiers, metafield-driven breadcrumbs, and custom collection landing pages. The system is content-editor-native once installed and reusable on any high-SKU B2B or industrial catalog that outgrows the standard two-level Shopify mega menu.

Book a free store audit View all case studies
30 minutes. No deck.