Variant Option Counter

A display-only text element showing how many values a product option has (e.g. "Available in 8 Colors").

Last updated

Variant Option Counter icon

How to use

  1. Connect ⛁ Butter Data to the product's Butter Data CMS field.

  2. Set Option Title to the option you want to count (case-insensitive, e.g. "Color").

  3. Set ↳ Singular and ↳ Plural for the label after the count (e.g. "Color" vs. "Colors").

  4. Optionally add Prefix / Suffix copy (include spaces as needed, e.g. "Available in ").

  5. Style Font, Color, and Transform.

Static count, not live selection

This is a display-only element — it counts the values available for the given option in the connected Butter Data and does not react to what the customer has currently selected. It switches automatically between ↳ Singular and ↳ Plural based on the count, and subscription choices don't count toward the tally — only real product options like Color or Size. It renders an empty, invisible placeholder when Butter Data is missing, Option Title doesn't match any option on the product, or the count is 0.

Questions? Join our Slack community