Methods

Supercycle works with your theme’s product form out of the box. If your theme uses custom markup for the product form or the variant input, see Methods app block troubleshooting to help Supercycle detect and control those elements.

The Methods app block adds a product’s methods to the product page: rental periods and dates for calendar, pricing groups for subscription, credits for membership, and a price for resale. It takes over the theme’s add to cart button so a customer can only add a valid selection to the cart.

The Methods app block on a calendar rental product. Pick a rental period and the dates and total follow.

How it works

The block controls your product form through a component called ProductContextSync, which detects, watches, and controls the form.

Sync the variant ID

It watches your theme’s variant input and keeps it in step with the active variant.

Inject hidden inputs

It adds the rental data the cart needs, such as the selling plan and the line item properties, to your form.

Control the button state

It enables or disables the button from the rental validation. The button stays disabled when:

No method is selected
The product is out of stock
The customer doesn’t have enough credits
Required terms and conditions haven’t been accepted

The takeover is non-destructive. It only adds hidden inputs and toggles the button state, and doesn’t change your theme’s markup. Supercycle uses a MutationObserver to keep the button state even when other scripts change it, and supports AJAX carts by injecting the rental data before submission.

Item condition options

The Display item condition options block setting adds an item condition picker above the methods, so customers choose the condition they want before they pick a method. It mirrors Display duration options, with a checkbox to turn it on and an Item condition options display radio for a Radio or Select layout. The picker lists only the conditions marked Show on storefront under Custom data in the Supercycle admin. With none marked, the picker renders nothing, so the setting is safe to leave on. See Item conditions for the admin side. Nothing is selected until the customer picks a condition. From then on the pick joins variant and market as an option filter:

Options whose Apply to specific item conditions list excludes the pick are hidden.
Options that apply to all conditions always show.
A method left with no visible options renders as unavailable, the same as a method with no inventory.
On the calendar method, a pick that hides the selected duration moves the selection to the visible duration of the same length, or clears it, so a hidden option’s selling plan is never submitted.

The picked condition is a display filter. It isn’t sent with the rental, so an option that applies to all conditions can still be fulfilled with an item of any condition.

Date picker blocked dates

You manage storefront calendar rules from Channels under Online store. See Date picker blocked dates for the block types, start and end targeting, and examples. Those rules feed the block’s calendar on the online store. When a customer picks dates, rentals whose start or end lands on a blocked rule are rejected, and duration options that would land on a blocked boundary are disabled.

Date picker blocked dates only affect which dates are selectable on the storefront calendar. To remove availability for a product, variant, or item across the store, use Blocked dates. Opening hours can also block pickup and drop-off dates when time selection is on.

Legacy theme JSON matchers Deprecated

The block still exposes the Unavailable start dates and Unavailable end dates theme settings. Both accept DayPicker matcher JSON and apply on top of the admin rules, so existing JSON keeps working. Use Date picker blocked dates for new rules.

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 or array. Days of the week are numbered 0 for Sunday through 6 for Saturday.

Matcher examples

Paste one of these into Unavailable start dates or Unavailable end dates.

{"dayOfWeek": [1]}

{"dayOfWeek": [0, 6]}

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

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

[
  {"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 those days every week.
Single date. {"from": "YYYY-MM-DD", "to": "YYYY-MM-DD"} with the same date in both.
Date range. {"from": "YYYY-MM-DD", "to": "YYYY-MM-DD"} blocks every date in the range.
After a date. {"after": Date} blocks every date after it.
Several matchers. An array [...] combines rules.

Block dates dynamically

To block dates by a rolling rule, for example to cap bookings at 6 weeks ahead, add this script to your product template or a custom Liquid block:

Rolling booking window

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

This blocks every date more than 6 weeks from today. Change weeksToBlock to move the window. window.supercycleDisabledMatchers applies to both start and end dates.

Put the script in a custom Liquid block rather than the main product template to give different products or product templates their own booking window.

Add the block to a custom or legacy theme

If your theme doesn’t support app blocks, add the methods component to the product template by hand.

Open the product template

On Themes, open your theme’s … > Edit code menu, then open the file your theme uses for the product page: sections/main-product.liquid, sections/product-template.liquid, or templates/product.liquid on very old themes.

Find the title and the form

Find where the product title and the add to cart button are rendered. The methods component goes between them.

Paste the methods component

Add the snippet at that spot.

Product template

<x-methods
  data-settings='{
    "default_method": "calendar",
    "item_condition_options": false,
    "item_condition_options_display": "radio",
    "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 methods turned on. Change variants to confirm the price and options update.

Methods app block troubleshooting

If the block doesn’t appear, the button stays disabled, or the price doesn’t follow the variant, see Methods app block troubleshooting. It covers variant input and add to cart form detection, empty blocks, and price updates.

Methods app block FAQs

Can I style the Methods app block?

Yes. Use the custom_css setting in data-settings for small overrides. For larger changes, target the block’s CSS classes from your theme’s stylesheet.

Can I target a specific method option?

Yes. Each option element exposes its admin name as data-supercycle-option-name, so you can hide or restyle specific options from CSS or JavaScript. See Target method options by name.

Introduction

App blocks

Code snippets

Guides

Troubleshooting

How it works

Item condition options

Date picker blocked dates

Legacy theme JSON matchers Deprecated

Matcher examples

Format reference

Block dates dynamically

Add the block to a custom or legacy theme

Methods app block troubleshooting

Methods app block FAQs

​How it works

​Item condition options

​Date picker blocked dates

​Legacy theme JSON matchers Deprecated

​Matcher examples

​Format reference

​Block dates dynamically

​Add the block to a custom or legacy theme

​Methods app block troubleshooting

​Methods app block FAQs

How it works

Item condition options

Date picker blocked dates

Legacy theme JSON matchers Deprecated

Matcher examples

Format reference

Block dates dynamically

Add the block to a custom or legacy theme

Methods app block troubleshooting

Methods app block FAQs