This article covers how to add and configure page variants. Read on or jump straight to a specific topic using the quick links below.

• How do page variants work?
• How do I add a new page variant?
• How do I configure page variants?
• Color-coding page variants

You may wish to create variations of an existing page that will show content in a different order for each combination of device, user group, language, segmentation tag, date, and/or time of day.

Consider a use case where you want an additional page variant for another language but with exactly the same content. All you need to do is duplicate the original page variant and update the language settings on the newly created variant. If you're working with dynamically generated lists, you need to re-label the rows as per your preferred language.

How do page variants work?

When your users visit a page within the app, AXIS reads variants from right-to-left, checking which variants match the users' device and their settings. The app then knows to display the appropriate page variant, meaning you're entirely in control of what your users see.

How do I add a new page variant?

Select thebutton next to the variant tabs on your page. This creates a new page variant to the right.

How do I configure page variants?

Newly created or existing page variants are easily configurable in line with your use case.

Below is an example of a single page with two page variants.

Select a page variant to display the options that you can configure or, to create a new variant, select the button. 

Devices

Any Device is selected by default, which means the page variant displays on any device used.

To determine which devices can access your page, select from the list below. Expand to view further category options by clicking the arrow.

Users

Any User is selected by default, meaning any type of user from the list below has access to the page variant.

To determine which users can access your page variant, select from the list below. Expand to view further category options by clicking the arrow.

Languages

Any Language is selected by default, meaning your page is not set to one specific language—your page displays for all available language types listed below.

To specify a language for your page, make a selection from the list below. Note that only one language selection can exist per page variant.

Segmentation tags

Target your pages at specific groups based on age, activity, behavioral analytics, etc. Depending on how you've grouped your users, you can easily direct content to them. Read our article to learn more about segmentation tags.

Date period (scheduling)

Date periods are often referred to as scheduling, meaning you can specify a date and time in which your content is available to your end-users. Read our separate article to learn all about variant scheduling.

Color-coding page variants

From AXIS 9.4 you have the ability to use color-coding to distinguish between page variants. You might want to do this, for example, to more easily identify page variants created by different editorial teams within your business.

To apply a color to a variant, select the dropdown on the variant tab, and select Add details. 

This opens the Variant details screen. Here you can add a short label for the variant color code.

Select the icon to open the color palette. From here you can select a color, or enter a valid hexadecimal color code.

Select Confirm to save your changes. The color-coding and label will appear on the variant tab.

If you need to edit the color-coding on the variant, select the tab dropdown again where you can edit or delete the details.

If you choose to Delete, you'll see a message asking you to confirm the deletion. Once you've done so, the color-coding and label are removed from the variant tab.