Skip to main content
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.
1

Syncs the variant ID

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

Injects hidden inputs

Adds rental-specific data such as rental intent tokens, selling plans, and properties to your form.
3

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

You can use JSON object/array matchers for additional control over date selection, from the app block settings, for example:
  • {"dayOfWeek": 0} to block of Sundays
  • "2025-01-10" to block the 10th of Jan
  • {"from": "2025-01-10", "to": "2025-02-10"} to block 10th - 15th Jan
  • [{"dayOfWeek": 0}, "2025-01-05", {"from": "2025-01-10", "to": "2025-02-10"}] to do a combination of all of the above

​
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.
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']")
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:
1

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

This is the most reliable option.
2

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

Alternative detection used in many themes.
3

Forms with `data-product-form`

Common fallback for Online Store 2.0 themes.
4

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 typeTypical file locations
Online Store 2.0sections/product-template.liquid, sections/main-product.liquid
Legacy themestemplates/product.liquid, snippets/product-form.liquid
Ensure the Supercycle app embed is enabled, then hard refresh the page.
Confirm the product is imported into Supercycle and methods are enabled for it.
Ensure your theme updates product.selected_or_first_available_variant
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.
1

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)
2

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

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

Save and test

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

​
FAQ

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.