01TL;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, a sticky floating button 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 + 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. Sidebar quick-link list 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 manuals). Inline modal video player. Document version tracking. | Medium — admin automation + theme JS |
| Phase 3 Future | Interactive exploded-view parts diagrams (click a part → add to cart). Searchable PDF content across the catalog. | Highest — marketplace app or Catalyst-replatform candidate |
02Current 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.
03References
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 as inline icons on the PDP — direct links to the spec sheet, CAD file, and material certs. No video. 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. The clearest mobile UX — sticky thumbnail that auto-pauses on scroll.
04What BC Stencil gives us
- Product Custom Fields (BC Help) — 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. - File uploads via Channel Manager — PDFs stored as catalog assets. Public CDN URL returned. Free.
- Catalog API —
/v3/catalog/products/{product_id}/custom-fieldsfor bulk-importing the OEM doc library. - Stencil templates —
templates/components/products/partials iterateproduct.custom_fieldsand conditionally render any field that starts withdoc_orvideo_. - CDN — Stencil's built-in CDN serves PDFs fast globally; no third-party hosting for static docs.
05Stencil limitations
- No native UI for grouping docs by type in the product admin. Each custom field is loose; admins maintain by convention.
- No native video player. Stencil renders the URL only; embedding requires iframe (YouTube/Vimeo) or self-hosted MP4.
- No inline PDF viewer. PDFs open in a new tab or download. Phase 2 candidate (modal viewer).
- No version control on uploaded PDFs. Reuploading replaces the old; no revision history. Workaround: include date in filename +
doc_version_datecustom field rendered as metadata. - No native doc-search across the catalog. Searching "service bulletin 2026" via header search won't find the PDF unless its filename is indexed. Phase 3 candidate (Klevu, Searchspring, or Catalyst).
06App marketplace shortlist
| App | What it does | Worth it now? |
|---|---|---|
| (Native) Product Custom Fields + Theme templates | Renders any doc URL configured in the admin. | ✓ Use this |
| FAQ Pro by Hulkapps | Inline FAQ + doc-link block per product. | Maybe — for Q&A pattern |
| Brightcove Video Cloud | Enterprise video hosting with adaptive streaming. | Skip — overkill |
| YouTube Unlisted + iframe embed | Free, fast, accessible. No login required. | ✓ Use this for video |
| Klevu / Searchspring | Site search that indexes inside PDF content. | Phase 3 |
07Caster impact
- New pattern
.doc-grid+.doc-card— responsive doc grid with--pdf(light dashed thumb) and--video(dark play-overlay) variants. Promote to Caster/patterns/now — already has 2 consumers (PDP + Model Landing). - New mobile pattern
.docs-mobile-sticky— floating action button hidden above 760px. Standard mobile B2B field-tech UX. - Sidebar .pdp-docs stays as the quick-link index; the tab content is the rich primary surface. Both kept by intent.
08Phased recommendation
Inventory the OEM doc library by SKU. Populate up to 6 custom fields (install_pdf_url, repair_pdf_url, install_video_url, parts_diagram_url, service_bulletin_url, plus 1–2 spares). Render the tab. Add the mobile sticky button.
What "winning" looks like: measurable drop in "where's the manual?" support tickets. Increased PDP time-on-page for SKUs with video. Mobile sticky button click-through ≥ 8% on phone visits (proxy for "I'm at the machine, I need the manual").
Most parts share their model's manuals. The compatible_models[] field (already needed for Model Landing Pages) lets us auto-pull the model's master doc set when the part has no SKU-specific overrides. Halves the merch effort for new SKUs.
Trigger: ≥30 new SKUs/month and merch can't keep up with doc-tagging per SKU.
Also Phase 2: inline modal video player so users don't leave the PDP for YouTube.
PDF-content search via Klevu/Searchspring — header search indexes inside PDFs. Stencil-feasible.
Interactive exploded-view diagrams — click a part in the diagram → add to cart. Either an app like 3DProductPlatform or a Catalyst-replatform feature.
09Implementation notes
Field convention (admin-side)
| Field name | Type | Example |
|---|---|---|
install_pdf_url | URL | https://cdn.bigcommerce.com/.../install-brush-20-soft.pdf |
install_pdf_meta | Text | "2 pages · 480 KB" |
repair_pdf_url | URL | https://... |
install_video_url | URL (YouTube/Vimeo) | https://youtu.be/XXXX |
parts_diagram_url | URL | https://... |
service_bulletin_url | URL | https://... |
service_bulletin_date | Date | 2026-05-01 |
Stencil partial
templates/components/products/guides-tab.html iterates the custom_fields object and renders a doc-card for each populated *_url. Skips empties.
Accessibility
- Each doc card is a real
<a>witharia-label="Download the [title] PDF, 2 pages, 480 KB"(or "Watch the [title] video, 4 minutes 32 seconds"). - Video thumbnails: descriptive alt text or
aria-labelon the parent link. - Mobile sticky button: explicit text + icon;
aria-label="Open Guides and Videos tab". - Respects
prefers-reduced-motionfor thumbnail hover animations.
Mobile
Doc cards stack to full width below 760px. Video thumbnails are 16:9 boxes; tapping opens YouTube in the mobile app (better than embedded player on mobile data).
Analytics
Per-doc click tracking. Which manuals get downloaded matters — drives Phase 2 prioritization (which manuals deserve "Quick add to cart from diagram?"). Mobile FAB click-through rate by category. Time-on-page differential for SKUs with video vs. without.
10Catalyst / replatform candidacy
Phase 1 ships well in Stencil. Custom Fields + template iteration is the natural pattern; no friction.
Phase 2 stays in Stencil with admin automation (a small script or sheet-driven import) that auto-populates fields for new SKUs based on their model assignment.
Phase 3 splits:
- Searchable PDFs can ship via Klevu/Searchspring on Stencil without a replatform. Cost-effective if catalog is large.
- Interactive diagrams are the Catalyst candidate. The hotspot-on-image-to-cart pattern is heavy on JS state and React's component model makes it tractable. Stencil can do it but the code becomes brittle. Plan for this in the headless rebuild.