Electric bicycles
ADO E-Bike UK
ADO UK creates a use-case hierarchy across folding, city, carbon and cargo bikes, turning local pricing, reviews, accessories and support into trust for a high-value purchase.
Visit the live project
Core implementation review
Three storefront journeys from model choice to purchase
ADO’s UK storefront sells folding, city, carbon and cargo e-bikes. The first questions are whether the bike will go upstairs and whether it fits the commute; GBP price, delivery and warranty only matter once that use is clear. The work below follows use-case entry, folding proof on the product page, and a purchase cluster that can fulfil the frame, kits and UK aftercare separately.
Project context
Define how customers choose before defining the storefront
Commuting, foldability, light carbon or cargo routes the shopper, followed by weight, range, sensing and dimensions across Air and other ranges. Colour, accessory kits, press reviews, delivery and warranty finish selection.
UK Shopify frontend, bike taxonomy, technical PDPs, accessories and localized buying journeys.
Shortlist by storage and commute, not by a global model code
UK shoppers first decide whether they need a bike that folds through a doorway, covers a city commute, or stays light on the move—then reach Air and neighbouring models without decoding similar names.
- 01Enter a collection by folding, city or lightweight commuting use
- 02Narrow by weight, folded size, motor and range
- 03Open a model page to confirm colour and availability
Implementation
- Collections carry the use-case browse; the product object holds the model; colour is the shoppable variant. Mudguards and racks stay off that SKU.
- Weight, folded size, motor, battery, range and rider fit are comparable fields in collection and product content, not clues hidden inside a model code.
- Predictive Search returns product and collection suggestions as the shopper types, sending terms such as “folding” or “Air 20” into the right range.
Deployment and acceptance
- Available models and collections are maintained on the UK storefront itself, rather than assuming an unpublished global sync.
- Search keeps loading and empty states; the module rebinds when a theme-editor section reload fires.
- Shoppers cut the list by storage and commute, then compare folded size and weight, instead of translating a model code first.
- A new bike enters the same browse path once it sits in an existing use-case collection and reuses the comparable fields.
View script and Shopify API evidence
predictive-search.jsPredictive Search APIKeep folded size, frame construction and colour in the same decision screen
The product page has to prove portability with side profiles, folding steps and construction crops. After a colour change, the gallery and the buy cluster still describe the same bike.
- 01Show full-bike proportion and folded volume together
- 02Explain the difference with folding steps and construction crops
- 03Sync gallery and purchase summary when colour changes
- 04Return focus to colour after a zoomed inspection
Implementation
- wes-main-product.js and product.js share the main product module so colour drives media and purchase copy together, rather than each block resolving the bike on its own.
- PhotoSwipe handles zoom; closing it returns focus to the variant control so a detail check does not drop the colour just chosen.
- Swiper and slideshow.js separate body, folding-step and construction carousels, so instructional frames do not compete with riding photography.
Deployment and acceptance
- Theme product scripts sit alongside Pagefly’s pagefly-product.js and pagefly-product-media.js. After a Shopify section reload, the main product module, carousels and zoom layer remount.
- Folding steps, specifications and warranty stay in the product template, sections, blocks and theme settings—not inside scripts.
- Mobile pages use section headings for construction, specifications and warranty, instead of a continuous stack of riding frames that pushes packed size off the first screen.
- Folded size is readable in both the hero crop and the specification cluster, and colour stays aligned with the media in view.
- Press and review modules can live below the fold without displacing the portability decision.
View script and Shopify API evidence
wes-main-product.jsproduct.jsphotoswipe.min.jsphotoswipe-ui-default.min.jsswiper-bundle.min.jsslideshow.jspagefly-product.jspagefly-product-media.jsShopify section eventsShopify theme editor modeVariant behaviorFulfil the frame, the accessory kit and UK aftercare as separate items
Colour resolves on the bike variant. Mudguards, racks, bags and locks sit as related products. GBP price, delivery and warranty stay beside the buy action, and cart changes go through Ajax Cart.
- 01Confirm colour and sellable state
- 02Add compatible mudguards, racks, bags or locks
- 03Read GBP price, delivery and warranty beside the buy action
- 04Submit the frame and kit and refresh the cart
Implementation
- Frame and rack inventory stay on separate SKUs; accessories are related products so one stock record cannot lock both the bike and the kit.
- product-form.js submits the add; Cart Ajax add, change and update mutate the cart, and feedback remains on the page.
- Delivery, returns and warranty sit next to the purchase cluster. Power, speed and folded-size copy is written in UK riding language.
Deployment and acceptance
- pickup-availability.js surfaces local pickup messaging; policy copy updates from theme settings without rewriting the product form.
- Checkout preloads en-GB. The public market posture stays UK English and GBP, with currency and policy living in the UK catalog and content.
- Theme-editor section reloads rebind the product form; the native Shopify product form remains the fallback if scripts fail.
- Shoppers can confirm frame colour and accessory stock separately, with total price, UK delivery and warranty in the same purchase view.
- The cart then shows the specific bike and accessory lines, without leaving the product page to guess whether the add succeeded.
View script and Shopify API evidence
product-form.jsCart Ajax: addCart Ajax: changeCart Ajax: updatepickup-availability.jsProduct form behaviorOperational handoff
The operating team can continue after launch
- The catalog is layered by folding, city and lightweight commuting use, with models such as Air 20 Ultra 2026 and Air 20 Pro sitting in those collections.
- Colour is the shoppable variant. Mudguards, racks, bags and locks link as related products so accessory stock is independent of the frame.
- Weight, folded size, motor, battery, range and rider fit are shared comparable fields for collection and product pages.
- The public market posture is UK English and GBP, with checkout preloaded as en-GB.
- Delivery, returns, warranty and pickup copy are edited on the UK storefront and kept beside the purchase cluster.
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