What is a variant?

A Variant is a context that can change the value of one or more properties. For each variation of a given variant, you can specify a new value for a property.

These contexts could be set or changed automatically by the experience creator, the content editor, or left as a choice for members of the target audience. 

Examples: 

• In a network of care dealerships, each Location will have its own contact information or staff members list. The value of the location will be set automatically based on the actual physical location of that Player. 
• In a museum experience, the Language can be selected through the click of a button by a visitor. All languages are available in the experience, but only one is displayed at a time. 

Looking at the last example above:

• Variant: Language
• Variation: English, French, ... 

Add a variant to your base

In the Variants panel of the Structure tab, click the blue plus (+) icon then choose a color and assign a name to your variant. You can then add as many variations as you need for that variant. 

You can also add as many variants as you require for a base. 

When to use a variant?

You can use a variant at two different levels

• On a property of a Component
• On a Component as a whole

Applying a Variant to a component property

If you have a group or a collection where some elements but not all will vary based on a context, you might want to add a variant to these elements. 

For example, a Language variant will often affect text but not images or numeric values. In the example below, the Title will change but not the logo.

To add a variant to a property, hover your mouse over that property in the Structure panel, then click the Add Variant icon:

Using a Variant on a Component

If the whole Component varies based on the context, you can assign a Variant to the Component itself. 

If your Component is a Group, then all of its properties will change when selecting a new variation. If your Component is a Collection, then it's the entire list that will change. 

Two examples: 

If you have defined a contact Group for a network of dealerships, you might want to apply a Location variant to this group.

If you are displaying menus in a restaurant, and there is no overlap between the breakfast and lunch menus, then the Menu itself can become a variant applied to the collection of products/meals. 

To add a variant to a Component, hover your mouse over the Component name in the Structure panel, then click the Add Variant icon:

When not to use a variant?

If you have a collection of items and you want to be able to

• display all the items at once
  and
• display a subset of those items, either automatically or manually

then you should consider using filters instead of variants. This is also true if you have some items that belong to multiple variations of your variant, such as a restaurant menu where only a few items are changing between lunch and dinner. 

If you have a doubt between variant or filter, contact our Support Team and we'll be glad to help you make that decision based on your use case. 

Video Explanation - Using Headless CMS variants to create multi-language experiences.

You will find in the Quarterly Q&A Fall Edition 2023 video an example on how to use the H-CMS variants to create multi-language experiences.