ComponentsCreating & Retrieving Components

Set variant settings (Beta)

component.setVariant(variantId, settings)

component.setVariant(settings)

Updates the settings of a variant.

Currently only changing the name of a variant is supported.

Beta

These methods are in public beta and may change with future releases.

Syntax

To update a variant by passing its ID and settings as separate arguments:

1component.setVariant(variantId: string, settings: { name: string }): Promise<Variant>

To update a variant by passing a single options object:

1component.setVariant(options: SetVariantOptions): Promise<Variant>

Related interface:

1interface SetVariantOptions {
2  id: string;
3  name: string;
4}

Parameters

Two-argument form:

  • variantId: string — The ID of the variant to update. Pass 'base' to update the base variant.
  • settings: object — An object specifying the settings to update:
    • name: string — The new name for the variant.

Options object form:

  • options: SetVariantOptions — An object specifying the variant to update and its new settings:
    • id: string — The ID of the variant to update. Pass 'base' to update the base variant.
    • name: string — The new name for the variant.

Returns

Promise<Variant>

A Promise that resolves to the updated Variant object.

PropertyTypeDescription
idstringThe unique identifier of the variant.
namestringThe name of the variant (may differ from the requested name if auto-incremented).
isSelectedbooleanWhether this variant is currently selected in the Designer.

Examples

Update a variant using the two-argument form:

1const component = await webflow.getCurrentComponent()
2
3if (component) {
4  const variant = await component.setVariant('variant-123', { name: 'Primary Hero' })
5  console.log(variant)
6  /*
7  {
8    id: 'variant-123',
9    name: 'Primary Hero',
10    isSelected: true,
11  }
12  */
13}

Update a variant using the options object form:

1const component = await webflow.getCurrentComponent()
2
3if (component) {
4  const variant = await component.setVariant({
5    id: 'variant-123',
6    name: 'Primary Hero',
7  })
8  console.log(variant)
9  /*
10  {
11    id: 'variant-123',
12    name: 'Primary Hero',
13    isSelected: true,
14  }
15  */
16}

Rename the base variant:

1const component = await webflow.getCurrentComponent()
2
3if (component) {
4  const base = await component.setVariant('base', { name: 'Default' })
5  console.log(base.name) // 'Default'
6}

Name conflicts auto-increment:

1const component = await webflow.getCurrentComponent()
2
3if (component) {
4  // 'Primary Hero' already exists
5  const variant = await component.setVariant('variant-456', { name: 'Primary Hero' })
6  console.log(variant.name) // 'Primary Hero 2'
7}

Designer Ability

Designer AbilityPermissionLocaleBranchWorkflowSitemode
canModifyComponentsanyanyanyCanvasDesign