---
title: Product listing quickstarts
description: "Everything you need to build fast, interactive browsing experiences for your categories, brands, and promotions using Luigi's Box product listing."
slug: quickstart/product-listing
docKind: hub
hub: quickstart
---

Product Listing supports the same two implementation styles as Search: a fast Search.js path for storefront pages and a direct API path for fully custom listing experiences.

## Choose your path

<div class="choice-container">
  <a class="choice-card" href="/quickstart/product-listing/with-searchjs/">
    <span class="choice-badge">Fast storefront path</span>
    <h3>Search.js</h3>
    <p>Use Search.js when you want to stand up category and brand pages quickly with filtering, sorting, and pagination built in.</p>
    <ul class="advantages-list">
      <li>Fastest way to ship listings on the web.</li>
      <li>Shares tooling with Search.js search pages.</li>
      <li>Good fit when the browser owns the rendering.</li>
    </ul>
  </a>
  <a class="choice-card" href="/quickstart/product-listing/building-custom-plp/">
    <span class="choice-badge" data-recommended="true">Flexible path</span>
    <h3>Product Listing API</h3>
    <p>Use the API when you need custom category logic, hierarchical navigation, or tighter control over backend-rendered pages.</p>
    <ul class="advantages-list">
      <li>Lets you shape listing pages exactly as needed.</li>
      <li>Works well for complex category hierarchies.</li>
      <li>Fits custom storefronts and backend integrations.</li>
    </ul>
  </a>
</div>

## Quickstart collection

<div class="lb-guide-group">
  <p class="lb-guide-kicker">General</p>
  <h3>Start with the architecture</h3>
  <p>Understand the product listing feature and choose the right technical direction.</p>
  <div class="lb-guide-grid">
    <a class="lb-guide-card" href="/quickstart/product-listing/understanding-plp/">
      <h3>Understand product listing</h3>
      <p>Review the feature set, merchandising model, and the main integration paths.</p>
    </a>
  </div>
</div>

<div class="lb-guide-group">
  <p class="lb-guide-kicker">Search.js</p>
  <h3>Frontend library path</h3>
  <p>Choose this when you want to reuse Search.js to render listing pages.</p>
  <div class="lb-guide-grid">
    <a class="lb-guide-card" href="/quickstart/product-listing/with-searchjs/">
      <h3>Build a listing page with Search.js</h3>
      <p>Launch a product listing page quickly with Search.js and a category context.</p>
    </a>
  </div>
</div>

<div class="lb-guide-group">
  <p class="lb-guide-kicker">API</p>
  <h3>Custom implementation path</h3>
  <p>Use these guides when you want to build the listing flow yourself.</p>
  <div class="lb-guide-grid">
    <a class="lb-guide-card" href="/quickstart/product-listing/building-custom-plp/">
      <h3>Your first API-powered listing</h3>
      <p>Render a minimal listing experience directly from the product listing API.</p>
    </a>
    <a class="lb-guide-card" href="/quickstart/product-listing/navigable-category-page/">
      <h3>Build a navigable category page</h3>
      <p>Add breadcrumbs, subcategory navigation, filters, and pagination to the API flow.</p>
    </a>
  </div>
</div>