The Project

Titleys

Smart Apparel Variant System for Perfect Fit

Engineered an intelligent apparel variant management system for custom denim with comprehensive waist and length combinations, dynamic size matrices, and an intuitive size selector that eliminated customer confusion and dramatically reduced returns.

The Problem

The Challenges

01

Colour Range Split Across Products

Each colourway had to be published as its own product to stay within Shopify’s per-product variant limits. A customer landing on one colour had no way of seeing the other thirteen, so a deep range looked far thinner than it actually was.

02

Sizing Locked in Combined Variants

Waist and length were held as a single combined option per variant — 26W32L, 27W32L and so on — leaving one long flat list to scan. Restructuring it in the product data would have meant editing every product and changing how the team works day to day.

03

Colour Filtering at Catalogue Scale

Supplier data carried more than 1,400 distinct colour values across an 1,890-product catalogue. Colour existed as a filter but was not a usable one: hundreds of near-identical named shades meant customers could not narrow the range in any meaningful way.

The Solution

Solutions Delivered

Colourways Linked with Metaobjects

Titleys product page showing 14 colour swatches for one work shirt style, with size tiles below and one size struck through
Every swatch is a separate product. Metaobjects map the colourways to each other so the whole range is browsable from any one of them.

What we built:

  • Each colourway published as its own product, so a style is not held back by Shopify’s per-product variant limits
  • Colourways mapped to one another with metaobjects and rendered as swatches on every sibling product
  • Selecting a swatch takes the customer to that colourway’s own product page
  • Size options kept as variants inside each colourway, with unavailable sizes struck through
  • Shared fit, care and size-chart content maintained once per style rather than per colour

Technical approach:

  • Metaobject definition holding a colour group and its member products
  • Metafield reference on each product pointing back to its colour group
  • Swatch colour and label read from the metaobject rather than hard-coded in the theme
  • Price, stock and size availability resolved per product

Result:

  • The full colour range stays reachable from any product in the style
  • Colour count per style is not capped by variant limits
  • Fit and care content maintained in one place per style

Unified Size Selector

Titleys product page size selector, showing waist and length options as separate tile groups with unavailable lengths crossed out and a low-stock counter
Waist and length as two separate choices, split out of the existing combined variants — no product data re-entry, and no change to how the team works.

What we built:

  • Waist and length split into two separate choices, where sizing had previously been one combined option per variant (26W32L, 27W32L, and so on)
  • The split is derived from the existing variant options, so no product data had to be re-entered
  • Unavailable combinations struck through rather than hidden, so the full range stays visible
  • Remaining stock shown before add-to-bag
  • Size chart opens in a modal beside the selector
  • Selected combination echoed on the add-to-bag button
  • Keyboard navigable, with ARIA labels on every option

Technical approach:

  • Waist and length read from the existing combined variant options at render time
  • Only real waist/length pairs are selectable, resolved from live variant availability
  • One selector component reused across every product template
  • CSS Grid tile layout that reflows on smaller screens

Result:

  • Two short lists in place of one long combined size list
  • No changes needed to product data or day-to-day operations
  • Out-of-stock sizes stay visible instead of disappearing
  • Keyboard and screen-reader accessible

Custom Filter Sidebar

Titleys custom filter sidebar, showing collapsible brand, gender, size and colour groups with 20 colour swatches and a price range slider
The custom filter drawer: 1,400+ supplier colour values consolidated into 20 shoppable swatches, over a 1,890-product catalogue.

What we built:

  • Slide-out filter drawer with live product count
  • Colour filter that maps 1,400+ raw supplier colour values down to 20 shoppable swatches
  • Visual swatch selection instead of a text colour list
  • Dedicated multi-colour swatch for prints and patterns
  • Collapsible groups for brand, gender, size, colour, price and type
  • Price range slider with editable min/max inputs

Technical approach:

  • Colour normalisation map from supplier values to parent swatch groups
  • Filter state held in the URL so results are shareable and bookmarkable
  • AJAX collection filtering with no full page reload
  • Swatches rendered from metafields rather than hard-coded markup

Result:

  • 1,400+ colour values reduced to 20 usable swatches
  • Colour becomes a filter customers can actually use
  • Faster narrowing of a 1,890-product catalogue

Ready To Build Your Custom Solution?

Every business has unique challenges. Let’s discuss how we can build a custom solution for your specific needs.

Contact Our Dev Team

Let Our Team Of Ecommerce Specialists Help You Achieve Elite Digital Experiences & Growth

Contact Us