Project portfolio Browse selected work

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

Overlanding and camping equipment

TOPOAK

TOPOAK's high-value outdoor commerce depends on vehicle compatibility, installation requirements and complete camp systems. Adventure imagery converts only when fit information is clear.

Visit the live project
TOPOAK rooftop tent camping scene
Official public brand visual

Core implementation review

Three storefront journeys from model choice to purchase

TOPOAK treats a hard-shell rooftop tent as equipment that has to mount on a specific vehicle. Until rack type, load, occupancy and open dimensions are checkable, installed photography is atmosphere rather than a buying argument. The work below follows fit confirmation, the product-page reading order, and completing a camp system.

Project context

Define how customers choose before defining the storefront

Buying decision

Vehicle, group size and travel style lead the decision. Compatibility and load come before shell, setup time, space and accessory ecosystem; fitment guides, installation, freight and return restrictions carry unusual weight.

Delivery boundary

Shopify storefront frontend, product and accessory taxonomy, guide entry points, campaign pages and responsive buying UX.

01Vehicle fit

Prove the tent can live on this vehicle before it enters the cart

Shoppers arrive with a vehicle, group size and trip style. Rack type, load ratings and packed dimensions have to be settled before shell mechanics or accessories matter.

  1. 01Enter from vehicle or trip type
  2. 02Check rack and load ratings
  3. 03Confirm packed size, open footprint and occupancy
  4. 04Then compare opening mechanics

Implementation

  • Vehicle-fit and installation copy bind to merchant-editable product fields rather than living inside the product-form script.
  • The vehicle quiz stays on the app boundary, so questionnaire logic never enters product-form.js.
  • Collections separate tents from accessories; awnings and mounts are compatible products, not tent option values.

Deployment and acceptance

  • Shopify section events rebind fitment widgets after a theme-editor section reload.
  • Shell specifications stay shared across markets; sellable models, preorder copy and freight limits are edited per destination without changing form scripts.
ResultWhat changes after implementation
  • Fit can be judged before add-to-cart, instead of after an incompatible tent is already in the bag.
  • Merchants can update vehicle notes and install copy without touching the buy form.
View script and Shopify API evidence
quiz-renderer.jsproduct-form.jsproduct-info.jsShopify section events
02Product reading

Keep installed-vehicle photos, opening sequences and drawings in one rhythm

Packed height, open footprint and occupancy should be checkable on the first screen. A colour or configuration change must not collapse the scale of the dimension diagrams.

  1. 01Make packed height, open footprint and occupancy checkable first
  2. 02Pair installed photography with the buy box on desktop
  3. 03Alternate opening sequences with dimension drawings
  4. 04Sync media when colour or configuration changes
  5. 05Fold installation steps into disclosures on mobile

Implementation

  • product-form.js and product-info.js own the form and variant copy; media-gallery.js and product-modal.js own tent media; pubsub.js fans one selection state between them.
  • Colour or configuration remains a variant; load, occupancy and dimensions stay product fields, not option values.
  • pagefly-product-media.js extends the media layout on the page-builder boundary rather than replacing the theme gallery.

Deployment and acceptance

  • Desktop keeps vehicle photography beside the buy box; mobile uses details-disclosure.js for install steps instead of stacking a full manual on the first screen.
  • Section reloads remount gallery and form listeners through Shopify section events.
  • Sold-out, preorder and add-to-cart success remain distinct; cart-notification.js must not cover load ratings or return rules.
ResultWhat changes after implementation
  • One page answers how the tent looks installed, whether it fits, and whether the current configuration is buyable.
  • Dimension drawings keep readable proportions after a variant change instead of being replaced by landscape shots.
View script and Shopify API evidence
product-form.jsproduct-info.jsmedia-gallery.jsproduct-modal.jspubsub.jspagefly-product-media.jsdetails-disclosure.jscart-notification.jsShopify section events
03Camp system

Complete the camp with compatible awnings, mounts and furniture

Once the host tent is chosen, related gear can be added as its own products, and the cart can spell out oversized delivery.

  1. 01Confirm the host tent
  2. 02Surface compatible awnings and mounts
  3. 03Add a kit or related product
  4. 04Show oversized-delivery notice in cart

Implementation

  • Collections split tents from accessories; variants only hold colour or configuration.
  • Product pages call the Product Recommendations API from the current tent context to surface related gear.
  • Kit add-ons stay in revy-bundle.min.js on the app boundary; the theme kernel submits through Ajax Cart add, change, update and clear.
  • Add-to-cart feedback uses cart-notification.js; the public theme has no cart-drawer asset.

Deployment and acceptance

  • Recommendations load asynchronously and never block host price or the product form.
  • Open-box and new inventory remain separate availability states; preorder copy is operational configuration, not a rewrite of the buy form.
  • localization-form.js switches region and pickup-availability.js queries local pickup; freight and returns stay destination-specific.
ResultWhat changes after implementation
  • The shopper leaves with a mountable, shippable camp system rather than an isolated tent.
  • A sold-out or preorder shell does not incorrectly inherit accessory availability.
View script and Shopify API evidence
Product Recommendations APIrevy-bundle.min.jscart-notification.jsCart Ajax: addCart Ajax: changeCart Ajax: updateCart Ajax: clearlocalization-form.jspickup-availability.js

Operational handoff

The operating team can continue after launch

Catalog and content
  • Hard-shell rooftop tents are the high-consideration path, with live product pages for Galaxy Pro and Galaxy 2.0 Stellar with rainfly.
  • Collections keep tents apart from awnings, mounts and camp furniture; variants only hold colour or configuration.
  • Vehicle fit, load, packed and open dimensions, occupancy and install copy bind to merchant-editable product fields.
  • Open-box and new inventory remain separate availability states.
Market operations
  • Checkout preloads use locale=en-US, so the default transaction context is US English and USD while the storefront still serves multiple countries.
  • Vehicle platforms, rack standards, oversized freight, lead time and returns are destination-specific; tent dimensions stay shared.
  • localization-form.js is the region switcher and pickup-availability.js queries local pickup, so the product form is not duplicated per 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