Target method options by name

The attribute is rendered by the Methods app block, so this works in any theme where the block or the x-methods component is on the product page.

Every option the Methods app block renders carries its admin name in a data-supercycle-option-name attribute. Use it to target specific options from your theme’s CSS or JavaScript without relying on their position. It works for every method that renders option pickers: calendar, subscription, membership, resale, and trade-in.

How it works

For each option 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. An option named 1 month - insurance renders as:

Rendered option

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

Match it with any standard attribute selector.

Hide options with CSS

Hide every option whose name contains insurance:

Contains match

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

Match an exact option name:

Exact match

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

Option names come straight from the Supercycle admin, so a naming convention such as an insurance- prefix or a - insurance suffix gives you a stable selector to reuse across your theme.

Toggle options with JavaScript

Show insurance options only when a checkbox on the product page is ticked:

Insurance toggle

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

Hidden options stay in the DOM but customers can’t select them while they’re hidden. Because Supercycle renders the attribute, it stays in sync when you rename or add options.

Introduction

App blocks

Code snippets

Guides

Troubleshooting

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