Smart pet products
Meowant
Meowant's smart-pet storefront resolves pet fit, safety and cleaning before app or automation. Bundles and consumables shape both the transaction and long-term ownership.
Visit the live project
Core implementation review
Three storefront journeys from model choice to purchase
Meowant has to turn fit, safety, cleaning and replenishment into a path people can actually buy through. App features belong later; they should not replace the pet-condition decision. The journeys below cover model routing, product-page trust, and the pack-and-consumable layer that follows the host unit.
Project context
Define how customers choose before defining the storefront
Customers enter through litter boxes, purifiers, GPS fences or fountains. Litter boxes compare SC01, SC02, SC03, SC09 and SC10 by pet conditions and function; basic through deluxe packs add liners, odor and filters.
Shopify pet-care frontend, educational PDPs, bundles, FAQ and responsive buying UX.
Lock the host unit by the cats at home, not by a slogan
Shoppers have to match cat count, entrance height, capacity and cleaning method to a self-cleaning litter box. Collections, comparison and search need to give the same answer.
- 01Enter through litter boxes, purifiers, fences or fountains
- 02Narrow by cat count, entrance height and capacity
- 03Check capacity, noise, safety and app records
- 04Open the matching host product
Implementation
- Collections follow the buying task: self-cleaning litter boxes as the primary path, with air purifiers, GPS fences and accessories as later branches.
- Capacity, pet weight, entrance height and safety copy bind to the product object and theme settings, so comparison cards read one field set instead of a frozen essay.
- Predictive Search returns product and collection suggestions while the shopper types, sending them into the right range before a long list of similar model names.
Deployment and acceptance
- Spec cards and FAQ live as theme-editor sections and blocks, so operations can change parameters without touching interaction scripts.
- Search keeps loading and empty states. Host specifications stay shared across the US, Canada, Europe and the UK, so comparison structure is not copied per market.
- Shoppers confirm pet conditions before they commit to a host unit, instead of jumping on a feature list.
- A new model can enter collections, search and comparison by filling the same specification fields.
View script and Shopify API evidence
predictive-search.jssearch-form.jsPredictive Search APIShopify theme editor modeKeep entrance, drum, cleaning steps and the buyable configuration on one product page
High-consideration hardware has to make device scale and safety steps readable, while proving the unit in the form is the unit on screen.
- 01View entrance and drum at household scale
- 02Zoom structure and consumable install
- 03Sync price and copy when options change
- 04Submit the host unit and read pickup messaging
Implementation
- product-form.js and product-info.js coordinate submit and variant-info refresh, so the buy box does not re-interpret the selection on its own.
- media-gallery.js, product-modal.js and Swiper handle switching, zoom and carousels, keeping entrance height, drum structure and consumable installation at a readable scale.
- pubsub.js fans state between media, information and form components. pickup-availability.js surfaces local pickup. Safety and cleaning stay sequential content rather than decorative illustration.
Deployment and acceptance
- The product template owns gallery, variant selection, add-to-cart and pickup messaging; spec cards, reviews and FAQ remain product-bound sections.
- Theme-editor section reloads remount only the affected module, avoiding duplicate listeners.
- The native Shopify product form remains the fallback. Sticky add-to-cart arrives from an app extension and must not cover collapsible spec panels on mobile.
- Structure, current configuration and cart identity stay aligned, so education does not push the purchase out of context.
- Specs, care steps and reviews can be updated in the editor without rewriting product-page behaviour.
View script and Shopify API evidence
product-form.jsproduct-info.jsmedia-gallery.jsproduct-modal.jspubsub.jspickup-availability.jsSwiperShopify section eventsTreat packs and consumables as their own purchase after the host is chosen
The first order needs a Basic-to-Deluxe pack; ownership then depends on liners, odor control and filters. That relationship should not be frozen inside the host SKU.
- 01Confirm the host model
- 02Choose a pack tier
- 03Add liners, odor control or filters as separate products
- 04Confirm the cart through a notification, without leaving the page
Implementation
- Host units stay separate products from filters and liners. Colour or pack SKUs sit on variants, so the consumable lifecycle is not hidden inside host options.
- Shopify Ajax Cart handles the add; cart-notification.js echoes cart state afterwards. The public storefront has no theme cart drawer, so feedback stays on the notification bar.
- Countdown, sticky add-to-cart and frequently-bought-together remain app extensions. The theme kernel keeps product facts and cart mutation.
Deployment and acceptance
- Pack promotions and consumable stock are the regional edit surface; host specifications stay shared across markets.
- Quantity changes continue through Cart Ajax change and update, and the notification writes back server state so the page does not keep a stale cart.
- The native product form is the no-script fallback. Extension failure must not block adding the host unit.
- Shoppers can complete the host, pack and refill on one path without treating consumables as a host option.
- Operations can adjust packs and supply by market without rewriting product-page behaviour.
View script and Shopify API evidence
cart-notification.jsproduct-form.jsCart Ajax: addCart Ajax: changeCart Ajax: updateOperational handoff
The operating team can continue after launch
- Collections treat self-cleaning litter boxes as the primary path, then branch into air purifiers, GPS dog fences, fountains, accessories and bundles.
- Host units stay separate from liners and filters. Colour or pack SKUs sit on variants; capacity, pet weight, entrance height and safety copy bind through theme settings or dynamic sources.
- Comparison for SC02 and related units reads that same specification set, so contrast is not frozen into long-form copy.
- The United States is the default market, with en-US checkout preloads. Canada, Europe and the UK enter through localization-form.js.
- Plug type, delivery, trial and returns, and app availability live in market content; currency and shipping stay on Shopify Markets.
- Consumable stock and pack promotions are edited per region. Host specifications remain shared, and regional strings stay out of interaction scripts.
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