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

# Methods

> Add all rental methods to a product page

<Info>
  Supercycle automatically integrates with your theme’s product form. If your theme uses custom markup for product forms or variant inputs, follow this guide to help Supercycle correctly detect and control these elements.
</Info>

***

## How the methods app block works

The **Methods app block** takes over your theme’s add to cart button using a component called **ProductContextSync**. This component automatically detects, monitors, and controls your theme’s product form.

<Steps>
  <Step title="Syncs the variant ID">
    Watches your theme’s variant input field and keeps it in sync with the active variant.
  </Step>

  <Step title="Injects hidden inputs">
    Adds rental-specific data such as rental intent tokens, selling plans, and properties to your form.
  </Step>

  <Step title="Controls the button state">
    Enables or disables the button based on rental validation.\
    The button stays disabled when:

    * No method is selected
    * The product is out of stock
    * The customer has insufficient credits
  </Step>
</Steps>

<Note>
  The takeover is non-destructive, it only adds hidden inputs and toggles button states without modifying your theme’s existing structure.
</Note>

## Advanced calendar settings

You can use JSON object/array matchers for additional control over date selection, from the app block settings, for example:

<Note>
  These matchers block selectable **date options** on the storefront calendar (e.g. weekends, holidays, a rolling booking window). To remove **availability** for a specific product, variant, or item across the whole store, use [Blocked dates](/documentation/manage/inventory/blocked-dates) in the admin instead.
</Note>

#### Block All Mondays

```json theme={null}
{"dayOfWeek": [1]}
```

*Note: Day of week values are 0 = Sunday, 1 = Monday, 2 = Tuesday, ..., 6 = Saturday*

#### Block Saturdays and Sundays (Weekends)

```json theme={null}
{"dayOfWeek": [0, 6]}
```

#### Block a Specific Date (January 1, 2026)

```json theme={null}
{"from": "2026-01-01", "to": "2026-01-01"}
```

#### Block a Date Range (December 22-27, 2025)

```json theme={null}
{"from": "2025-12-22", "to": "2025-12-27"}
```

#### Combine Multiple Rules

You can combine multiple matchers in an array to block multiple conditions:

```json theme={null}
[
  {"dayOfWeek": [1]},
  {"dayOfWeek": [0, 6]},
  {"from": "2026-01-01", "to": "2026-01-01"},
  {"from": "2025-12-22", "to": "2025-12-27"}
]
```

#### Format Reference

* **Day of week**: `{"dayOfWeek": [0, 1, 2, ...]}` - Blocks specific days of the week (0=Sunday, 6=Saturday)
* **Single date**: `{"from": "YYYY-MM-DD", "to": "YYYY-MM-DD"}` - Blocks a specific date (use same date for both `from` and `to`)
* **Date range**: `{"from": "YYYY-MM-DD", "to": "YYYY-MM-DD"}` - Blocks a range of dates
* **After date**: `{"after": Date}` - Blocks all dates after a specific date
* **Multiple matchers**: Use an array `[...]` to combine multiple rules

#### Block Dates Dynamically

To block dates dynamically (e.g. limit bookings to a maximum of 6 weeks in advance), add this script to your product template or a custom liquid block:

```html theme={null}
<script>
    const weeksToBlock = 6;
    const blockFrom = new Date();
    blockFrom.setDate(blockFrom.getDate() + weeksToBlock * 7);
    window.supercycleDisabledMatchers = [{after: blockFrom}];
</script>
```

This sets a rolling window that blocks all dates beyond 6 weeks from today. Adjust `weeksToBlock` to change the booking window.

<Tip>
  By placing this code in a custom liquid block instead of the main product template, you can apply different blockout rules to specific products or product templates. This allows you to have different booking windows for different product types.
</Tip>

***

## Troubleshooting

<Info>
  Supercycle uses a <code>MutationObserver</code> to maintain button state even if other scripts modify it.\
  It also supports AJAX carts by injecting rental data before submission.
</Info>

<AccordionGroup>
  <Accordion title="Variant ID input not detected">
    By default, Supercycle finds the variant ID input using `[name='id']`.\
    If your theme doesn’t follow this pattern, Supercycle may not detect it automatically.

    To resolve this, add the `supercycle-variant-id-input` attribute to the input element whose value updates when variants change.

    ```html theme={null}
    <input supercycle-variant-id-input type="hidden" name="id" value="49499861516571" class="product-variant-id">
    ```

    To find all potential variant ID inputs, run this in your browser console:

    ```js theme={null}
    document.querySelectorAll("[name='id']")
    ```
  </Accordion>

  <Accordion title="Add to cart form not detected">
    Supercycle looks for your theme’s add to cart form using multiple selectors.\
    If none match, the app block won’t be able to sync or control your button.

    Supercycle uses the following detection priority order:

    <Steps>
      <Step title="Forms with `supercycle-add-to-cart-form` attribute">
        This is the most reliable option.
      </Step>

      <Step title="Forms with `data-type='add-to-cart-form'`">
        Alternative detection used in many themes.
      </Step>

      <Step title="Forms with `data-product-form`">
        Common fallback for Online Store 2.0 themes.
      </Step>

      <Step title="Last eligible form with `/cart/add` action">
        Used only when none of the above are found.
      </Step>
    </Steps>

    If Supercycle cannot find your form automatically, add this attribute to your product form:

    ```liquid theme={null}
    {% form 'product', product, id: product_form_id, class: 'form js-product-form', data-product-id: product.id, supercycle-add-to-cart-form: true %}
    ```

    Alternatively, if the theme doesn't use a liquid form:

    ```html theme={null}
    <form action="/cart/add" supercycle-add-to-cart-form>
    ```

    Make sure your form’s `action` ends with `/cart/add` and includes a `<button type="submit">` element.

    The add to cart form is usually located in one of these files:

    | Theme type           | Typical file locations                                             |
    | -------------------- | ------------------------------------------------------------------ |
    | **Online Store 2.0** | `sections/product-template.liquid`, `sections/main-product.liquid` |
    | **Legacy themes**    | `templates/product.liquid`, `snippets/product-form.liquid`         |
  </Accordion>

  <Accordion title="Methods block not showing">
    Ensure the **Supercycle app embed** is enabled, then hard refresh the page. If the problem persists, the theme you are using might not be compatible with the app blocks out of the box. Contact support at [support@supercycle.com](mailto:support@supercycle.com) so we can fix it for you.
  </Accordion>

  <Accordion title="Empty methods app block">
    Confirm the product is imported into Supercycle and methods are enabled for it.
  </Accordion>

  <Accordion title="Price not updating on variant change">
    Ensure your theme updates `product.selected_or_first_available_variant`
  </Accordion>

  <Accordion title="Adding the methods app block to custom or legacy themes">
    If your theme doesn’t support app blocks, you can still show the methods UI by adding this snippet directly to your product template code.

    <Steps>
      <Step title="Open your product template">
        Go to <strong>Online Store → Themes → … → Edit code</strong>.\
        Open one of these files depending on your theme:

        <ul>
          <li><code>sections/main-product.liquid</code></li>
          <li><code>sections/product-template.liquid</code></li>
          <li><code>templates/product.liquid</code> (very old themes)</li>
        </ul>
      </Step>

      <Step title="Find the add to cart form and the title">
        Locate where your product title and add to cart button are in the template.\
        The methods component should go <strong>between</strong> these two elements.
      </Step>

      <Step title="Paste the methods component">
        Add the snippet below at the chosen spot.

        ```html theme={null}
        <x-methods
          data-settings='{
            "default_method": "calendar",
            "subtitle_alignment": "right",
            "calendar_price_display": "price_per_day/from_price",
            "calendar_dropdown_alignment": "left",
            "calendar_duration_options": false,
            "calendar_unavailable_start_dates": "",
            "subscription_price_interval": "day",
            "subscription_price_interval_count": 1,
            "subscription_price_format": "from_price",
            "pricing_groups_display": "radio",
            "membership_join_button_url": null,
            "custom_css": ""
          }'
          data-product-metafields="{{ product.metafields.supercycle | json | escape }}"
          data-customer-metafields="{{ customer.metafields.supercycle | json | escape }}"
          data-initial-variant-id="{{ product.selected_or_first_available_variant.id }}"
        ></x-methods>
        ```
      </Step>

      <Step title="Save and test">
        Save, then preview a product with Supercycle methods enabled. Change variants to confirm the price and options update.
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

***

## FAQ

<AccordionGroup>
  <Accordion title="Can I style the methods app block?">
    Yes. Use the `custom_css` setting inside `data-settings` for minor overrides. For larger design changes, use your theme’s stylesheet and target the methods block CSS classes.
  </Accordion>

  <Accordion title="Can I target a specific method option?">
    Yes. Each option element exposes its backend name as `data-supercycle-option-name`, so you can hide or restyle specific options from CSS or JavaScript. See [Target method options by name](/developers/code-snippets/target-method-options) for examples.
  </Accordion>
</AccordionGroup>

***