Making striked out / disabled variants still clickable

Topic summary

Goal: Keep out-of-stock variant buttons in Shopify’s Dawn theme styled as strikethrough/greyed, but still clickable for back‑in‑stock signups.

Approach discussed:

  • Initial code sets a variant_label_state based on availability. A disabled attribute was used to grey out options.
  • Suggestion: remove the disabled attribute so buttons remain clickable, or replace it with an “unavailable” CSS class (supported by the theme) to preserve styling without disabling.

Issues encountered:

  • Removing disabled initially broke the display; likely caused by a typo or malformed attribute (missing quote/bracket) and/or HTML comments inside a tag, which can break markup.
  • When trying the class approach, all items appeared available, suggesting implementation errors.

Resolution:

  • After reviewing a Loom video, the OP found a typo in their code and fixed it. The strikethrough styling remained while maintaining interactivity.

Artifacts central to understanding: a screenshot showing broken variant UI and a Loom video walkthrough.

Status/outcomes:

  • Resolved for the original poster by correcting a typo and avoiding disabled in favor of proper classes.
  • Another participant requested help; no generalized step-by-step fix was posted, so the thread remains open for them.
Summarized with AI on January 5. AI used: gpt-5.

Can you help me solve the same problem ?