← ShowcaseFitFirst PartsEcommerce catalog / edge-devtools
See how it was builtView other demos

Concierge demo

FitFirstParts

No vehicle selected

Overhead studio shot of unbranded maintenance parts arranged on a neutral workbench: brake rotors, oil filter, spark plugs, serpentine belt, cabin air filter.

Seasonal maintenance event

Brake-and-fluid week

Curated picks across the brakes, fluids, and cooling categories. All demo-priced.

Step 1

Tell us what you drive.

Every page that follows is filtered to parts guaranteed to fit your vehicle.

Find parts for your vehicle

Demo

Every page that follows is filtered to parts guaranteed to fit the vehicle you choose here. Pick from the demo catalog below.

Pick your vehicle from the demo catalog

This is a demo storefront. The submit takes you to the parts list filtered to your selection; no order is placed.

Step 2 - shop by category

Set a vehicle above to filter the category.

What you can count on

Confirmed fitment

Every line item verified against your vehicle.

Free shipping $50+

Demo policy; 2-3 day in production.

30-day returns

No-questions return window.

Expert help

Fitment chat, demo-only.

Honest stock

Lead times never theatrical.

Featured maintenance parts

See the full catalog →

Hand-picked picks across the catalog.

This week’s deals

Demo-scoped seasonal picks. No real promotional pricing.

New arrivals

See the full catalog →

Recently added to the fitment-confirmed catalog.

Shop by popular make

See all parts →

Popular this season

See the full catalog →

Most-viewed parts across the demo catalog.

Services and programs

  • FitFirst Pro

    Volume pricing and account terms for shops and fleets. Demo-only application path.

    Learn about Pro

  • Oil change kit builder

    Bundle the synthetic oil, oil filter, and drain plug washer for your vehicle in one click.

    Build a kit

  • Free battery diagnostic

    Drop in at a participating demo location for a free state-of-charge test.

    Find a location

  • Pay over time, demo

    Spread a service over four interest-free demo payments. No real underwriting.

    See payment terms

Why fitment-first

Most parts sites treat fitment as a sidebar widget you can ignore until checkout. We make it the first decision and the only one that matters. Tell us what you drive, and we hide everything that does not fit. Returns drop, mechanics save time, and shop owners stop eating wrong-part shipping costs.

FitFirst Parts is a concierge demo built on the RampStack engine trinity. No real orders are processed.

Be the first to know about deals and fitment additions.

Demo signup; no email is ever sent in production.

RampStack

Built by the RampStack trinity

How FitFirst Parts was built

The four-stage workup behind this ecommerce catalog demo, summarized. Generalized and pattern-level; no named competitors. The full Format A spec and the verification log live in the operated-side run record.

Stage 01

Basano · competitor review

  • Primary-task prominence is the field-wide miss. The fitment selector, the visitor's actual primary job, is treated as a secondary widget on every audited storefront: small, low-prominence, often unlabeled, often in a sidebar or behind a modal. Rendered prominence scores measured below 1% of viewport area on the most-visited leaders. A storefront that makes fitment the dominant above-the-fold element owns the position the field leaves on the table.
  • Layout register reads catalog-dense, not marketing-airy, across the leaders. Above the fold the field carries a dense alphabetical or brand-grid surface, sometimes 100+ entries, treated as the page's primary navigation. The register is a working-surface storefront, not a SaaS-style landing page; a build defaulting to the airy hero-and-three-cards pattern reads off-vertical immediately.
  • Merchandising surfaces are persistent, not modal. Featured collections, promotional bands, and deal-of-the-week strips appear above or near the top fold across the field as fixtures; the leaders that bury merchandising in a dismissible welcome modal forfeit the storefront-density convention.
  • Trust signals appear as a chrome-level fixture, not a one-off marketing flourish. Reviews, guarantees, fitment confirmation, and shipping promises are visible to a first-time visitor without scroll; absent persistent trust signals, even sites with strong inventory read provisional.
  • Navigation paths are dual: the field expects both a known-part path (search input, primary in the header) and a browse path (by category, by brand, by vehicle). Sites that offer only one read as half-finished; sites that bury the vehicle-selector funnel under a brand grid surface the fitment problem the audit names.
  • Structured data is the field-wide miss on the technical axis. Most catalog homepages ship no JSON-LD at all, or ship Organization without Product, Offer, BreadcrumbList. Rich-result eligibility is forfeited.
  • Accessibility on functional iconography is brittle across the field: empty alt on link images, JS onclick handlers on images without keyboard equivalents, layout tables used for the header. Honest accessibility defects, not edge cases.

Stage 02

Krine · positioning

Position
Fitment-first storefront. Every page leads with the vehicle selector as the dominant element; parts of unknown fit are never shown.
Archetype
edge-devtools
Voice
Direct, technical, honest, plain, unsparing

Stage 03

Tholo · build plan

home

  • vertical-site-conventions
  • competitor-experience-audit
  • information-architecture
  • frontend-component-build
  • design-standards
  • seo-technical

parts (listing)

  • vertical-site-conventions
  • programmatic-seo
  • information-architecture
  • frontend-component-build

parts/[slug] (detail)

  • frontend-component-build
  • seo-technical
  • programmatic-seo

cart

  • frontend-component-build
  • information-architecture

about

  • landing-page-copy
  • frontend-component-build

Stage 04

Basano · verification

Holds(13)

  • Convention 1 - Persistent header with logo, search, cart, and account: all visible above the fold at 1280x800.
  • Convention 2 (density-bearing) - Fitment selector as primary above-fold action: the dominant above-fold element with a year/make/model dropdown and 'Show parts that fit' CTA. Fitment-first promise held.
  • Convention 3 - Promotional / announcement bar: dark strip below the header carries 'This week - Seasonal brake-and-fluid maintenance picks | Free shipping over $50' above the fold.
  • Convention 4 - Category browse grid with imagery: 5-tile grid with photographic category tiles (Brakes, Filters, Ignition, Fluids, Belts and hoses), visible below the fitment section at 1280x800.
  • Convention 5 - Common parts / featured-rail merchandising block: 'Common maintenance parts' heading present with the 4-SKU rail showing image, brand, price, and fitment confirmation badge per card.
  • Convention 6 - Heading hierarchy: exactly one H1, then H2 / H3 in correct sequence with no skipped levels.
  • Convention 7 - Image alt coverage: 9 of 9 images carry alt text.
  • Convention 8 - Skip-link and landmark structure: skip-to-content link, header, nav with aria-label, main with id=main-content, aside with aria-label all present.
  • Convention 9 (density-bearing) - Catalog scope and density signal above the fold: the announcement bar exposes the parts-count badge ('6 fitment-confirmed parts / 5 categories') directly above the fold as a chrome-level fixture. Demo-honest about scope; the signal is visible immediately.
  • Convention 10 (density-bearing) - Promotional / deal surface near the top: held by the same announcement strip's 'This week' label and seasonal promo callout.
  • Working client-side cart, real interaction throughout, demo-only checkout modal clearly labeled. Cart count surfaces via a screen-reader-only label in the header link.
  • Title tag and meta description within the conventional length window. JSON-LD CreativeWork, Organization, and WebSite types present.
  • Robots meta noindex/nofollow recognized as intentional for the demo, not a defect.

Fails(6)

  • Button contrast - Fork A sampler artefact (flagged at high). The rendered-capture sampler reports two buttons as white-on-white at 1:1 ratio; the model honestly notes the rendered screenshot shows white text on dark buttons and the sampler measurement is wrong. PR #6 fixed the tsx serialization and one class-styled case but a residual edge case remains; the contrast is fine in reality.
  • H1 keyword relevance: 'Tell us what you drive' is a UX prompt rather than a keyword-bearing headline. Stronger for the primary task; weaker for topical relevance. Judgment item, surfaced for human.
  • Structured data type appropriateness: schema uses CreativeWork rather than AutoPartsStore or Store. For a parts storefront a commerce-oriented schema type would match better; the demo's record is a worked-example artifact, so CreativeWork is defensible.
  • Primary above-fold candidate prominence: the layout engine identifies the showcase meta-layer's 'How this was built' overlay pill (0.69% prominence) as the most prominent above-fold button rather than the fitment CTA. The meta-layer is intercepting the prominence measurement; the fitment CTA visually dominates the actual layout. Worth surfacing as a meta-layer prominence consideration, not a build defect.
  • Duplicate fitment-explanation copy in the hero left column and inside the fitment card. Small redundancy worth trimming in a polish pass.
  • Intentional noindex and nofollow (correct for the demo, flagged against a production-ready standard; the model marks this as not-a-defect-in-context).

Not assessable(5)

  • Reflow at 320 CSS px (WCAG 1.4.10). Viewport capture is at 1280x800; narrow-viewport evidence requires a second capture run.
  • Content depth beyond the visible HTML excerpt. The model sees a partial rendered DOM; lower-page modules are partial.
  • Per-product review counts. The home does not surface reviews on the featured rail; whether reviews live on the detail pages is not visible from the home audit alone.
  • Body-text contrast. The rendered sampler covers only buttons and class-styled CTAs; body text contrast is not sampled.
  • Motion / animation prefers-reduced-motion compliance and runtime form-error patterns; both require runtime evidence the static-plus-screenshot capture does not carry.
See the full workupAll business demos