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

# InstantSearch results page

> Display search results from Algolia in your Shopify app using InstantSearch.

<Info>
  Shopify apps can't modify theme code directly.
  To integrate Autocomplete and InstantSearch,
  use the Algolia AI Search & Discovery app's **App Embed** and **App Blocks**.

  For more information, see:

  * [Manual theme configuration](/doc/integration/shopify/getting-started/quick-start#manual-theme-configuration)
  * [Shopify Algolia configuration](/doc/integration/shopify/sending-and-managing-data/algolia-config)
</Info>

Algolia AI Search & Discovery includes a search results page powered by InstantSearch.
It replaces your default Shopify search results page and comes with several InstantSearch widgets.

<img src="https://mintcdn.com/algolia/IBpvqiDfc9oOPDK9/doc/integration/shopify/building-search-ui/3-instant-search-demo.jpeg?fit=max&auto=format&n=IBpvqiDfc9oOPDK9&q=85&s=acbd2a16e2ad980892797b295425c6cb" alt="InstantSearch results page with widgets for filtering by price range or vendor and products displayed as cards" width="2850" height="1550" data-path="doc/integration/shopify/building-search-ui/3-instant-search-demo.jpeg" />

## Enable the InstantSearch results page

To enable the InstantSearch results page:

1. Enable [Algolia Search App Embed](/doc/integration/shopify/getting-started/quick-start#before-you-begin) in your theme settings.
2. Enable [Algolia App Blocks](/doc/integration/shopify/getting-started/quick-start#enable-autocomplete).

### Configuration

To configure the InstantSearch page, go to the **Search options** tab in your Shopify app.

<img src="https://mintcdn.com/algolia/IBpvqiDfc9oOPDK9/doc/integration/shopify/building-search-ui/2-instant-search.png?fit=max&auto=format&n=IBpvqiDfc9oOPDK9&q=85&s=72e48e36c0f9cba12a857aee017b1c70" alt="InstantSearch configuration screen in the Shopify admin" width="950" height="1876" data-path="doc/integration/shopify/building-search-ui/2-instant-search.png" />

For advanced customization,
use [custom hooks](/doc/integration/shopify/building-search-ui/instantsearch-hooks).

### No results

To tailor the message displayed when a search yields no results,
use the [`templates.empty` option provided by the InstantSearch `hits` widget](/doc/guides/building-search-ui/going-further/conditional-display/js#handling-no-results).
This lets you define custom HTML or text to inform users appropriately.

For more information,
see [Customize an InstantSearch widget](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js).

## Facet display

Algolia AI Search & Discovery supports [facet display](/doc/guides/building-search-ui/ui-and-ux-patterns/facet-display/js) to manage facet ordering from the Algolia dashboard.

### Enable the facet display beta feature

<Note>
  Facet display is available as a **beta feature** in the Algolia AI Search & Discovery app,
  as defined in the [Algolia Terms of Service ("Beta Services")](https://www.algolia.com/policies/terms).
  If you need access, contact the [Algolia support](https://support.algolia.com/hc/en-us/requests/new) team.
</Note>

To enable facet display, select the checkbox in your Shopify admin and click **Save**.

<img src="https://mintcdn.com/algolia/IBpvqiDfc9oOPDK9/doc/integration/shopify/building-search-ui/5-dynamic-widgets-checkbox.png?fit=max&auto=format&n=IBpvqiDfc9oOPDK9&q=85&s=a1b0d40eb364c9bd28eb600639caf2e0" alt="Screenshot of a checkbox labeled 'Use Dynamic Widgets (Beta)' in the Shopify admin, which enables or disables dynamic widgets for facets." width="1908" height="2346" data-path="doc/integration/shopify/building-search-ui/5-dynamic-widgets-checkbox.png" />

This activates facet display and maps your collection facet rules to your Algolia indices.

### Facet display rules

Enabling facet display creates two types of rules:

* Search page rules
* Collection page rules

#### Search page rules

**Search page rules** use the `shopify_default_collection` context and apply to collection pages that aren't customized.

<img src="https://mintcdn.com/algolia/IBpvqiDfc9oOPDK9/doc/integration/shopify/building-search-ui/7-dynamic-widgets-default-rule.png?fit=max&auto=format&n=IBpvqiDfc9oOPDK9&q=85&s=8f26edefa543a18b45a7e011daa861b8" alt="Screenshot of a rule showing 'Query is empty search' and a default collection context, with 'Order Facet' rules for 'price', 'price range', and 'vendor'." width="1798" height="294" data-path="doc/integration/shopify/building-search-ui/7-dynamic-widgets-default-rule.png" />

To change facet display for search pages,
[edit the feature in the Algolia dashboard](https://dashboard.algolia.com/explorer/configuration/facet-display).
For example:

<img src="https://mintcdn.com/algolia/IBpvqiDfc9oOPDK9/doc/integration/shopify/building-search-ui/8-facet-display-settings.png?fit=max&auto=format&n=IBpvqiDfc9oOPDK9&q=85&s=da4afa7b5e5bb28def3d56409350b83f" alt="Screenshot of the 'Facet display' settings showing attributes like 'price range' and 'tags' with their display order and an option to add more facets." width="3376" height="2102" data-path="doc/integration/shopify/building-search-ui/8-facet-display-settings.png" />

#### Collection page rules

**Collection page rules** are triggered by the collection's handle and its ID.

<img src="https://mintcdn.com/algolia/IBpvqiDfc9oOPDK9/doc/integration/shopify/building-search-ui/6-dynamic-widgets-rule.png?fit=max&auto=format&n=IBpvqiDfc9oOPDK9&q=85&s=351f45b902b7412730f94382a4e33e57" alt="Screenshot of facet display rules showing filters for 'collections is Nike' and 'collection IDs is 446156570847', with order facets for 'price', 'price range', and 'vendor'." width="1796" height="332" data-path="doc/integration/shopify/building-search-ui/6-dynamic-widgets-rule.png" />

To change these rules,
[edit them in the Algolia dashboard](https://dashboard.algolia.com/rules).

<img src="https://mintcdn.com/algolia/IBpvqiDfc9oOPDK9/doc/integration/shopify/building-search-ui/9-dynamic-widgets-rule-facet-ordering.png?fit=max&auto=format&n=IBpvqiDfc9oOPDK9&q=85&s=9ca8e2575a372fd1353cf0015bb8eb80" alt="Screenshot of the 'Choose facet ordering' panel with facets like 'price range' and 'tags' sorted by 'Number of hits (descending)'." width="5118" height="2578" data-path="doc/integration/shopify/building-search-ui/9-dynamic-widgets-rule-facet-ordering.png" />

If you deactivate the feature,
Algolia removes the rules from your dashboard but retains them in your Shopify admin for future reactivation.