# Install & Repair Guides — Reasoning & Recommendations **Companion to:** [feature-design-guidelines.md](feature-design-guidelines.md), [volume-discount-concepts.md](volume-discount-concepts.md) **Live preview:** PDP at https://demo.thecxlabs.com/v2/pdp.html (click the *Guides & Videos* tab; on mobile, the floating button at bottom-right opens it) **Date:** May 2026 This document explains how to surface OEM-supplied installation and repair documentation — PDFs, videos, parts diagrams — on USA Clean's PDPs in a mobile-friendly way that makes the content actually findable. --- ## TL;DR Add a **"Guides & Videos" tab** to the PDP tab strip with a grid of doc cards: install PDFs, repair PDFs, install videos with thumbnails, parts diagrams, service bulletins. On mobile, surface a **sticky floating "Guides & Videos" button** that anchors directly to the tab — solves the "can't find the manual on my phone" problem that B2B techs run into in the field. The data layer is **BC Stencil Product Custom Fields + a few admin-managed file uploads per SKU**. No app required for the basic version. Videos are external embeds (YouTube unlisted or Vimeo). | Phase | Surface | Effort | |---|---|---| | **Phase 1** _(Pilot)_ | Guides & Videos tab on PDP with up to 8 doc cards per SKU. Mobile sticky button. Side-bar quick-link list (already on prototype) cross-references the same docs. | **Low** — Stencil custom fields + theme template edits | | **Phase 2** _(Iterate)_ | Doc auto-association by model (every part inherits its model's manual). Inline video player (modal) without leaving the PDP. Document version tracking. | Medium — admin automation + theme JS | | **Phase 3** _(Future)_ | Interactive exploded-view parts diagrams (click a part in the diagram → add to cart). Searchable doc index across the catalog. | Higher — typically a marketplace app or Catalyst-replatform candidate | --- ## Current state The current PDP shows a small "Documentation" sidebar list (Diagrams / Manuals / Bulletins / Videos / Repair Guides / Other Docs) with bare link entries. On mobile, this sidebar is below the fold — buyers can't find it without scrolling. The links also lead to a generic library page rather than the specific doc for the SKU being viewed. **Why it matters:** B2B field technicians often look up parts on their phone *while standing next to the broken machine*. If the install/repair PDF and the install video aren't 1-tap reachable, they call the support line instead — which costs USA Clean staff time and customer trust. --- ## References ### Grainger Per-product "Resources" tab with downloadable PDFs (SDS sheets, install instructions, spec sheets). No inline video. Mobile-responsive but no sticky access. ### McMaster-Carr Doc downloads live as inline icons on the PDP — direct links to the spec sheet, CAD file, and material certs. No video. McMaster's product detail page is the cleanest doc-access pattern in B2B. ### HD Supply Resources tab on PDPs with PDFs. Some products embed YouTube install videos. ### Tennant.com OEM site embeds install + maintenance videos inline on equipment pages. Strongest video pattern in the floor-cleaning B2B niche; lift directly. ### Home Depot "How-to" videos embedded inline with thumbnail + click-to-play modal. Their video pattern is the clearest mobile UX — sticky thumb that auto-pauses on scroll. --- ## What BC Stencil gives us - **Product Custom Fields** ([BC Help](https://support.bigcommerce.com/s/article/Product-Custom-Fields)) — unlimited custom name/value pairs per product. Map: `manual_pdf_url`, `install_pdf_url`, `repair_pdf_url`, `install_video_url`, `parts_diagram_url`, `service_bulletin_url`. Free, native, queryable in the product template loop. - **File uploads via Channel Manager** — PDFs stored as catalog assets. Get back a public CDN URL. Free. - **Catalog API** — `/v3/catalog/products/{product_id}/custom-fields` reads/writes the fields programmatically. Useful for bulk-importing the OEM doc library. - **Stencil templates** — `templates/components/products/` partials can iterate `product.custom_fields` and conditionally render any field that starts with `doc_` or `video_`. - **CDN** — Stencil's built-in CDN serves the PDFs fast globally; no third-party hosting needed for static docs. **Sources:** [BC Custom Fields](https://support.bigcommerce.com/s/article/Product-Custom-Fields), [BC Catalog API](https://developer.bigcommerce.com/docs/rest-management/catalog/products), [BC Stencil Product Template](https://developer.bigcommerce.com/docs/storefront/stencil/themes/product). --- ## Stencil limitations - **No native UI for grouping docs by type** in the product admin. Each custom field is loose — `install_pdf_url`, `repair_pdf_url`, `install_video_url` etc. — and admins maintain them by convention. Phase 2 could add a custom admin app or a Google-Sheet-driven import. - **No native video player.** Stencil renders the URL; the customer-facing UI either embeds a `