Consumer electronics and audio
Shokz UK
This is not a specification dump. It is a Shopify buying system that helps UK customers compare sports safety, long-wear comfort, call quality and different open-ear acoustic approaches.
Visit the live project
Core implementation review
Three storefront journeys from model choice to purchase
The UK store sells running, swimming, everyday and work headphones from one catalog. Legacy theme code mixed campaign pages with product structure, so each new line risked rewriting navigation and product pages together. The rebuild treats range routing, model proof and scroll storytelling as Online Store 2.0 components, so launches mainly update content and product data.
Project context
Define how customers choose before defining the storefront
The decision begins with running, swimming, everyday or work use, then moves through fit architecture, weight, protection rating, microphones, battery and fast charging. Colour, size and accessories are secondary choices, while reviews, video and returns policy provide trust.
Shopify theme frontend reconstruction; Liquid, HTML, CSS and JavaScript development; homepage, product page, navigation, tab, carousel and video modules; desktop and mobile adaptation.
Separate running, swimming and work lines before SKUs appear
Navigation and the homepage send shoppers into OpenRun, OpenSwim, OpenFit or OpenComm instead of flattening every open-ear SKU onto one wall.
- 01Enter from running, swimming or work
- 02Land in the matching product line
- 03Open the flagship or standard model
- 04Treat colour and size as a second choice
Implementation
- Product navigation, homepage modules and Running, Everyday and Work scene pages are separate Online Store 2.0 sections. Range entry points to a collection or flagship product; colourways never become collections.
- theme.js and global.js own desktop mega-nav and mobile disclosure, keeping product lines, technology pages and support on different layers so one menu does not mix shopping and education.
- Compare Products is a model-contrast entry, not a substitute for range routing. Refurbished units live in their own collection, away from in-line hosts.
Deployment and acceptance
- The announcement bar, UTMB partnership and OpenDots launches are replaceable sections, so campaign edits do not rewrite the navigation skeleton.
- On mobile, product lines and technology copy collapse while touch targets and the path from range to model stay intact.
- Runners reach OpenRun, swimmers reach OpenSwim and office buyers reach OpenComm, following activity rather than a specification dump.
- OpenDots and OpenFit can reuse the same navigation and homepage modules; a launch mainly updates collection links and copy.
View script and Shopify API evidence
theme.jsglobal.jsswiper.min.jsSwiperMove benefit copy with colour, band size and co-branded editions
OpenRun Mini/Standard and OpenRun Pro 2 colour or marathon editions must update media, benefit copy and the variant that actually enters the cart.
- 01Check fit, protection and battery differences
- 02Choose colour, band size or a co-branded edition
- 03Sync media and benefit copy
- 04Submit the matching variant
- 05See charging accessories after add-to-cart
Implementation
- custom_script-product-template-new.js owns product-template behaviour and resolves the current options onto the product form. Colour, Mini/Standard band size and co-branded editions stay as variants rather than extra products.
- product-benefit-variant.js swaps benefit copy when the variant changes, so open-ear, weight, water-resistance and battery claims follow the active SKU instead of remaining first-screen static text.
- Cart Ajax: add submits that variant. The long-page purchase bar reuses the original form’s price and action rather than calculating a second selection.
- cart-also-like.js works with the Product Recommendations API after add-to-cart to refresh charging cables and similar accessories, which stay outside the host option matrix.
Deployment and acceptance
- The product page is split into Overview, Features, Specs, Reviews and Support sections, with an in-page anchor bar that keeps the model name and purchase action in view.
- Desktop pairs media with the buy box; mobile collapses specification tables and the size guide without covering add-to-cart.
- The long-page purchase bar copies price and add-to-cart from the original product form; reloading the product template in the editor resyncs both surfaces so two option states cannot appear.
- Switching Cosmic Black, Mini or a marathon edition keeps benefit copy, price and cart identity on the same SKU.
- Shoppers who have scrolled into the feature story can still buy from the anchor bar and see matching charging accessories beside the cart.
View script and Shopify API evidence
custom_script-product-template-new.jsproduct-benefit-variant.jscart-also-like.jsCart Ajax: addProduct Recommendations APIProduct form behaviorVariant behaviorProve the open ear and a stable fit through a sequenced scroll
Open-ear audio has to be seen: the ear canal stays open, glasses still fit, and the frame stays put while running. Scroll, carousels and video fire by feature block rather than decorating the whole page.
- 01Establish the category with a worn silhouette
- 02Trigger structure and sport demonstrations on scroll
- 03Open specs or video through tabs
- 04Return to the active model’s purchase action
Implementation
- animation.gsap.js, TweenMax.min.js and ScrollMagic.js sequence dual-driver, open-ear and stable-fit passages against scroll position, bound to feature sections rather than a page-wide timeline.
- swiper.min.js and swiper8.min.js drive the announcement bar, athlete quotes and product media. lottie.min-5.12.2.js is reserved for structural diagrams and never covers variant controls.
- theme.js and global.js keep tab, video play/pause and anchor-nav state in one place, so Features, Specs and the purchase entry share the current position.
Deployment and acceptance
- Media lazy-loads through lazysizes.min.js. Video and Lottie can pause under reduced-motion preferences and must not cover add-to-cart or colour selection.
- Desktop uses darker feature panels to pace reading; mobile shortens passages and allows horizontal carousels. If motion fails, headings, specifications and the buy bar remain.
- Carousel and scroll modules initialise with their parent section, so replacing one feature block in the editor does not rerun the whole page animation.
- After the open-ear, clamp and battery demonstrations, the current model and purchase action are still on screen.
- New models reuse the same scroll, carousel and video modules; merchandising replaces media and copy to ship the feature story.
View script and Shopify API evidence
animation.gsap.jsGSAPTweenMax.min.jsScrollMagic.jsswiper.min.jsswiper8.min.jsSwiperlottie.min-5.12.2.jslazysizes.min.jstheme.jsglobal.jsOperational handoff
The operating team can continue after launch
- Collections own OpenRun, OpenSwim, OpenFit, OpenComm and OpenDots merchandising. Colour, Mini/Standard band size and co-branded editions stay as product variants.
- Charging cables, wireless adapters and cases are related products, not host options. Refurbished units use a separate collection.
- Sport use, fit, protection rating and battery life compare models; they are not modelled as extra product types.
- Checkout runs in en-GB and GBP. Two-to-three-business-day dispatch, free shipping over £30, a 30-day returns window and a 24-month warranty are maintained as UK store content.
- Editing stays inside theme sections, navigation copy and policy pages, so partnerships, reviews and scene pages can update without changing the variant matrix or add-to-cart request.
- Bone-conduction and open-ear technology pages, manuals and warranty entry points stay outside sellable SKUs, so content objects never become option values.
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-20