> ## 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 every method a product offers to the product page and let Supercycle control the add to cart button export const CalendarRentalPdp = () => { const PERIODS = [{ days: 4, price: 63.99 }, { days: 7, price: 83.99 }, { days: 14, price: 117.99 }, { days: 30, price: 161.99 }]; const ADDONS = [{ id: "damage", title: "Damage protection", desc: "Covers accidental damage during your rental", price: 9 }, { id: "cleaning", title: "Cleaning", desc: "", price: 12, required: true }]; const START = new Date(2025, 0, 10); const [period, setPeriod] = useState(0); const [addons, setAddons] = useState({ damage: false, cleaning: true }); const money = n => "$" + n.toFixed(2); const fmt = d => d.getDate() + " " + d.toLocaleString("en", { month: "short" }) + " " + String(d.getFullYear()).slice(2); const endDate = new Date(START); endDate.setDate(START.getDate() + PERIODS[period].days); const perDay = PERIODS[period].price / PERIODS[period].days; const addonTotal = ADDONS.reduce((s, a) => s + (addons[a.id] ? a.price : 0), 0); const total = PERIODS[period].price + addonTotal; const toggleAddon = a => { if (a.required) return; setAddons({ ...addons, [a.id]: !addons[a.id] }); }; const t = { border: "#cccccc", text: "#000000", subdued: "#656565", accent: "#000000", radius: 8 }; const chip = selected => ({ border: "1px solid " + (selected ? t.accent : t.border), background: selected ? t.accent : "#ffffff", color: selected ? "#ffffff" : t.text, borderRadius: t.radius, padding: 6, minHeight: 28, display: "flex", alignItems: "center", lineHeight: 1, fontSize: 11, cursor: "pointer", transition: "background-color 150ms ease, border-color 150ms ease, color 150ms ease" }); const label = { display: "block", fontSize: 11, color: t.subdued, marginBottom: 3 }; const line = { display: "flex", justifyContent: "space-between", fontSize: 11 }; const windowRef = useRef(null); const [zoom, setZoom] = useState(0.4); useEffect(() => { const el = windowRef.current; if (!el || typeof ResizeObserver === "undefined") return undefined; const fit = () => setZoom(Math.max(0.2, Math.min(1, el.clientWidth / 853))); fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect(); }, []); return
yourstore.com/products/all-mountain-ski-set
{} {}
All-mountain ski set
From $5.40 per day
Rent From $5.40 per day Yours for 4 to 30 days
{}
Rental period
{PERIODS.map((p, i) => { const on = i === period; return ; })}
{}
Arrive by {fmt(START)}
Return by {fmt(endDate)}
{}
Add-ons
{ADDONS.map((a, i) => { const on = !!addons[a.id]; return ; })}
{}
{money(perDay)}/day x {PERIODS[period].days} days {money(PERIODS[period].price)} {ADDONS.filter(a => addons[a.id]).map(a => {a.title} {money(a.price)} )}
Total {money(total)}
; }; 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](/developers/troubleshooting/method-app-block) 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. *** ## How it works The block controls your product form through a component called ProductContextSync, which detects, watches, and controls the form. It watches your theme's variant input and keeps it in step with the active variant. It adds the rental data the cart needs, such as the selling plan and the [line item properties](/developers/line-items/cycle-line-item-properties), to your form. 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](/documentation/configuration/risk/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](https://admin.shopify.com/apps/supercycle/settings/custom_data)** in the Supercycle admin. With none marked, the picker renders nothing, so the setting is safe to leave on. See [Item conditions](/documentation/manage/inventory/item-conditions#show-conditions-on-the-storefront) 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](https://admin.shopify.com/apps/supercycle/settings/channels)** under **Online store**. See [Date picker blocked dates](/documentation/online-store/date-picker-blocks) 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](/documentation/manage/inventory/blocked-dates). [Opening hours](/documentation/configuration/logistics/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](/documentation/online-store/date-picker-blocks) 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**. ```json All Mondays theme={null} {"dayOfWeek": [1]} ``` ```json Saturdays and Sundays theme={null} {"dayOfWeek": [0, 6]} ``` ```json A specific date theme={null} {"from": "2026-01-01", "to": "2026-01-01"} ``` ```json A date range theme={null} {"from": "2025-12-22", "to": "2025-12-27"} ``` ```json Several rules combined 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 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: ```html Rolling booking window theme={null} ``` 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. On **[Themes](https://admin.shopify.com/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 where the product title and the add to cart button are rendered. The methods component goes between them. Add the snippet at that spot. ```html Product template theme={null} ``` 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](/developers/troubleshooting/method-app-block). It covers variant input and add to cart form detection, empty blocks, and price updates. *** ## Methods app block FAQs 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. 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](/developers/code-snippets/target-method-options).