> ## Documentation Index
> Fetch the complete documentation index at: https://docs.depict.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Integrate Depict search, listings and recommendations through the Depict Shopify apps

<Note>
  Depict ships two Shopify apps, both installed from the Shopify App Store:

  * [**Search by Depict**](https://apps.shopify.com/depict-search) — semantic search that finds, guides, and converts. Its search modal and settings are documented in this section.
  * [**Supergrid by Depict**](https://apps.shopify.com/depict) — collection merchandising, documented in its own section: [Supergrid](/shopify-lite/introduction).
</Note>

This section walks you through integrating **Search by Depict**:

1. [Install the app](/headless/shopify-app/setup/installation) from the Shopify App Store — no theme code changes required.
2. [Add the search button](/headless/shopify-app/blocks/search-modal) to your theme so shoppers can open the search modal.
3. [Customize the search experience](/headless/shopify-app/blocks/search-customization-overview) through the app embeds and block settings in the theme editor.

## Related integration paths

The same Depict UI powers other storefront integrations. If you're building in code rather than the theme editor, see:

<CardGroup cols={3}>
  <Card title="React SDK" icon="react" href="/react-ui-guide/introduction">
    Depict UI for React, Next.js and Gatsby — search modal, listing pages and recommendations as components.
  </Card>

  <Card title="JavaScript SDK" icon="js" href="/js-ui-guide/introduction">
    Depict UI for plain JavaScript storefronts — same products, framework-free.
  </Card>

  <Card title="Storefront API" icon="code" href="/api-guide/introduction">
    Call the API directly when you want full control over the UX implementation.
  </Card>
</CardGroup>