Kitchen appliances and ventilation
ARSPURA
ARSPURA range hoods are both appliances and installed home products. The storefront must explain capture technology, dimensions, installation and support together.
Visit the live project
Core implementation review
Three storefront journeys from model choice to purchase
A range hood that misses the cabinet opening cannot be rescued by better capture or finish. ARSPURA treats width as a live variant, keeps IQV, mounting and cleaning in one product story, and offers installation only after that configuration is set.
Project context
Define how customers choose before defining the storefront
Buyers confirm width and mounting before comparing P1, P2 and F1 capture, controls, sensing and finish. Dimensions, installation video, IQV explanation, cleaning, reviews and professional installation reduce purchase error.
Shopify PDP frontend, technical content modules, model comparison, installation guidance and responsive buying UX.
Let a 36-inch choice rewrite the drawings and the line item
After the cabinet opening is chosen, hero media, dimension art, specifications and the cart line have to resolve to that width together.
- 01Confirm the kitchen opening
- 02Select the matching width variant
- 03Refresh media, specs and availability
- 04Submit that variant to the cart
Implementation
- Width and finish are product variants, so fit-critical dimensions are not left to rich text alone.
- product-info.js, media-gallery.js and product-form.js follow one variant change, so drawings and the buy form stop calculating the current configuration separately.
- P1 and P2 comparison reads the same width, mounting and capture fields instead of one-off PDP copy.
Deployment and acceptance
- Dimension art and specification copy sit in merchandiser-editable sections and blocks.
- Media and form components rebind after theme-editor updates so width switching still works in preview.
- The native Shopify product form remains the fallback when scripts fail.
- Changing width updates the drawing in view and the configuration that enters the cart.
- Later models can join the same path by reusing the width variant and shared field set.
View script and Shopify API evidence
product-info.jsmedia-gallery.jsproduct-form.jsSmoke paths and drawings do the choosing; kitchen scenes only prove the fit
Lifestyle photography shows the hood in a cabinet. Capture paths, cutaways and readable dimension art are what make the purchase defensible.
- 01Prove cabinet integration
- 02Explain IQV through smoke and structure
- 03Zoom the drawing to check mounting
Implementation
- Smoke paths, cutaways and dimension art sit on the selection path; kitchen scenes only prove how the hood sits in the run.
- The 36-inch width stays readable in the hero crop, thumbnails and specification cluster, not only in the product title.
- Media badges, sold-out and add-to-cart keep distinct states; product-modal.js opens dimension art on small screens so mounting height is not trapped in a thumbnail.
Deployment and acceptance
- Installation drawings, specifications and cleaning copy remain editable on the product template rather than hardcoded in the buy path.
- media-gallery.js remounts after theme-editor media updates so drawing changes still paginate in preview.
- Shoppers can judge installability and capture in one reading sequence before they commit.
- As the technical story lengthens, width and mounting stay available to check.
View script and Shopify API evidence
media-gallery.jsproduct-media-badge.jsproduct-modal.jsSwiper 11swiper-min-js.jsAdd professional installation after the hood is chosen, not as unbuyable copy
Once the hood variant is set, installation and accessories enter the cart as their own products, with coverage, delivery and warranty sitting next to the purchase action.
- 01Lock model and width
- 02Surface install and accessories
- 03Add service and hood together
- 04Check delivery, warranty and pickup beside the action
Implementation
- Installation and accessories are related products, not a paragraph fused to the hood variant.
- The PDP calls the Product Recommendations API from the active hood context so install options appear after configuration is set.
- cart-drawer.js uses Cart Ajax add, change and update so the hood and the install remain separate, editable line items.
Deployment and acceptance
- Recommendations load asynchronously and never block price or add-to-cart if the request fails.
- Coverage, delivery windows and appliance-standard notes are merchandiser-editable beside the buy cluster, not only on a generic FAQ.
- pickup-availability.js renders pickup state; the public market stays United States English and USD.
- The cart can separate hood configuration from installation, so fulfilment can follow each line.
- Delivery and warranty that belong to this purchase are visible before checkout.
View script and Shopify API evidence
Product Recommendations APIcart-drawer.jsCart Ajax: addCart Ajax: changeCart Ajax: updatepickup-availability.jsOperational handoff
The operating team can continue after launch
- The live catalog is an installed hood range. Series and width are the buying axes, with models such as the ARSPURA 36 P1 IQV and 36 P2 IQV isolated on home and product pages.
- Width and finish belong on variants. Installation and accessories are related products so they can hold their own inventory and service copy.
- Capture, ducting, controls and cleaning stay in the content layer. P1 and P2 comparison should read one field set rather than ad-hoc PDP prose.
- The public market is United States English and USD, with checkout preloads on en-US and mounting copy in US units.
- Installation coverage, delivery notes and appliance-standard language stay merchandiser-editable beside the purchase cluster, not hardcoded in the product form.
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
Related service: Shopify storefront design and frontend development