Home energy and off-grid power
Nature’s Generator
Nature's Generator turns backup power, solar and wind into purchasable systems. Shopify must include energy sizing, kit relationships and installation support rather than sell a battery as an isolated SKU.
Visit the live project
Core implementation review
Three storefront journeys from model choice to purchase
Nature's Generator is not selling a battery in isolation. Shoppers first decide whether MyGrid 10K or Powerhouse can carry the load, then attach solar panels, turbines or extra batteries as products of their own. Shopify has to keep compatibility, a long technical product page and a multi-item cart inside one commerce model, instead of encoding panel counts as host variants.
Project context
Define how customers choose before defining the storefront
Buyers list appliances and wattage, calculate simultaneous load and desired runtime, then choose the core unit, power pods, panels and turbine count. Certification, wiring, installation, freight, warranty and support are equally important.
WESWOO shifts the model from selling products to selling systems: establish compatibility and energy data, then connect selection, kits, calculation, consultation and support so Shopify can support both standard retail and complex solutions.
Hang solar panels on the host page as products, not as host options
A whole-home backup purchase is a host plus matching parts. Panels, turbines and extra batteries have to be checked on the host page and added under their own stock and price.
- 01Lock the host by load and runtime
- 02Read compatible solar panels on the host page
- 03Check each panel as its own product
- 04Add host and components as separate cart lines
Implementation
- Panels, turbines and expansion batteries remain independent products and surface on the host through compatibility, not through the host variant matrix.
- solar-panels-compatible.js presents matching panels and distinguishes available, unavailable and sold-out states.
- System price still lives on each product and variant; capacity, ports and compatibility lists are merchant-editable fields.
- Product Recommendations fill related components from the active host, rather than a hand-built static slot.
Deployment and acceptance
- Compatibility lists sit in theme settings, so merchandisers can change matching panels without editing the script.
- A host variant change refreshes the compatible-panel list and price together, so the kit never lags the selected configuration.
- After a theme-editor section reload, the compatibility module remounts so selected and disabled states survive preview.
- Shoppers can see which panels belong with the host and order against real SKUs on the same page.
- Later expansion does not require splitting host variants; the component catalog can be maintained on its own.
View script and Shopify API evidence
solar-panels-compatible.jsproduct-form.jsproduct-info.jsProduct Recommendations APIKeep a transactable host form inside a long technical energy page
A whole-home energy page has to hold structure, ports, installation copy and a buy box at once. The theme still owns the sellable product; the long story cannot turn add-to-cart into decoration.
- 01Open a MyGrid or Powerhouse product page
- 02Read host media against capacity copy
- 03Check wiring, ports and installation constraints
- 04Submit the active variant through the product form
- 05Confirm the host in the cart drawer
Implementation
- product-form.js and product-info.js own the buy form and variant information, so the purchase target remains the active host variant.
- media-gallery.js manages host media so system diagrams and residential context share the same product.
- cart-drawer.js and cart.js take the add request, keeping the page and the cart line on the same product.
Deployment and acceptance
- Pagefly assets extend the long technical layout while the theme keeps a submittable product form; the two cooperate rather than overwrite each other.
- Shopify section events rebind the form, media and cart modules after an editor reload, so listeners are not duplicated or dropped.
- Desktop can pair system diagrams with the buy box; mobile folds long parameter lists so the drawer never covers port copy.
- Financing stays secondary to add-to-cart, and a reduced-motion path keeps the page readable.
- After reading capacity and installation constraints, shoppers can still submit the current host without leaving the technical story to find a buy button.
- MyGrid and Powerhouse reuse the same form, media and cart wiring; new hosts mainly need product data and technical modules.
View script and Shopify API evidence
pagefly-product.jsproduct-form.jsproduct-info.jsmedia-gallery.jscart-drawer.jscart.jsShopify section eventsFind the host, attach matching parts, and check out the system as line items
Shoppers do not always arrive from the homepage in order. Search, component recommendations and the cart drawer have to assemble a host and its panels into one system order.
- 01Reach the right host or component from search
- 02Confirm compatible attachments on the product page
- 03Add host and panels as multiple line items
- 04Buy standard units directly; send complex installs to consultation
Implementation
- Predictive Search returns product and collection suggestions while the shopper types, separating whole-home hosts from portable units and panels.
- The product page calls Product Recommendations from the active host to surface matching solar panels and related parts.
- Collection quick-add covers standard items; complex kits still return to the product page to verify compatibility before add-to-cart.
Deployment and acceptance
- Ajax Cart add, change and update treat the returned cart as source of truth, so the drawer shows host and component lines together.
- Search includes loading and empty states; recommendations load asynchronously and never block host price or the buy action.
- A shopper can enter the right host from search and place matching components in the same cart, instead of tracking isolated SKUs.
- Portable products keep a short buy path, while whole-home kits still complete compatibility checks on the product page.
View script and Shopify API evidence
predictive-search.jsPredictive Search APIProduct Recommendations APIquick-add.jscart-drawer.jscart.jsCart Ajax: addCart Ajax: changeCart Ajax: updateOperational handoff
The operating team can continue after launch
- The live catalog treats whole-home backup as the primary path, with MyGrid 10K and Powerhouse as host products and portable use plus components merchandised separately.
- Capacity, inverter output and ports bind to merchant-editable product fields; manuals and installation copy stay outside the variant matrix.
- Compatible solar panels are maintained as a list rather than host option values, so replenishment and expansion can move independently.
- Checkout preloads use en-US and USD, with Canada in the market set. Voltage, electrical code, freight, installation and warranty stay destination-specific rather than host variants.
- localization-form.js handles region entry and pickup-availability.js queries local pickup. Sellable components and technical documents can change by market without touching the compatibility script.
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