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:

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

To update a variant by passing a single options object:

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

Related interface:

interface SetVariantOptions {
  id: string;
  name: string;
}

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:

const component = await webflow.getCurrentComponent()
if (component) {
  const variant = await component.setVariant('variant-123', { name: 'Primary Hero' })
  console.log(variant)
  /*
  {
    id: 'variant-123',
    name: 'Primary Hero',
    isSelected: true,
  }
  */
}

Update a variant using the options object form:

const component = await webflow.getCurrentComponent()
if (component) {
  const variant = await component.setVariant({
    id: 'variant-123',
    name: 'Primary Hero',
  })
  console.log(variant)
  /*
  {
    id: 'variant-123',
    name: 'Primary Hero',
    isSelected: true,
  }
  */
}

Rename the base variant:

const component = await webflow.getCurrentComponent()
if (component) {
  const base = await component.setVariant('base', { name: 'Default' })
  console.log(base.name) // 'Default'
}

Name conflicts auto-increment:

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

Designer Ability

Designer AbilityPermissionLocaleBranchWorkflowSitemode
canModifyComponentsanyanyanyCanvasDesign