---
title: Search quickstarts
description: "Welcome to the Search quickstarts section of the Luigi's Box documentation. This collection of quickstarts provides everything you need to build a comprehensive and high-performing search results page, helping users find exactly what they're looking for with speed and precision."
slug: quickstart/search
docKind: hub
hub: quickstart
---

Search can be integrated through Search.js for a fast storefront implementation or through the Search API when you want complete control over the rendering layer. These guides help you choose the path first, then deepen the integration.

## Choose your path

<div class="choice-container">
  <a class="choice-card" href="/quickstart/search/integrating-searchjs/">
    <span class="choice-badge" data-recommended="true">Recommended for web</span>
    <h3>Search.js</h3>
    <p>Use Luigi's Box's frontend library when you want a full search page with filters, sorting, and analytics out of the box.</p>
    <ul class="advantages-list">
      <li>Fastest path for storefront teams.</li>
      <li>Built-in filtering, pagination, and campaigns.</li>
      <li>Automatic analytics reporting.</li>
    </ul>
  </a>
  <a class="choice-card" href="/quickstart/search/building-custom-ui/">
    <span class="choice-badge">Custom build</span>
    <h3>Search API</h3>
    <p>Use the API when you need server-side control, custom rendering, SEO-sensitive pages, or a mobile/backend integration.</p>
    <ul class="advantages-list">
      <li>Complete control over UI and payloads.</li>
      <li>Fits backend-rendered search pages well.</li>
      <li>Lets you combine Luigi's Box data with internal business logic.</li>
    </ul>
  </a>
</div>

## Quickstart collection

<div class="lb-guide-group">
  <p class="lb-guide-kicker">General</p>
  <h3>Understand the system first</h3>
  <p>These guides explain how search works before you commit to one implementation style.</p>
  <div class="lb-guide-grid">
    <a class="lb-guide-card" href="/quickstart/search/understanding-search/">
      <h3>Choose your integration path</h3>
      <p>Review the main search features and decide between Search.js and the Search API.</p>
    </a>
    <a class="lb-guide-card" href="/quickstart/search/understanding-rankings/">
      <h3>Understand ranking</h3>
      <p>See which catalog and behavioral signals influence the order of results.</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 the fastest web implementation.</p>
  <div class="lb-guide-grid">
    <a class="lb-guide-card" href="/quickstart/search/integrating-searchjs/">
      <h3>Integrate Search.js</h3>
      <p>Launch a complete search page with Luigi's Box handling the heavy lifting.</p>
    </a>
    <a class="lb-guide-card" href="/quickstart/search/customizing-searchjs/">
      <h3>Customize Search.js</h3>
      <p>Override templates to fit the visual language of your storefront.</p>
    </a>
  </div>
</div>

<div class="lb-guide-group">
  <p class="lb-guide-kicker">Search API</p>
  <h3>Custom implementation path</h3>
  <p>Use these guides when you own the rendering layer.</p>
  <div class="lb-guide-grid">
    <a class="lb-guide-card" href="/quickstart/search/building-custom-ui/">
      <h3>Build a custom search UI</h3>
      <p>Render results, filters, and pagination from raw API responses.</p>
    </a>
    <a class="lb-guide-card" href="/quickstart/search/banner-campaigns/">
      <h3>Render banner campaigns</h3>
      <p>Extend your custom search page with campaign payloads from the API.</p>
    </a>
    <a class="lb-guide-card" href="/quickstart/search/variant-search/">
      <h3>Implement variant search</h3>
      <p>Choose how product variants should be indexed and displayed in results.</p>
    </a>
  </div>
</div>