Skip to main content
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.
Availability search is in beta. For the block’s settings and how to build a custom filter, see Methods filter.

Filtering a collection by rental dates with availability search


Install Search & Discovery

The filter runs on Shopify’s free Search & 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.
1

Open unstructured metafields

Under Custom data in the Shopify admin, select Products, then View unstructured metafields.
2

Add the definition

Find supercycle.methods and select Add definition.
3

Name the metafield

Enter Supercycle Methods in Name and set Type to List of single line text.
4

Turn on filtering

Tick Filter on the product list and in the Admin API and Use as a condition in smart collections.
5

Save

Select Save to create the definition.

Add the filters in Search & Discovery

1

Open Filters

In the Search & Discovery app, go to Filters and select Add filter.
2

Add the Rental availability filter

Set the source to Rental availability and save.
3

Add the Supercycle Methods filter

Select Add filter again, set the source to Supercycle Methods, and save.

Find your collection section ID

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

Open a collection in the theme editor

On Themes, select Customize and go to a collection page.
2

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.
3

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.
4

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.

Add the Methods filter block

1

Open the collection in the theme editor

On Themes, select Customize and go to a collection page.
2

Add the block

In the sidebar, select Add section, then Apps, then the Methods filter block.
3

Enter the section ID

In the block’s settings, paste the section ID you copied into Collection section ID.
4

Choose the filter types

Set which filters the block offers: membership, calendar, or everything. The block’s wording comes from Languages.
5

Save

Select Save.
6

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.