Methods

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.

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.

Syncs the variant ID

Watches your theme’s variant input field and keeps it in sync with the active variant.

Injects hidden inputs

Adds rental-specific data such as selling plans and properties to your form.

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

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

Advanced calendar settings

The Methods app block exposes two fields for blocking selectable dates on the storefront calendar:

Unavailable start dates — blocks dates from being chosen as a rental start date.
Unavailable end dates — blocks dates from being chosen as a rental end date, independently of start dates.

Both fields accept the same JSON object/array matcher format shown below. Rentals whose start date matches an unavailable start entry, or whose end date matches an unavailable end entry, are rejected — this also disables the corresponding duration options and prevents auto-derived ranges from landing on a blocked boundary.

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 in the admin instead.

Block All Mondays

{"dayOfWeek": [1]}

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

Block Saturdays and Sundays (Weekends)

{"dayOfWeek": [0, 6]}

Block a Specific Date (January 1, 2026)

{"from": "2026-01-01", "to": "2026-01-01"}

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

{"from": "2025-12-22", "to": "2025-12-27"}

Combine Multiple Rules

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

[
  {"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:

<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. window.supercycleDisabledMatchers applies to both start and end dates.

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.

Troubleshooting

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

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.

<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:

document.querySelectorAll("[name='id']")

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:

Forms with `supercycle-add-to-cart-form` attribute

This is the most reliable option.

Forms with `data-type='add-to-cart-form'`

Alternative detection used in many themes.

Forms with `data-product-form`

Common fallback for Online Store 2.0 themes.

Last eligible form with `/cart/add` action

Used only when none of the above are found.

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

{% 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:

<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`

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 [email protected] so we can fix it for you.

Empty methods app block

Confirm the product is imported into Supercycle and methods are enabled for it.

Price not updating on variant change

Ensure your theme updates product.selected_or_first_available_variant

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.

Open your product template

Go to Online Store → Themes → … → Edit code.
Open one of these files depending on your theme:

sections/main-product.liquid
sections/product-template.liquid
templates/product.liquid (very old themes)

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 between these two elements.

Paste the methods component

Add the snippet below at the chosen spot.

<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": "",
    "calendar_unavailable_end_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>

Save and test

Save, then preview a product with Supercycle methods enabled. Change variants to confirm the price and options update.

FAQ

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.

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 for examples.

Introduction

App blocks

Code snippets

Guides

How the methods app block works

Advanced calendar settings

Block All Mondays

Block Saturdays and Sundays (Weekends)

Block a Specific Date (January 1, 2026)

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

Combine Multiple Rules

Format Reference

Block Dates Dynamically

Troubleshooting

FAQ

​How the methods app block works

​Advanced calendar settings

​Block All Mondays

​Block Saturdays and Sundays (Weekends)

​Block a Specific Date (January 1, 2026)

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

​Combine Multiple Rules

​Format Reference

​Block Dates Dynamically

​Troubleshooting

​FAQ

How the methods app block works

Advanced calendar settings

Block All Mondays

Block Saturdays and Sundays (Weekends)

Block a Specific Date (January 1, 2026)

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

Combine Multiple Rules

Format Reference

Block Dates Dynamically

Troubleshooting

FAQ