Project portfolio Browse selected work

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

Robotic pool cleaning

WYBOT

WYBOT's multi-range catalog needs a clear ladder based on pool fit, coverage, filtration and automation so models are not differentiated by price alone.

Visit the live project
WYBOT C2 cordless robotic pool cleaner
Official public brand visual

Core implementation review

Three storefront journeys from model choice to purchase

WYBOT is bought against a pool, not against a model name. Above- or in-ground type, area and surface drop unfit machines first; C1 and C2 then read as one ladder of coverage, runtime, filtration and app control. The product page has to prove route, debris capture and parking, while filters and charging caps stay off the host variants so replenishment can be stocked on its own.

Project context

Define how customers choose before defining the storefront

Buying decision

The decision starts with above- or in-ground pool, area and surface, then compares C and S ranges by modes, runtime, routes, filtration and auto-parking. Real cleaning video, reviews, warranty and parts availability establish trust.

Delivery boundary

WESWOO places range differences in structured data and comparison rather than repeated campaign artwork. Pool conditions lead into fit and proof before purchase, with parts and support completing the ownership lifecycle.

01Pool-fit routing

Fit the pool first, then compare C1 and C2 on the same capabilities

Cordless robotic cleaners are the host products. Pool type routes the catalog; coverage, runtime, filtration and app control become the shared ladder so neighbouring models are not separated by price alone.

  1. 01Confirm above- or in-ground pool, area and surface
  2. 02Enter the cordless robot range
  3. 03Align C1 and C2 on coverage, runtime, filtration and app control
  4. 04Open the matching product page with that fit already decided

Implementation

  • Collections carry pool-type routing and treat cordless robotic cleaners as host products, rather than mixing every cleaning SKU on one shelf.
  • Coverage, runtime, filtration and app control live on the product object, so C-series comparison reads one shared specification set.
  • Colour stays on variants and out of the comparison columns. Predictive Search returns product and collection suggestions while the shopper types, so the first job is entering the right range.

Deployment and acceptance

  • Pool type, range and core specifications become reusable fields consumed by search and comparison, instead of tables copied into campaign pages.
  • Search keeps loading, empty and keyboard states. On a phone, coverage, runtime and filtration stay in one token set so C1 and C2 remain checkable.
ResultWhat changes after implementation
  • Shoppers eliminate an unfit pool first, then choose between neighbouring models on capability rather than on a badge.
  • A new C-series machine enters collection, search and comparison by following the same field model, without a new set of marketing long-images.
View script and Shopify API evidence
Predictive Search API
02Cleaning proof

Lead with route, debris and parking, not with a decorative wash

The product page treats underwater motion as the primary evidence, while specification cards, colour choice and the buy control stay usable.

  1. 01Read coverage modes and underwater motion
  2. 02Check runtime, filtration and app status on the cards
  3. 03Choose an available colour
  4. 04Submit the product form

Implementation

  • Brand blue-green separates the hull from water. Hero media leads with route, debris capture and parking rather than a decorative wash.
  • Swiper sequences the gallery. Specification cards, mode icons and purchase controls expose selected, disabled and loading states, so C1 and C2 stay scannable at card level.
  • Colour variants drive the product form, and Shopify Ajax Cart add receives that selection so the visible configuration matches the line that enters the cart.

Deployment and acceptance

  • lazysizes lazy-loads images but must not delay critical specifications. Mobile avoids stacked autoplay video.
  • Section Rendering API refreshes remount the carousel and form, so a partial rerender does not leave a dead buy control.
  • Post-add upgrade and gift overlays come from app extensions and are required to stay clear of the primary purchase control.
ResultWhat changes after implementation
  • Cleaning proof and colour purchase stay on one surface.
  • C1 and C2 share the same evidence language, so a new model mainly replaces media and specification content.
View script and Shopify API evidence
swiper-bundle.min.jslazysizes.min.jsProduct form behaviorCart Ajax: addSection Rendering APIlb-upsell.js
03Host and parts

Sell the robot by colour; restock filters on their own SKUs

Consumables leave the host variants. Quantity edits and gift rules rewrite cart state without changing the add-to-cart contract, so replenishment does not have to re-explain the machine.

  1. 01Add the host in an available colour
  2. 02Write quantity, lines and gifts back through the cart
  3. 03Send replenishment to independent spare-part collections

Implementation

  • Sellable colourways remain host variants. Filters and charging caps stay independent SKUs so inventory and after-sales are maintained separately.
  • After the product form submits, cart state is rewritten through Ajax Cart add, change and update, so a quantity edit does not reopen model choice.
  • Upgrades and gifts are handled by app extensions after add-to-cart. The theme keeps the host add contract stable and does not encode promotion rules in the kernel.

Deployment and acceptance

  • Specification, video and buy-box modules stay separate sections, so C1/C2 content can be edited without changing the add request.
  • Regional colour availability, gifts, plug type and delivery copy are operational surfaces; they change without rewriting the Ajax Cart payload.
  • Checkout preloads use locale=en-US. Season, warehouse, currency presentation and warranty are edited for the United States, Europe, Canada and Australia, while C-series specifications stay shared.
ResultWhat changes after implementation
  • Buying the robot and replenishing parts remain two clear paths; a spare-part order does not have to re-explain the whole machine.
  • Seasonal offers can switch by market while C-series specifications stay reusable across storefronts.
View script and Shopify API evidence
Product form behaviorCart Ajax: addCart Ajax: changeCart Ajax: updatelb-upsell.jsfreeGiftV2.min.js

Operational handoff

The operating team can continue after launch

Catalog and content
  • Cordless robotic pool cleaners are the host products; collections route by above- or in-ground pool conditions.
  • Coverage, runtime, filtration and app control sit on the product object; sellable colourways are variants.
  • Filters and charging caps remain independent compatible SKUs, and C1/C2 comparison reads the same specification set.
Market operations
  • The default transaction context is en-US. Season windows, plugs, inventory, currency presentation and warranty are maintained for the United States, Europe, Canada and Australia.
  • C-series specifications can be shared across storefronts; colour availability, gifts and delivery copy are edited per region without changing the add-to-cart request.
  • Regional entry is configured per storefront, so the fit-and-purchase journey is not rebuilt for each market.
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