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

# Availability search

> Let customers filter a collection to the products available for the dates they want to rent

Availability search lets customers filter a collection page to the products that are available for the dates they want. It's built on Shopify's Search & Discovery app and Supercycle's Methods filter app block, and you set it up in the Shopify admin and the theme editor.

<Info>
  Availability search is in beta. For the block's settings and how to build a custom filter, see [Methods filter](/developers/app-blocks/availability-search).
</Info>

<Frame type="glass" caption="Filtering a collection by rental dates with availability search">
  <iframe src="https://fast.wistia.net/embed/iframe/36gmcackb0?web_component=true&seo=true" title="Availability search on a collection page" width="100%" height="350" allow="autoplay; fullscreen" frameborder="0" />
</Frame>

***

## Set up availability search

### Install Search & Discovery

The filter runs on Shopify's free [Search & Discovery](https://apps.shopify.com/search-and-discovery) app. Install it from the Shopify App Store before you continue.

### Create the Supercycle Methods metafield

Filtering by method needs a metafield definition for `supercycle.methods`.

<Steps>
  <Step title="Open unstructured metafields">
    Under <Icon icon="shopify" iconType="solid" /> **[Custom data](https://admin.shopify.com/settings/custom_data)** in the Shopify admin, select **Products**, then **View unstructured metafields**.
  </Step>

  <Step title="Add the definition">
    Find `supercycle.methods` and select **Add definition**.
  </Step>

  <Step title="Name the metafield">
    Enter `Supercycle Methods` in **Name** and set **Type** to **List of single line text**.
  </Step>

  <Step title="Turn on filtering">
    Tick **Filter on the product list and in the Admin API** and **Use as a condition in smart collections**.
  </Step>

  <Step title="Save">
    Select **Save** to create the definition.
  </Step>
</Steps>

### Add the filters in Search & Discovery

<Steps>
  <Step title="Open Filters">
    In the Search & Discovery app, go to **Filters** and select **Add filter**.
  </Step>

  <Step title="Add the Rental availability filter">
    Set the source to **Rental availability** and save.
  </Step>

  <Step title="Add the Supercycle Methods filter">
    Select **Add filter** again, set the source to **Supercycle Methods**, and save.
  </Step>
</Steps>

### Find your collection section ID

The Methods filter block needs the section ID of your collection page.

<Steps>
  <Step title="Open a collection in the theme editor">
    On <Icon icon="shopify" iconType="solid" /> **[Themes](https://admin.shopify.com/themes)**, select **Customize** and go to a collection page.
  </Step>

  <Step title="Open the Network tab">
    Right-click the page and select **Inspect** to open your browser's developer tools, then select the **Network** tab and clear the log.
  </Step>

  <Step title="Apply an existing filter">
    Select one of the collection's existing filters, for example the price filter, and apply it. This makes a request you can inspect.
  </Step>

  <Step title="Copy the section ID">
    Select the filter request in the log. If you used the price filter, its name contains `.price`. Copy the section ID from the request details and close the developer tools.
  </Step>
</Steps>

### Add the Methods filter block

<Steps>
  <Step title="Open the collection in the theme editor">
    On <Icon icon="shopify" iconType="solid" /> **[Themes](https://admin.shopify.com/themes)**, select **Customize** and go to a collection page.
  </Step>

  <Step title="Add the block">
    In the sidebar, select **Add section**, then **Apps**, then the **Methods filter** block.
  </Step>

  <Step title="Enter the section ID">
    In the block's settings, paste the section ID you copied into **Collection section ID**.
  </Step>

  <Step title="Choose the filter types">
    Set which filters the block offers: membership, calendar, or everything. The block's wording comes from [Languages](/documentation/online-store/languages).
  </Step>

  <Step title="Save">
    Select **Save**.
  </Step>

  <Step title="Hide the Search & Discovery filters">
    Check the block works, then hide the **Rental availability** and **Supercycle Methods** filters that Search & Discovery adds to the page with custom CSS, so customers only see the Methods filter block.
  </Step>
</Steps>