Target method options by name

Each option rendered by the Supercycle methods app block exposes its backend name as a data-supercycle-option-name attribute on the option element. Use this attribute to target specific options from your theme’s CSS or JavaScript without relying on positional selectors. This works for every method that renders option pickers: Subscription, Calendar, Membership, Resale, and Trade-in.

How it works

For each option you configure on a method, Supercycle renders a .supercycle-options__option element and sets data-supercycle-option-name to the option’s name (the value you entered in the Supercycle admin). For example, an option named 1 month - insurance renders as:

<div
  class="supercycle-options__option"
  data-supercycle-option-name="1 month - insurance"
>
  ...
</div>

You can then match it with any standard attribute selector.

Hide options with CSS

Hide every option whose name contains the word insurance:

.supercycle-options__option[data-supercycle-option-name*="insurance"] {
  display: none;
}

Match an exact option name:

.supercycle-options__option[data-supercycle-option-name="1 month - insurance"] {
  display: none;
}

Toggle options with JavaScript

Hide insurance options behind a toggle on the product page:

<label>
  <input type="checkbox" id="include-insurance" />
  Include insurance
</label>

<script>
  const toggle = document.querySelector("#include-insurance");

  function applyVisibility() {
    const hide = !toggle.checked;
    document
      .querySelectorAll('.supercycle-options__option[data-supercycle-option-name*="insurance"]')
      .forEach((el) => {
        el.style.display = hide ? "none" : "";
      });
  }

  toggle.addEventListener("change", applyVisibility);
  applyVisibility();
</script>

Option names come straight from the Supercycle admin, so any naming convention you adopt (for example, prefixing with insurance- or suffixing with - insurance) becomes a stable selector you can reuse across your theme.

The attribute is rendered by Supercycle, so it stays in sync if you rename or add options. Hidden options are still present in the DOM, only visually hidden, customers cannot select them while they are hidden.

Introduction

App blocks

Code snippets

Guides

Target method options by name

How it works

Hide options with CSS

Toggle options with JavaScript

​How it works

​Hide options with CSS

​Toggle options with JavaScript

How it works

Hide options with CSS

Toggle options with JavaScript