Mock S · Component plan — Skeleton, Horizon, manufacturing-new

• fullDefault — all rows, grouped headers, US/metric toggle.
• comparable-onlyOnly rows where comparable: true. Used in Compare and quick-view drawer.
• compactInline summary — six most important rows, no group headers. Used on product cards (Column B).
• printAll rows, no interactive controls, optimized for letter-sized PDF. Used by <print-spec-sheet>.

State: a unit-system toggle (US ↔ Metric) at the top right; selected state persisted to localStorage as preferred-unit-system. Variant-aware: when the variant picker changes, rows with applies_to_variants mismatching the current variant disappear; rows with a variant override re-render with the override value.

• spec-table:unit-changedFires when user toggles US ↔ Metric. Other spec-table instances on the page sync. Bubbles to document.
• spec-table:row-highlightedFires when user clicks a row to deep-link / share. Optional anchor scroll behavior.

• grouped-by-typeDefault — collapsible groups by document_type (Manuals, Datasheets, Drawings, Certifications, etc.).
• grouped-by-audienceAlternative — groups by who needs it (Installers, Engineers, Maintenance). Used on the support hub.
• flat-listNo grouping — simple chronological-by-revision-date list. Used in compact contexts.
• filter-barAdds a horizontal filter chip row at the top — toggle by type, audience, language. Used on Mock T.

• type iconSVG icon matching document type (manual / sheet / drawing / cert / SDS).
• titleFrom document.title. Heading for the card.
• descriptionFrom document.description, ~80 chars.
• file size + format"PDF · 2.4 MB" from file_size_bytes + file extension.
• version + revision date"Rev 3.2 · Aug 14, 2025" from version + revision_date.
• language pillEN / ES / FR / DE etc. from language. Hidden when EN-only and merchant config disables.
• audience tagsFrom audience list. Optional, configurable per merchant.
• download CTAPrimary button — direct file link or external_url. Opens in new tab.
• preview thumbnailFrom thumbnail if set, or auto-generated from PDF page 1 at render.

• desktopN-column grid, first column is row labels. Up to 4 products at a time.
• mobileHorizontal scroll. First column (row labels) sticky-left.
• differences-only filterToggle to hide rows where all compared products have the same value. Surfaces only the differentiators.
• printLandscape letter, optimized for vendor approval submission. Header includes product images and SKUs.

• add columnSearch-as-you-type product picker. Adds to URL query string.
• remove column×-button per column header. Removes from URL query string.
• unit toggleUS ↔ Metric, syncs with <spec-table> via shared event.
• share URLCopy-to-clipboard with the current state encoded.
• export PDFTriggers print stylesheet with comparison layout.

• grouped-by-relationship-typeRequired accessories first, then optional accessories, then replacement parts, then consumables. Default on PDP.
• flat-gridSingle grid of part cards, sorted alphabetically. Used on Mock K parts-by-model where relationship type is less relevant.
• matrix-with-modelsFor Mock K — rows are parts, columns are parent variants, cells indicate fitment. Cross-product compatibility view.

Variant-aware on PDP: when the parent variant picker changes, the matrix re-queries to show only parts that fit the new variant. Implemented via a debounced fetch with a brief loading state on the matrix region.

Three-to-six step flow per intent path. Each step asks one question with 2-5 answer chips. Selected answer either advances to next step or branches to a different sub-path. Final step shows candidate count and "See n matching products" CTA, which navigates to the collection with filters applied.

State persists in URL query string — ?path=cnc-sump&step=2&a1=oil&a2=large — so deep-linking to a mid-flow state works, and bookmarking partial progress is viable for buyers who pause to grab specs from their shop floor.

• card-gridEach step renders as a grid of large answer cards with icon + label + description.
• chip-rowCompact alternative for steps with 2-4 simple answers.
• progress-railTop-of-component breadcrumb showing path + steps completed. Click any prior step to revise.
• results-previewLive count of matching products updates as buyer narrows. "37 products match → 12 match → 4 match" feedback.

None directly — the component scans the page for sections matching a configurable selector (default section[data-page-nav]) and reads each section's id and data-page-nav-label attribute. No metaobject data required. Section authors opt in by adding the attribute when they want a nav anchor.

• desktop-left220px wide left sidebar, sticky from top of content. Section labels with scroll-spy highlight.
• mobile-barHorizontal scrollable chip row sticky-to-top below header. Same scroll-spy logic.
• collapsedSingle "On this page" disclosure that expands on click. Used when vertical space is constrained.

State: current section highlighted as the user scrolls (IntersectionObserver). Click on a nav item smooth-scrolls to the section and updates the URL hash without a page reload.

• product + variantAuto-filled from PDP context. Hidden if launching from contact page.
• quantityNumber, defaults to 1.
• company nameRequired.
• contact nameRequired.
• emailRequired, validated.
• phoneOptional.
• timelineSelect — "ASAP / 1-2 weeks / 1 month / 3 months / 6+ months". Required.
• notesFree-text, optional. Custom requirements, special configurations.

On submit: POST to a theme app proxy endpoint that creates the Draft Order via Admin API draftOrderCreate. Buyer info goes to the order's customer field; product/qty goes to line items; notes go to order note. Merchant receives email notification, sees order in admin, adjusts price as needed, sends invoice — buyer pays via the Shopify invoice flow.

Confirmation: post-submit, show success state with "We'll respond within one business day" copy. Send buyer a confirmation email via Shopify Email or transactional service. The buyer's email is opted in for transactional follow-up only, not marketing.

• inlineCompact 3-4 row table inside the PDP buy-box area. Default.
• expandedFull table with per-tier price, savings amount, "you save $X" call-out. Used as a stacked section below buy-box.
• current-tier-highlightAs buyer changes quantity, the active tier highlights. Real-time savings number updates above the cart button.

• thumbnailFrom thumbnail field or fetched from platform.
• duration badgeBottom-right overlay, "3:07" from duration_seconds.
• type pillTop-left overlay — Install / Demo / Tutorial / Troubleshooting.
• titleFrom title.
• descriptionFrom description, 1-2 lines.
• audience tagsFrom audience. Optional, configurable.
• transcript expandIf transcript set, a "Read transcript" disclosure expands inline. Critical for SEO and accessibility.
• chapter markersIf chapters set, render as a clickable list below the video. Clicking jumps to the timestamp.

• thumb-then-embedDefault — thumbnail with play overlay. Click loads the iframe embed (saves load time, avoids YouTube cookie load on initial render).
• modal-playerClick opens video in a modal overlay. Used in dense grids.
• inline-autoplayHero variant for featured videos — autoplays muted on viewport entry. Used sparingly.

• stackedVideos section, then documents section, stacked vertically. Default for narrow viewports and individual product views.
• two-colVideos left, documents right. Used at wide viewports when both lists are substantial.
• tabsVideos tab and Documents tab. Used when one or the other is very long. Tabs share URL state for deep-linking.
• library-listFor Mock T — products listed alphabetically by family, each with its videos+docs section. Filterable by product family at the top.

On Mock T, a sticky filter rail at the top of the page lets the user narrow by product family (Tube skimmers, Belt skimmers, Coalescers, Refractometers, etc.), by resource type (Videos only, Documents only, Both), by audience (Installer, Engineer, Maintenance), and by language. Filter state is in URL query string so the page is shareable and search-engine-crawlable in pre-filtered states.

• productsTitle, SKU, thumbnail, price, stock-state pill. Up to 6 results.
• variantsIf a search matches a SKU exactly, the variant surfaces above the product — "ZVA8-11 (variant of Tube Oil Skimmer)" with direct cart-add.
• documentsMatch against product_document.title and description. Up to 3 results.
• articlesMatch against blog article title and content. Up to 3 results.
• faqsMatch against faq_item.question. Up to 3 results.
• glossary termsMatch against glossary_term.label + alternate_names. Up to 3 results.

When the user is currently on a PDP (or has a product context in session — e.g., they came from a QR scan on a product), the search header gains a "Searching parts that fit ZVA8-08" filter chip. The chip can be dismissed to revert to global search. Implementation: chip state in sessionStorage with the parent variant ID; search query adds a metafield filter for fits_products contains.

• emptyBefore typing — popular searches, recent searches (from localStorage), featured product.
• typingLive results as user types, debounced at 200ms. Grouped by type.
• no-resultsHelpful no-results state — "Try searching by SKU, model number, or browse our catalog by product family". Links to Find Your Fit wizard.