Learn how to create page variants to target specific content to users.*
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
Minimum version requirements: Color-coding for page variants is available from AXIS 9.4 onwards.
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.
Note: Depending on the page type selected, the page header row may be inserted automatically.
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 a page variant to display the options that you can configure or, to create a new variant, click the button.
Note: When specifying options, the top-level category automatically selects all subcategory options. Expand the top level to display subcategories.
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.
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.
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.
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, click on 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.
Click on the icon to open the color palette. From here you can select a color, or enter a valid hexadecimal color code.
Click 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, simply click on the tab dropdown again, and you'll have the option to 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.