Create a variant (Beta)

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
component.createVariant(options: CreateVariantOptions): Promise<Variant>

1
component.createVariant(options: CreateVariantOptions, sourceVariantId: string): Promise<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'

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
}