---
title: Product listing
description: Retrieve and render products for category and brand pages using Luigi's Box.
slug: product-listing
docKind: hub
hub: product-listing
---

You can use Luigi's Box Product Listing to retrieve and render products for any product listing. The typical use-cases are category and brand pages which your end-users browse when navigating your website.

The main benefits include personalized display of products, ranking based on analytics feedback, and powerful merchandising features available in the Luigi's Box application.

## Choose your integration path

<div class="choice-container">
  <a class="choice-card" href="/product-listing/api/">
    <span class="choice-badge" data-recommended="true">Flexible path</span>
    <h3>Product Listing API</h3>
    <p>Use the HTTP API when you need custom category logic, hierarchical filters, and backend-level control over listings.</p>
    <ul class="advantages-list">
      <li>Best for custom storefronts and backend rendering.</li>
      <li>Supports hierarchical listing logic well.</li>
      <li>Allows merging Luigi's Box data with internal sources.</li>
    </ul>
  </a>
  <a class="choice-card" href="/product-listing/search-js/">
    <span class="choice-badge">Fast storefront path</span>
    <h3>Search.js</h3>
    <p>Use Search.js when you want to reuse Luigi's Box frontend components for category or brand pages on the web.</p>
    <ul class="advantages-list">
      <li>Quick to launch on storefront pages.</li>
      <li>Reuses the same library as Search.js search pages.</li>
      <li>Good fit when the browser owns the UI.</li>
    </ul>
  </a>
</div>

## Start here

<div class="lb-overview-links">
  <p>
    <strong>Still choosing the architecture?</strong>
    Start with <a href="/quickstart/product-listing/understanding-plp/">Understanding product listing</a>.
  </p>
  <p>
    <strong>Want the fastest storefront integration?</strong>
    Continue with <a href="/quickstart/product-listing/with-searchjs/">Building a product listing page with Search.js</a>.
  </p>
  <p>
    <strong>Need full control over category behavior?</strong>
    Continue with <a href="/quickstart/product-listing/building-custom-plp/">Your first API-powered product listing</a>.
  </p>
</div>

## Core concepts

- **Personalized ranking:** Products are ranked based on a feedback loop provided by analytics. This allows for a personalized display and respects all merchandising rules you have set up.
- [**Pairing:**](/product-listing/guides/pairing/) To use product listing, you must provide a mapping between categories and products. The default mapping expects your category object to contain an `id` attribute and your product object to contain a `category_id` attribute.
- **Hierarchical filtering:** When dealing with hierarchical categories, you can use special filters like `category_path` and `all_categories_path`. Individual categories in the hierarchy should be separated by a double pipe `||`.