Variants

Variants are the different versions of a component that Morph can show. Every rule has at least one variant (the default), and you add more for each audience segment you want to target.

Default variant

The component you select when creating a rule becomes the default variant. It's shown when:

• No other variant's conditions match the visitor
• The rule is in Draft or Paused state
• The Morph runtime fails to load for any reason

The default variant is your safe fallback — design it for your broadest audience.

Adding variants

1. Open a rule in the editor
2. Click Add Variant
3. Morph duplicates the original component on your Framer canvas
4. Edit the duplicate — change text, images, colors, or any property
5. Name the variant and set its conditions

You can add as many variants as you need. They're evaluated in order — the first match wins.

Editing variant content

Variants live on your Framer canvas as regular components. You edit them just like any other Framer element. Changes to the visual content are picked up automatically when you publish.

The variant's conditions and metadata (name, order) are managed through the Morph plugin.

Variant evaluation order

The runtime evaluates variants from top to bottom. The first variant whose conditions all match is shown. You can reorder variants in the plugin to control priority.

Example: If you have three variants for a hero:

1. "Google Ads" — utm_source = google
2. "LinkedIn Ads" — utm_source = linkedin
3. Default — no conditions

A visitor from Google sees variant 1. A visitor from LinkedIn sees variant 2. Everyone else sees the default.

Deleting variants

To remove a variant:

1. Open the rule editor
2. Click the delete icon next to the variant
3. Save your changes

Deleting a variant removes it from the rule configuration. The duplicated component on your canvas is also cleaned up automatically.