Filtering every product by machine fit, inside Shopify's limits

Attachments King · 2025 · Shopify Liquid, Shopify metaobjects and metafields, JavaScript modules, Event bus and reducer, IndexedDB, Checkout UI extensions · Sole Developer

Problem

A shopper picks their machine once and expects to see only what fits it. Shopify’s collection pages filter on fields known ahead of time, so they cannot filter the whole catalog by per-machine fit across more than 5,000 machine configurations. Sending the full fitment data to the browser would be large, and it would give the data away.

First principles

The browser does not need the fitment data. For one chosen machine it needs a yes or no per product: set membership. A Bloom filter answers membership in a few kilobytes and never gives a false “no”. Sized for a one-in-a-million false-positive rate over sets of at most 5,000 machines, a false “yes” is very unlikely, and the fulfillment team sees the machine on every order, so it catches the rare one before shipping.

Approach

Machines live in Shopify as metaobjects. For each product, a pipeline hashes the GIDs of the machines it fits into a Bloom filter, sizes it for the one-in-a-million rate, and writes it to a product metafield. In the theme:

  • a minified Bloom library decodes each product’s filter in the browser and tests the chosen machine’s GID;
  • an event bus feeds one reducer that holds the collection state, so filtering and sorting run as pure functions over the whole set, not just the loaded page;
  • sorting adds fastest delivery and highest rated, and filtering adds in-stock availability;
  • IndexedDB caches product data and refreshes only the products that changed;
  • the chosen machine persists across sessions, shows as fit badges on product cards and pages, and carries through the cart to checkout, so it appears on the order.
The shopper's flow: choose a machine, see fit on every product, filter to what fits, and check out with the machine on the order.

Skills I taught myself

  • Shopify theme architecture: Liquid, metaobjects, metafields and checkout UI extensions.
  • Bloom filters: sizing bits and hash counts from the set size and the error rate.
  • Event-driven front-end state: an event bus, commands and one reducer.
  • Client-side caching with IndexedDB.

Result

In the first month after launch, online-store sales at Attachments King rose 99%, to $245K, while draft orders placed by the sales team fell 42%.

Shopify analytics for November 2025 against October 2025: online-store sales $245K, up 99%