As of May 7, 2025, it's not yet possible to natively bind Webflow's Component Variants to a CMS field so that you can have item-specific variants.
However Webflow's Variants feature is well-designed and it's not difficult to do yourself.
How it Works
How Component Variants work
If you look at the generated HTML you can see the variant class name, which looks like this-
w-variant-91cbf358-3019-bb0b-e06f-897a35847dd0
Usually you'll find it next to other class names on the affected elements, like this, which shows 2 classes, `heading` and the specific variant class.
heading w-variant-91cbf358-3019-bb0b-e06f-897a35847dd0
When you render a Base variant element, it would not have a variant class, this same element would just be;
heading
How to Use this for CMS Variant Binding
What you can do is add the variant class yourself from a CMS binding, and Webflow will merge them nicely to create your variant.
Here's how I'd keep it clean;
- Create a Variants CMS collection, and list your Variants in it. Have a plain text Class field. Add your variants, and each of their classes.
- Then in your data CMS collection, add a single ref to Variant, so that you can choose the Variant for each item.
I'm recommending this approach because it would be the easiest to change if Webflow does create a Variant field type someday.
Then in your component, you attach and bind the variant like this;
- On every element within the component that uses variant-specific styling, add a custom attribute named
classand bind it to a component property named e.g.Variant Class. The first time you try to bind, you'll be creating this property [ so that it's an attribute property type ], and then after that, you can just pick the existing property. - Then exit the component, and bind your Variant Class to the Variant field of the collection list or page it's in.
If you've set it up right, everything will look right in the designer as well, and you can publish to verify the code.
