Bathroom products and smart cabinets
Allsumhome / ExBrite
Allsumhome and ExBrite combine standard products, dimensional filtering and custom projects. Shopify must connect room measurement, installation, lighting features and quotation.
Visit the live project
Core implementation review
Three storefront journeys from model choice to purchase
A lighted medicine cabinet or oval LED mirror is decided by the wall opening, recessed versus surface mount, hinge and light type before anyone argues about style. Allsumhome / ExBrite needs fulfilable widths on Shopify variants, and made-to-measure glass on a measurement-and-quote path, so one card never promises both instant fulfilment and a custom lead time. The three journeys below follow space filtering, a size-family product page, and the split between cart and enquiry.
Project context
Define how customers choose before defining the storefront
Customers begin with product, light type, mounting, height, shape or range, then verify dimensions, hinge, lighting and functions. Standard sizes purchase directly; custom mirrors or doors move into Custom Service, with installation and freight confirmed before payment.
WESWOO separates but connects standard retail and custom leads: one product model supports filters and PDPs, while non-standard sizes move into measurement, drawing and quote, allowing Shopify to serve consumers and project buyers.
Reach a fulfilable family from the wall opening, not from a style grid
Bathroom shopping starts with cut-out, mount type and product family, so customers land on stock sizes that can actually be installed.
- 01Enter a family by product, light or mount
- 02Filter to sellable widths and install types
- 03Open the matching cabinet or mirror
- 04Review related pieces only after the host product is clear
Implementation
- The catalog is organised around medicine cabinets, LED mirrors, shower doors, vanities and tubs, with collection pages carrying dimension and mounting filters instead of burying those constraints in search terms.
- Predictive Search returns product and collection suggestions while the shopper types, so queries such as medicine cabinet or LED mirror resolve to the right family first.
- Product pages request Product Recommendations from the active product context, adding related or install-adjacent items without a separately maintained promo grid.
Deployment and acceptance
- Standard widths, light types and recessed or surface values are maintained as filterable fields, so a size update does not require a navigation rebuild.
- Search keeps loading and empty states; recommendations load asynchronously and never cover the key dimension on a product card.
- Exception freight regions stay aligned with sellable sizes so a homepage result is not later unreachable in the cart.
- Shoppers confirm the opening and mount before they browse styles that cannot be installed.
- New cabinets and mirrors enter filter, search and recommendation surfaces by following the same family, size and install fields.
View script and Shopify API evidence
predictive-search.jssearch-form.jsPredictive Search APIProduct Recommendations APIKeep a cabinet’s stock widths on one product page that can check out
Related widths, mounting styles and lighting options belong on a single PDP, where media, price and the product form all resolve to one checkout identity.
- 01Open the size-family product page
- 02Choose width, recessed or surface mount, and light type
- 03Refresh install and lighting media with price
- 04Submit that same variant through the product form
Implementation
- Related stock sizes are folded onto one PDP. option.js and select.js extend native options, and combined-listing scripts keep fulfilable widths on a single URL instead of sending shoppers across listings.
- product-form.js and product-info.js hold the active variant, price and availability. Option changes write back into that form so a second checkout object never appears beside the Shopify line item.
- media-gallery.js and product-modal.js keep portrait cabinet and landscape mirror frames, swapping installation and lighting shots when the variant changes rather than replacing only the hero still.
Deployment and acceptance
- Width, hinge and install notes live in merchant-editable fields, so launches do not depend on exposing the full Liquid map.
- Theme-editor section reloads remount gallery and form listeners so option changes keep working after a merchant edit.
- pubsub.js remains the event bus so the theme cart and any app drawer subscribe to the same line item, including custom option state written back to the form.
- Width, mounting and lighting can be checked on one page, and the configuration on screen is the variant that will check out.
- New stock sizes are added as family data and media, not as duplicated product templates.
View script and Shopify API evidence
product-form.jsproduct-info.jsoption.jsselect.jsvariant-king-combined-listing-2-17.min.jsvariant-king-combined-listing-new-2-17.min.jsmedia-gallery.jsproduct-modal.jspubsub.jsVariant behaviorProduct form behaviorMedia/model behaviorShopify theme editor modeStock cabinets add to cart; made-to-measure mirrors start with a drawing
Sellable sizes move through Ajax Cart. Custom oval LED mirrors and non-standard doors collect measurements and drawings. The two actions must never share a button or a fulfilment promise.
- 01Decide whether the SKU is stock or made-to-measure
- 02Add stock products after freight and install notes
- 03Submit dimensions, units and drawings for custom work
- 04Keep the cart limited to fulfilable line items
Implementation
- Direct add-to-cart and Custom Service are separate catalog outcomes: stock widths bind to variants and the theme product form; non-standard mirrors and doors never become sellable variants.
- quick-add.js and cart-drawer.js submit stock products through Shopify Ajax Cart, and the returned cart JSON is the source for quantity, line items and any cart-layer upsell.
- Enquiry copy — units, drawing requirements and lead time — is maintained for the US market and kept out of standard variant text so a quote request cannot be read as an in-stock SKU.
Deployment and acceptance
- Freight coverage, install exceptions and custom lead times are merchant-editable policies that change with the variant or path, rather than being hard-coded in the theme.
- The theme cart drawer and the cart-upsell layer share one line-item state; recommendations and upsells load asynchronously and never block the primary add action.
- Pickup and date-picker scripts sit beside standard checkout as operational hints; they do not replace a quote ticket or fork a second product model.
- Cabinets that can ship enter the cart; mirrors that need measuring enter an enquiry, so the two promises never share a control.
- Retail shoppers and project buyers browse the same catalog structure and only diverge at the product action.
View script and Shopify API evidence
product-form.jsquick-add.jscart-drawer.jscart--drawer.jscart.jspubsub.jspickup-availability.jsbuunto-date-picker.jsCart Ajax: addCart Ajax: changeCart Ajax: updateProduct Recommendations APIOperational handoff
The operating team can continue after launch
- The catalog is maintained as medicine cabinets, LED bathroom mirrors, shower doors, vanities and tubs, with range name and a key dimension visible on the card.
- Standard widths, light types and recessed or surface mounting belong on variants or grouped listings; lighting, defogging, outlets and storage stay as structured specifications rather than unsearchable copy.
- Non-standard sizes, drawings and measurements are custom leads kept beside the retail SKU, so one card never promises both in-stock fulfilment and made-to-measure lead time.
- The storefront is US English, priced in USD, with checkout preload using locale en-US.
- Freight, installation coverage and custom lead times are editable policies that follow the stock or enquiry path; exception shipping regions must match sellable sizes.
- Enquiry units and drawing requirements are maintained for the US market and kept out of standard variant copy.
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