Equipment PDP & Compare — Reasoning & Recommendations

01TL;DR

The live equipment PDP is a parts-page template misapplied to a $4,295 machine. Its Specifications tab contains exactly one row — "Vendor: USACLEAN". The real specs exist, but in a 6.6 MB image-only PDF on a different domain whose header advertises "Shop Now at Amazon.com". The page claims a 12-month warranty while that PDF says 5-year parts / 2-year labor — the best number in its class, buried and contradicted. "May Fit These Models" and "Alternate Part Numbers" render as empty lists. There is no quote path, no reviews, no financing, no breadcrumbs, and no way to compare the six X-series machines that form an obvious size/price ladder.

Two full concept PDPs and a complete comparison experience are now built in the prototype:

• Option A — "Spec-forward self-serve" (v2/equipment-pdp-a.html): everything a self-serve buyer needs to say yes without calling. Real 9-photo gallery, grouped dual-unit spec table (imperial ⇄ metric), warranty banner up front, commonly-replaced-parts rail with real SKUs and prices, 5-year cost-of-ownership table, mini-compare, quote + expert CTAs beside Add-to-cart.
• Option B — "Guided / consultative" (v2/equipment-pdp-b.html): fit before specs. Outcome-first hero, request-a-quote as the primary CTA, a named expert card, a working "Will it fit your facility?" calculator that happily down-sells ("at 6,000 ft², buy the $1,999 X13B instead"), the six-model ladder strip, financing framing, FAQ. Specs collapse to reference accordions.
• Compare experience (ships with either option): compare checkboxes on a new equipment listing, a persistent tray (localStorage), and a compare page with a sticky buy-box row, grouped spec rows, an only-show-differences toggle, imperial/metric toggle, add/remove on-page, print sheet, and a shareable ?skus= URL.

Decision of record: pending — no client decision yet; will be logged as PD-005 in docs/decisions.md.

02Current state

Teardown of the live X20BT page (shop.usaclean.com/20-inch-500mm-floorcare-biz-x20bt-341-0318/), verified July 2026:

• The Specifications tab contains one row: "Vendor: USACLEAN." The actual spec data (tanks, pad pressure, motors, dimensions, warranty) exists only in an off-site PDF viewer at usaclean.com/pm/pdfview.aspx — a 6.6 MB image-only InDesign export with no text layer (unreadable to search engines and screen readers) whose header banner reads "Shop Now at Amazon.com".
• Warranty contradiction. On-page copy: "a full 12-month warranty." The manufacturer spec sheet: 5-year parts / 2-year labor. The better, true number is the one buyers never see.
• Parts-template artifacts everywhere. A "Genuine OEM replacement part" badge on a whole machine; "Material Guide" / "User Guide" buttons that link to generic squeegee PDFs; "May Fit These Models" and "Alternate Part Numbers" sections that render as empty lists.
• Naming and metadata. The product title is SKU-stuffed ("20 inch (500mm) FLOORCARE.BIZ X20BT 341-0318"); the meta description is literally 341-0318; there are no breadcrumbs.
• No considered-purchase support. No reviews, no Q&A, no request-a-quote, no financing — for a $4,295 order with $350 fixed freight presented without explanation. Empty MSRP/"Was"/"You save" scaffolding renders as clutter.
• The good content is trapped. Page 2 of the PDF is a "Commonly Replaced Parts" grid — 14 real SKUs. A page-builder widget duplicates 9 of them inconsistently. USA Clean's single biggest differentiator (the parts moat) rendered as an afterthought in two places.
• No comparison support — even though the Floorcare.biz line is a clean ladder: X13B 13" $1,999 → X15B 15" $4,357 → X20B 20" $3,595 → X20BT 20" traction $4,295 → X26BT 26" $6,595 → X26R rider $5,625.

03References

Global Industrial — the comparison experience to beat

The reference the client pointed at, and deservedly: category list pages have per-row Compare checkboxes feeding a "Select 2–4 items" tray, and the compare page pins a buy-box row (image / price / qty / Add) above aligned spec rows. Their PDP groups specs into three named categories (Weights & Dimensions / Product Details / Compliance & Certifications), opens the description with three check-marked USPs, and backs it with 25 photos, a dedicated dimensions diagram, three YouTube videos (including unboxing), typed document links, and 30 reviews on the $2,299 machine that competes with the X20BT.

Weaknesses worth exploiting: the compare page is a flat dump (no grouping on compare, no differences-only view, no unit toggle, no on-page add/remove), spec values stop at the machine (nothing about parts availability or lifetime cost), and there is no honest downsell anywhere.

CleanFreak — the relationship patterns to lift

The second client reference. Its scrubber-package PDP surfaces financing (QuickSpark + Shop Pay installments) at the point of decision, a package-contents table with per-item stock honesty ("In Stock" vs "Special Order — ships 1–3 wks"), accessories organized by function relative to the machine with compatibility notes, an on-page Troubleshooting section, persistent "Talk with an Expert" blocks, and a link out to a floor-scrubber comparison chart. It proves the consultative register works in this category — that's the DNA of Option B.

Where the concepts beat both

1. Warranty as the headline — 5-yr parts / 2-yr labor is roughly double Global's coverage; both concepts put it in a banner, the compare page gives it a celebrated group.
2. The parts moat, productized — a commonly-replaced-parts rail with real SKUs, prices, stock badges, and replacement intervals; and a Parts & support compare group ("wear parts stocked in USA", "same-day shipping") that Global structurally cannot populate.
3. 5-year cost of ownership — machine + pads + blades + battery set at year 3, priced with real catalog SKUs. Nobody in the category shows this.
4. A calculator that down-sells — Option B's fit calculator recommends the $1,999 X13B when the facility is small. Trust-building no big-box competitor will copy.
5. Compare mechanics — only-show-differences toggle, imperial ⇄ metric everywhere, add/remove on the compare page, shareable URL, print sheet (a facilities manager forwards the link to whoever signs the PO).
6. On-domain, typed documentation — spec sheet / manual / warranty / battery guide as first-class cards, not an Amazon-branded PDF viewer.

04What BC Stencil gives us

Almost all of Phase 1 is configuration and data entry on capabilities USA Clean already pays for:

• Native product compare. Cornerstone ships a compare feature: category pages render per-product Compare checkboxes (theme setting show_compare), feeding a compare page at /compare/<id>,<id>,<id> rendered by templates/pages/compare.html. The entry-point mechanics of the whole experience — checkbox → selection → compare URL — are free. The prototype's ?skus= URL is deliberately isomorphic to BC's /compare/ route.
• Product custom fields (name/value pairs, ≤250 chars each) render natively in the product-details tab — enough to put every spec-sheet value on the page in Phase 1. A Group|Label naming convention (e.g. Performance|Cleaning path) lets a small theme edit render them grouped, exactly like the prototype's spec table.
• Metafields (POST /catalog/products/{id}/metafields, namespaced) for the structured version: grouped, dual-unit spec data (usaclean.specs namespace) that the Phase-2 custom compare template reads. Custom fields are the display fallback; metafields are the data model.
• The warranty product field renders as its own tab in Stencil themes — the 12-month contradiction is literally a one-field data fix.
• Related products (manual or auto) → seeds the "Compare with similar" module and the compare page's "+ Add model" list.
• Product videos — YouTube attached per product, rendered in the gallery. The unboxing/setup video slot exists natively.
• Native product reviews — built-in, off by default; enable + solicit post-delivery. Zero app cost to start.
• B2B Edition request-a-quote — quote submission and management ship with B2B Edition. The "Request a quote" buttons across all four prototype pages are configuration, not build.
• The photography already exists in BigCommerce. All 9 X20BT photos and every sibling hero used in the prototype are hotlinked from USA Clean's own cdn11.bigcommerce.com store CDN — proof the gallery is a template fix, not an asset project.

05Stencil limitations

What native BC + stock admin cannot do for this feature, specifically:

1. Native compare is a flat attribute table. compare.html renders an ungrouped field list: no spec grouping, no sticky buy-box row, no only-show-differences toggle, no unit toggle, no add/remove on the compare page itself, no shareable state beyond the URL path. Everything that makes the prototype's compare page better than Global's requires a custom template + JS module.
2. Custom fields are flat 250-char strings. No grouping, no units, no ordering guarantees — grouping requires the naming-convention hack or metafields, and stock Stencil templates don't read metafields; a Phase-2 template edit does.
3. No financing UI. "$94/mo" framing, rate checks, and applications need a B2B financing app or partner embed.
4. No calculator primitives. The fit calculator and cost-of-ownership math are custom storefront JS wherever they ship (the prototype's ~60 lines of vanilla JS prove the scale of the problem).
5. Compare selections aren't a persistent object. Native compare state lives in the URL only; the prototype's cross-page tray (localStorage) is custom behavior.
6. No quote-PDF / printable sheet generation — the prototype's print stylesheet is the Phase-1/2 answer; generated documents are Phase 3.

06App marketplace shortlist

07Caster impact

Nothing is promoted in this phase. The two PDPs are mutually exclusive concept variants — one dies after PD-005 (precedent: PD-001 killed bundle Concept C) — so promoting shared patterns now would enshrine CSS for a layout that may not survive. All new CSS is inline per page (guidelines rule #7) with SHARED CANDIDATE marker comments at each block.

Promotion queue once PD-005 lands (2nd-consumer rule satisfied — these blocks are already duplicated across the concept pages):

Consumed unchanged from Caster: .btn, .pill, .stock-badge, .qty-stepper, breadcrumb pattern, .pdp-price/.pdp-atc, site chrome. The .concept-ribbon switcher is prototype chrome and is deleted, not promoted. Cache-bust stays ?v=0.16.3 — components.css was not touched.

08Phased recommendation

Phase 1 — fix the data, ship native (1–2 months)

Populate spec custom fields for all six machines from the existing PDF data; correct the warranty field (5-yr parts / 2-yr labor); host the spec sheet, manual, and warranty PDFs on-domain as typed links; fix product titles/meta descriptions/breadcrumbs; wire related products across the X-series ladder; enable native compare checkboxes on equipment categories; turn on B2B Edition request-a-quote and native reviews. No custom code; optionally one small template loop to render grouped custom fields like the prototype's spec table.

Phase 2 — the custom compare + moat modules (data-gated)

Build the custom compare template to the prototype's spec (grouped metafield-driven rows, sticky buy row, only-differences + unit toggles, add/remove, share URL); add the commonly-replaced-parts module to equipment PDPs (the parts catalog is the data source — cross-referenced by machine, with stock status and intervals); add the cost-of-ownership table (computed from the same parts data); embed the financing app. Promote the queued Caster patterns.

Phase 3 — guided selling (future / Catalyst-era)

The fit calculator and model selector as production storefront modules (fed by real coverage data), quote-PDF generation from the compare page, and fleet-aware recommendations ("your T500e is at 1,247 hours — here's the trade-up math") that join this feature to the National Account program (account-phases).

09Implementation notes

• Data sources per module. Spec table: custom fields (Phase 1) → metafields usaclean.specs (Phase 2), dual-unit values stored as separate imp/met fields. Parts rail: parts catalog cross-referenced by machine (the "May Fit These Models" relationship, run in reverse); prices and stock live from the catalog — never hardcoded. Cost-of-ownership: computed from the same parts SKUs + configurable usage assumptions. Compare: metafields via the custom template.
• Prototype data honesty. X20BT specs are real (manufacturer sheet, order #341-0318); the five sibling models use real prices and real product photography but illustrative spec values (marked in js/equipment-compare.js) pending catalog data. Squeegee-set and pad-driver prices in the parts rail are illustrative; the other seven part prices are live catalog values.
• Images. All product photography is hotlinked from USA Clean's own BigCommerce store CDN (cdn11.bigcommerce.com/s-qrln235rlo/…, stencil sizes 320w/1280w) — a deliberate, documented break from the prototype's SVG-placeholder convention, per client request for real imagery. Every <img> carries explicit dimensions + loading="lazy" (no CLS, no waterfall).
• Accessibility. Spec tables use <th scope="row">; unit toggles are aria-pressed buttons; the tray is role="region" with an aria-live hint; accordions are native <details>/<summary>; compare remove buttons carry per-machine aria-labels.
• Analytics = the phase triggers. Instrument in Phase 1: compare_add, compare_view, compare_share, quote_click, spec_tab_open, and later calculator_use, unit_toggle. The graduation triggers in §08 are these events, not vibes.
• State model. Compare selection: localStorage.uc_compare (max 4) + URL param, URL wins — shareable in a fresh session, consistent with the tray across pages. The BC build should mirror this (native compare URL + a small persistence shim).

10Catalyst / replatform candidacy

• Phase 1 is pure Stencil — fields, settings, content.
• Phase 2 ships fine in Stencil. The prototype itself is the proof: the compare page and tray are ~300 lines of dependency-free vanilla JS + one template. Nothing needs a framework.
• Phase 3 is genuinely nicer in Catalyst — the calculator and selector as typed React components, server-side quote-PDF generation, and fleet-aware recommendations that want a real account data model. None of it is blocked on Stencil; it's just cleaner there.

11Sources