Project portfolio Browse selected work

Shopify Plus: up to US$4,800 development credit

Coffee equipment

TIMEMORE

TIMEMORE's specialist coffee store organizes grinders, burrs, speed, grind range and complete equipment around brew method so specifications genuinely support selection.

Visit the live project
TIMEMORE Sculptor electric coffee grinder
Official public brand visual

Core implementation review

Three storefront journeys from model choice to purchase

TIMEMORE sells electric and manual grinders, brewing scales, kettles and preparation tools to people who shop by burr as well as by brew method. The work is to keep series membership, comparable specifications, variant inventory and complementary gear in one Shopify product model, instead of parking RPM and grind range on posters that never change what enters the cart.

Project context

Define how customers choose before defining the storefront

Buying decision

Customers enter through grinder, scale, kettle, brewer or brew method, then compare Sculptor 064 or 078, Chestnut, Basic and Fish ranges by burr, steps, RPM, capacity and colour. Reviews, preorder, kits and wholesale complete purchase.

Delivery boundary

Shopify frontend, coffee-equipment taxonomy, technical PDPs, model variants and accessory merchandising.

01Brew-first entry

Reach the right grinder family from pour-over or espresso

Shoppers choose a brew method or tool family first, then enter Sculptor, Chestnut or another series, instead of decoding similar SKUs in one undifferentiated list.

  1. 01Enter by grinder, scale, kettle or brew method
  2. 02Open electric, manual or best-seller series
  3. 03Narrow to a model through search
  4. 04Land on the matching product, not a mixed SKU list

Implementation

  • Electric grinders, manual grinders, scales, kettles and brew accessories live in separate families, so the first buying job is choosing how you brew.
  • Sculptor stays a series, with a model such as 078SSP as a child product, so comparison does not flatten generations into unrelated items.
  • When someone types Sculptor, Chestnut or a brew method, the Predictive Search API returns collection and product suggestions that point into the right range before a long mixed list.

Deployment and acceptance

  • Collection templates carry best-seller and category routing, so a new series is mostly a membership update rather than a rebuilt home of entry points.
  • Search extensions help discovery only; sellable stock still comes from Shopify variants, not from a search hit.
  • Storefront behaviour is bundled in theme.js, which must re-initialise listeners after merchants reorder home or series sections.
ResultWhat changes after implementation
  • A first-time buyer can enter by brew method, while a returning specialist can go straight to Sculptor or Chestnut.
  • New models inherit the series-to-SKU shape and appear in existing routing and search without a second catalog.
View script and Shopify API evidence
Predictive Search APIinstant-core.min.jstheme.js
02Readable specifications

Keep burr photography and spec tables in step with colour and version

A specialist equipment page has to make burr, speed, adjustment and voltage readable, and keep photography tied to the configuration that can actually be sold.

  1. 01Read burr and grind range
  2. 02Compare speed, steps and capacity
  3. 03Change colour or version
  4. 04Confirm voltage and plug
  5. 05Refresh media, price and availability together

Implementation

  • Cards use different aspect ratios for grinders, scales and kettles, with industrial photography and burr close-ups serving selection rather than turning RPM into a poster.
  • Colour, burr set or version are Shopify variants; a change swaps colour and cutaway frames, and selected, preorder and unavailable states sit on the controls with a visible focus ring.
  • RPM, adjustment steps, material and kettle volume stay comparable fields in a table that scrolls horizontally on small screens instead of shrinking below readable type.
  • Video and stills share a locked frame so switching media does not shove the specification block or purchase area.

Deployment and acceptance

  • A fixed purchase bar cannot cover voltage and plug notes that change with the selected unit, because those details decide whether the item can ship.
  • Option selectors extend the control layer only; variant inventory remains on the Shopify product object.
  • swiper-min-js.js drives media and series carousels; theme.js remounts listeners after a product section is reordered in the editor.
ResultWhat changes after implementation
  • Burr, colour, voltage and sellable state can be read as one configuration instead of a photograph plus an unrelated buy button.
  • New Sculptor or Chestnut photography and specification fields can replace content without rebuilding the reading structure of the page.
View script and Shopify API evidence
theme.jsswiper-min-js.jsselectors.js
03Complete the brew kit

After the grinder is chosen, keep scale, kettle and accessories on the path to cart

Once the host tool is confirmed, complementary scales, kettles, brew accessories, preorder timing and wholesale entry need to stay shoppable, not trapped inside a description that lists every add-on.

  1. 01Confirm the host model and sellable version
  2. 02See matching scale, kettle and brew tools
  3. 03Distinguish in-stock, preorder or wholesale
  4. 04Submit the correct items to cart

Implementation

  • Complete brew setups are product relationships: scales, kettles and accessories remain their own SKUs instead of a paragraph that names every tool.
  • Add, quantity change and cart refresh go through Cart Ajax add, change and update from the theme.js and vendor-scripts-v11.js bundle, so line items match the model shown on the page.
  • Preorder timing, delivery and after-sales sit in merchant-editable modules; wholesale has its own entry so B2B copy does not leak into the retail buy box.

Deployment and acceptance

  • Cart UI writes back from the server response, rather than trusting a local quantity that may no longer match stock.
  • A series launch updates related products, preorder notes and the wholesale entry without editing policy sentences inside the theme bundle.
ResultWhat changes after implementation
  • After choosing a grinder, a shopper can keep assembling scale and kettle on the same path instead of guessing compatibility from copy.
  • Preorder and in-stock stay distinct at the purchase control, and wholesale buyers are not forced through retail add-to-cart.
View script and Shopify API evidence
Cart Ajax: addCart Ajax: changeCart Ajax: updatetheme.jsvendor-scripts-v11.js

Operational handoff

The operating team can continue after launch

Catalog and content
  • The catalog is maintained as electric grinders, manual grinders, scales, kettles and brew accessories, with Sculptor, Chestnut, Basic and Fish kept as series-to-model hierarchies.
  • Colour, burr set and version belong on Shopify variants; RPM, adjustment steps, material and kettle volume stay comparable specification fields.
  • Complete brew setups are related products. Voltage and plug type are US-sellable data, not a footnote that never changes with the selected variant.
Market operations
  • The US English storefront settles in USD, with checkout preload using locale en-US.
  • Voltage, plug type and sellable grinder versions are maintained by destination and stay bound to variant availability.
  • Delivery, preorder timing and after-sales are merchant-editable modules. Specification tables and brew-method copy can be reused; price and accessory compatibility still need checking against US inventory.
Research notesPublic sources and verification boundary

Public research sources

Content verification

Industry, product and observable feature notes are verified against the brand site. Apps, admin configuration and commercial data that cannot be confirmed from the storefront are not inferred. WESWOO scope is stated only from project records and client authorization.

Public information last reviewed: 2026-08-12

Your next move

Turn your storefront into infrastructure for sustainable growth

Discuss your project