This article covers how to add and configure page variants.
Compatibility notes: Color-coding for page variants is available from AXIS 9.4 onwards. From AXIS 10.0, the feature has been updated to be called a variant tag instead of variant details.
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 a user visits a page within an app, AXIS checks the user’s device and settings, then goes through the variants from right-to-left, and displays the first variant applicable to that user. This means you're entirely in control of what your users see, for example, child appropriate content for a user account whose settings tell AXIS they are under a certain age, or a variant designed for users that have their language set differently from the default.
The variant at the far left is the Default variant. In the event that none of the other variants match a user’s circumstances, this variant is designed to match all users. This means if no other specific variant is triggered, your user will always have this variant applied to them.
In the header, next to the page title, you will see the name of the variant that is currently open, to make it clear which variant is selected at any point.
If you navigate to Metadata from the side menu, then navigate back to Content, you will return to the variant that you had open before you navigated away, which is made clear by the name of that variant once more being displayed in the header.
How do I add a new page variant?
Select the plus button next to the variant tabs on your page to create a blank page variant to the right.
Alternatively, to duplicate an existing variant, click the dropdown arrow in the tab of the variant to be copied, and select Duplicate, which creates a duplicate page variant at the right hand end of the tabs. You can then configure either type of variant as required.
Note: Depending on the page type selected, the page header row may be inserted automatically for blank variants.
Warning: Variants must contain at least one row to save successfully. If you add a new variant and fail to specify details, you'll get an error when you try to save.
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 an existing page variant or create a new one to display the options that you can configure.
Note: When specifying options, the top-level category automatically selects all subcategory options. Expand the top level to display subcategories.
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.
Adding a tag to a page variant
Compatibility notes: In AXIS 9.4, the ability to color code a page variant by adding a tag was introduced (then titled Add Details). In AXIS 10, the feature has been updated as follows:
You can add a tag to help distinguish key points between page variants at a glance. Tags consist of up to 10 characters and are color coded, and are displayed in the variant’s tab, and also the header.
To apply a tag to a variant, select the dropdown arrow on the variant’s tab, and select Add tag from the dropdown list.
This opens the Variant tag screen. Here you can add the Tag label and select the color code.
To choose a color, select the plus icon to open the color palette. From here you can either select a color or enter a valid hexadecimal color code.
Select Confirm to save your changes. The tag will appear on the variant tab.
If you need to edit or delete a variant tag, click the tab dropdown arrow - if there is a tag in place, Edit tag and Delete tag will be available.
To save a variant
To save a variant, click Save Variants in the top right hand corner of the screen. This saves all updated variants. Note that this does not publish the variant.
To delete a variant
To delete a variant, click the dropdown arrow in the tab of the variant and click Delete. You must have at least one variant remaining in order to be able to delete additional variants. Note that if the variant has previously been published, you must click the Save and Publish button after this for it to take effect. Please note that once a variant has been deleted, it cannot be recovered, so do this with caution.