Create a variant (Beta)

`component.createVariant(options)`

`component.createVariant(options, sourceVariantId)`

Creates a variant of an existing component or duplicates an existing variant.

If a variant with the given name already exists, the name is automatically incremented (for example, 'Variant' becomes 'Variant 2').

Beta

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

Syntax

1 interface CreateVariantOptions {
2   /** The name for the new variant (required) */
3   name: string;
4   /** Whether to select this variant after creation (optional, defaults to false) */
5   isSelected?: boolean;
6 }

To create a variant, pass the options for the variant, including its name and whether to select it automatically:

1 component.createVariant(options: CreateVariantOptions): Promise<Variant>

To duplicate an existing variant, add the ID of the variant to duplicate as the second parameter:

1 component.createVariant(options: CreateVariantOptions, sourceVariantId: string): Promise<Variant>

Parameters

options : CreateVariantOptions — An object specifying the new variant’s settings:
- name: string — The name for the new variant.
- isSelected: Boolean — (optional) Whether to select this variant immediately after creation. Defaults to false.
sourceVariantId: string — The ID of the variant to duplicate.

Returns

Promise<Variant>

A Promise that resolves to the newly created Variant object.

Property	Type	Description
`id`	`string`	The unique identifier of the new variant.
`name`	`string`	The name of the new variant (may differ if auto-incremented).
`isSelected`	`boolean`	Whether this variant is currently selected in the Designer.

Example

Create a variant:

1 const component = await webflow.getCurrentComponent()
2 
3 if (component) {
4   // Create a variant and select it immediately
5   const variant = await component.createVariant({
6     name: 'Secondary Hero',
7     isSelected: true,
8   })
9   console.log(variant)
10   // { id: 'variant-123', name: 'Secondary Hero', isSelected: true }
11 
12   // Name conflicts auto-increment
13   const variant2 = await component.createVariant({ name: 'Secondary Hero' })
14   console.log(variant2.name) // 'Secondary Hero 2'
15 }
16 
17 // Name auto-increments on conflict
18 const variant2 = await component.createVariant({ name: 'Secondary Hero' });
19 console.log(variant2.name); // 'Secondary Hero 2'

Duplicate a variant:

1 const component = await webflow.getCurrentComponent()
2 
3 if (component) {
4   // Get the selected variant or the base variant as default
5   const selectedVariant = await component.getSelectedVariant()
6 
7   // Duplicate the selected variant
8   const duplicateVariant = await component.createVariant({
9     name: 'Duplicate of Secondary Hero',
10     isSelected: true,
11   }, selectedVariant.id)
12   console.log(duplicateVariant.name) // 'Duplicate of Secondary Hero'
13 }

Try this example

Designer Ability

Designer Ability	Permission	Locale	Branch	Workflow	Sitemode
canModifyComponents	any	any	any	Canvas	Design

1	interface CreateVariantOptions {
2	/** The name for the new variant (required) */
3	name: string;
4	/** Whether to select this variant after creation (optional, defaults to false) */
5	isSelected?: boolean;
6	}

1	const component = await webflow.getCurrentComponent()
2
3	if (component) {
4	// Create a variant and select it immediately
5	const variant = await component.createVariant({
6	name: 'Secondary Hero',
7	isSelected: true,
8	})
9	console.log(variant)
10	// { id: 'variant-123', name: 'Secondary Hero', isSelected: true }
11
12	// Name conflicts auto-increment
13	const variant2 = await component.createVariant({ name: 'Secondary Hero' })
14	console.log(variant2.name) // 'Secondary Hero 2'
15	}
16
17	// Name auto-increments on conflict
18	const variant2 = await component.createVariant({ name: 'Secondary Hero' });
19	console.log(variant2.name); // 'Secondary Hero 2'

1	const component = await webflow.getCurrentComponent()
2
3	if (component) {
4	// Get the selected variant or the base variant as default
5	const selectedVariant = await component.getSelectedVariant()
6
7	// Duplicate the selected variant
8	const duplicateVariant = await component.createVariant({
9	name: 'Duplicate of Secondary Hero',
10	isSelected: true,
11	}, selectedVariant.id)
12	console.log(duplicateVariant.name) // 'Duplicate of Secondary Hero'
13	}