BFC

Problem

Shopify's built-in filter could not tell the shopper whether a variant was in stock, available as a pre-order or sold out. The same shoe in different colours was a separate product, so shoppers could not jump between colours. The store also needed a new landing page and a faster homepage.

Solution

I wrote a Node.js app that reads every variant and stores Available, Preorder or Sold out in a metafield, and updates it when stock changes. The collection filter uses that metafield, is preselected on arrival and shows a message explaining it. I linked products of different colours through a metaobject group, showing swatches on the product page. I also built the new landing page with a gift selection popup, custom product badges and speed work on the homepage.

Key decisions

1. 01

   Chose a metafield filled by an app over Shopify's native availability filter

   Why The native filter has no pre-order state, and the store needed to show pre-orders separately from sold-out items.

2. 02

   Chose metaobject groups for colour variants

   Why Each colour keeps its own product page and images, yet shoppers can switch between them with swatches.

3. 03

   Chose to remember the shopper's filter choice per page

   Why The filter starts on, but if a shopper turns it off it stays off while they browse.

Results

• Collections can be filtered by Available, with an explanatory message set in theme settings.
• An inventory app updates variant availability for the whole catalogue and on stock changes.
• Products in different colours are linked with swatches on the product page.
• A new landing page, custom product badges and a custom header with extra languages were delivered.