Consumer electronics and charging
INIU
INIU operates in a highly commoditized charging market. The storefront must translate protocols, wattage, capacity, ports and device compatibility into fast buying language instead of relying on promotional price alone.
Visit the live project
Core implementation review
Three storefront journeys from model choice to purchase
INIU does not need a louder charging store. It needs shoppers to tell, among similar power banks, magnetic chargers and cables, whether wattage, capacity, ports and size match their devices. The journeys below cover first-screen spec checks, a catalog closed around device power, and a phone path that connects portability to purchase.
Project context
Define how customers choose before defining the storefront
The journey starts with phone, tablet, laptop or multi-device use, then compares capacity, maximum power, port mix, weight and travel suitability. Model naming needs device compatibility, charge-count guidance and scenarios rather than a wall of numbers.
Visual and UI design, Figma prototyping, Shopify frontend modules, range merchandising, quick shopping and responsive interaction.
Open a model page that can answer “will this power my device?”
On named packs such as the P63 and Carry P50, peak wattage, capacity and ports should be verifiable against a phone, tablet or laptop before campaign copy takes over.
- 01Open a named model
- 02Read capacity, peak wattage and ports in one view
- 03Check size against a real device, then choose a colour
Implementation
- Capacity, peak output and port mix occupy the primary first-screen reading zone; selling lines and reviews sit after that check.
- Portability is explained with size comparison and device context, not decorative gradients or lifestyle photography.
- Colour is an appearance variant only and never encodes power or ports; sold-out and offer states use a separate status colour from the brand palette.
Deployment and acceptance
- Desktop pairs photography with the buy column; mobile exposes the checkable figures and primary action first.
- Count-up numbers, text transitions and review carousels can be reduced or paused without changing the spec hierarchy, including a reduced-motion path.
- A P63 and a Carry P50 are immediately distinct as 100W / 25000mAh versus 45W / 10000mAh use cases.
- Later models reuse the same first-screen field positions, so a launch mainly replaces specs and media rather than restaging the page.
Close the catalog around device power, not lifestyle grids
After a phone, laptop or travel entry, filters and product pages narrow by capacity, wattage and ports. Cables and magnetic rings appear only once the host pack is chosen.
- 01Enter from a device or travel scenario
- 02Narrow by capacity or wattage
- 03Confirm ports and size on the model page
- 04Select a colour variant
- 05Add a cable or magnetic ring if needed
Implementation
- The selling catalog is organised around power banks, magnetic charging and fast-charge accessories, with capacity and output as the main comparison fields.
- Colour stays on the host variant; cables and magnetic rings remain related products so accessory choice does not inflate host options.
- Sellable SKUs are kept separate from plug-standard and certification copy, so compliance never becomes an option value.
- Search returns product and collection suggestions while the shopper types, sending “power bank” or “100W” into the right wattage band instead of a long list of similar silhouettes.
Deployment and acceptance
- Scenario entry points, collection filters and product specs read one shared capacity, wattage and port model; campaign pages do not invent a second taxonomy.
- Capacity and wattage remain shared product data across destinations; plugs and certification stay in market content.
- Bundle offers update as merchandising beside the host product and do not rewrite the variant contract.
- The task becomes matching a device’s wattage need to a pack’s output, rather than price-comparing lookalike SKUs.
- A new model that carries capacity, wattage and ports can enter filters, search and related-product slots without a hand-built catalog each time.
View script and Shopify API evidence
predictive-search.jsShopify Predictive Search APIFold size, colour and purchase into one phone decision
Travel buying happens on a small screen. Shoppers need size, colour and the active offer in view, then add from collapsed specs instead of scrolling a long page to find the button again.
- 01Check capacity, wattage and availability in the list
- 02Open the product page when size or colour still needs a look
- 03Expand ports and compatibility only as needed
- 04Add from the active offer state
Implementation
- Collection rows expose capacity, wattage and the current sellable configuration so a shopper can add without opening a long PDP.
- Detailed protocol and certification copy stays collapsed by default; size comparison and port diagrams remain one tap from the buy area.
- Limited-time offer state sits beside the purchase control and never hides the spec check.
Deployment and acceptance
- Mobile spacing keeps the primary action close to the first screen, clear of collapsed specs and system gesture areas.
- Gallery and add-to-cart rebind when a product section loads or unloads in the theme editor, so the button does not go dead after a merchandising edit.
- List quick-add and the product form share one drawer cart, and quantity changes write back to every purchase surface.
- On a phone, “is it small enough, will it charge my device, can I buy it now” can be answered in one pass.
- Offer or specification modules can change without rebuilding the mobile purchase structure.
View script and Shopify API evidence
quick-add.jscart-drawer.jsShopify section eventsOperational handoff
The operating team can continue after launch
- The catalog is maintained as power banks, magnetic charging and fast-charge accessories, with capacity, output, ports and size as the comparison axes.
- Colour belongs on variants; cables and magnetic rings stay related products rather than host options.
- Scenario entry points and collection filters read the same specification fields, so campaign pages do not need a second taxonomy.
- The default transaction context is US English. Plug standards, voltage, warranty and delivery limits for the UK, Canada and the EU are maintained as market content.
- Editors change language copy, regional navigation and promotion modules; capacity and wattage remain shared product data across destinations.
- Region selection does not duplicate the core matching fields, and compliance copy stays content rather than an option value.
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