Skip to main content
Allow customers to search by the availability of items from the collection page. For setup instructions see the Methods filter guide.

​
Building a custom filter

The filter uses metafields and session storage to filter products with Shopify’s Search & Discovery app.

​
Session storage

​
filterMode
string | null
The active filter method. One of "calendar", "membership", "subscription", or "resale". Set to null to clear all filters and show all products.
​
scaf-dates
object | null
The selected date range for calendar mode. Only relevant when filterMode is "calendar".

​
Writing filter state from your own code

Values are stored as JSON strings. Use the helper below to write a key and notify the block — you can inspect the current values at any time in DevTools > Application > Session Storage. 
function setFilterState(key, value) {
  const serialized = JSON.stringify(value);
  sessionStorage.setItem(key, serialized);
  window.dispatchEvent(new StorageEvent("storage", {
    key: key,
    newValue: serialized,
    storageArea: sessionStorage
  }));
}

// Activate a mode
setFilterState("filterMode", "membership");
setFilterState("filterMode", "subscription");
setFilterState("filterMode", "resale");
setFilterState("filterMode", "calendar");

// Clear all filters
setFilterState("filterMode", null);

​
Setting a date range (calendar mode)

setFilterState("scaf-dates", {
  start_date: new Date("2025-06-01").toISOString(),
  end_date: new Date("2025-06-07").toISOString()
});
setFilterState("filterMode", "calendar");

​
Reading the current filter state

const mode = JSON.parse(sessionStorage.getItem("filterMode"));
// "calendar" | "membership" | "subscription" | "resale" | null

const dates = JSON.parse(sessionStorage.getItem("scaf-dates"));
// { start_date: "2025-06-01T00:00:00.000Z", end_date: "2025-06-07T00:00:00.000Z" } | null

​
Global JavaScript hooks

​
window.supercycleAfterSectionRender
function
Called each time the collection section re-renders after a filter is applied. Use it to re-initialise third-party scripts or sync a custom UI to the current state. Must be defined before the block initialises.
window.supercycleAfterSectionRender = function() {
  const mode = JSON.parse(sessionStorage.getItem("filterMode"));
  // Re-initialise your UI here
};

​
Shopify metafields

These are the metafields Supercycle uses to power the filter. They are set automatically and can be inspected in Shopify > Settings > Custom data. Product metafields
​
supercycle.methods
list.single_line_text_field
The rental methods available for a product. Values: Calendar, Membership, Subscription, Resale. Used to filter products by method type.
Variant metafields
​
supercycle.uncommitted_inventory
number_integer
Set to 1 when the variant has stock not yet committed to an active rental. Used by the Membership, Subscription, and Resale filters.
​
supercycle.future_availability_inventory
number_integer
Set to 1 when the variant has availability for future dates. Used by the Calendar filter.

​
Example: home page date picker

A date picker in a home page hero that sends customers to the collection page with calendar mode pre-activated. The Methods filter block on the collection page will read the saved sessionStorage state on load and apply the filter automatically. 
<!-- Add this to your home page hero section -->
<div id="sc-hero-search">
  <label>
    From
    <input type="date" id="sc-start" />
  </label>
  <label>
    To
    <input type="date" id="sc-end" />
  </label>
  <button id="sc-search">Check availability</button>
</div>

<script>
  var today = new Date().toISOString().slice(0, 10);
  document.getElementById("sc-start").min = today;
  document.getElementById("sc-end").min = today;

  document.getElementById("sc-start").addEventListener("change", function() {
    document.getElementById("sc-end").min = this.value;
    if (document.getElementById("sc-end").value < this.value) {
      document.getElementById("sc-end").value = "";
    }
  });

  document.getElementById("sc-search").addEventListener("click", function() {
    var start = document.getElementById("sc-start").value;
    var end = document.getElementById("sc-end").value;
    if (!start || !end) return;

    sessionStorage.setItem("filterMode", JSON.stringify("calendar"));
    sessionStorage.setItem("scaf-dates", JSON.stringify({
      start_date: new Date(start).toISOString(),
      end_date: new Date(end).toISOString()
    }));

    // Update this URL to match your store's collection
    window.location.href = "/collections/all";
  });
</script>

​
Adding the Methods filter to custom or legacy themes

If your theme doesn’t support app blocks on collection pages, you can add the filter directly to your liquid template.
1

Open your collection template

Go to Online Store → Themes → … → Edit code. Open one of these files depending on your theme:
  • sections/main-collection.liquid
  • sections/collection-template.liquid
  • templates/collection.liquid
2

Paste the filter component

Add the snippet below wherever you want the filter to appear — typically above your product grid.
<x-availability-filter data-settings='{
  "enable_calendar": true,
  "enable_membership": true,
  "enable_subscription": true,
  "enable_resale": true,
  "collections_section_id": "",
  "custom_css": ""
}'></x-availability-filter>

{% render 'vite-tag' with 'methods-filter.jsx' %}
3

Set the Collection section ID

Find your collection section ID and paste it into the collections_section_id value. This enables the filter to re-render just the product grid without a full page reload. See the Methods filter setup guide for how to find it.
4

Disable unwanted methods

Set any of enable_calendar, enable_membership, enable_subscription, or enable_resale to false to hide those filter options.
5

Save and test

Save, then preview a collection page with Supercycle methods enabled to confirm the filter appears and works correctly.