Creating and Managing Element Variations

Beta Feature Liferay DXP 2026.Q3+

An element variation changes one element of a content page for a specific audience, instead of duplicating the whole page into a separate experience. Variations can replace the element’s inner HTML, run JavaScript against the element, or hide the element. Variations are applied in the browser, on top of the experience Liferay DXP renders for the visitor.

Note

Replacing an element’s inner HTML or running JavaScript against it requires custom markup or code. Hiding the element does not.

Prerequisites

Using element variations has these requirements:

• The LPD-85746 feature flag is enabled.

• At least one audience exists.

A variation can target only an editable fragment element on a content page. Elements that carry no editable ID, including widgets and containers, do not appear in the Page Element picker.

Creating an Element Variation

1. Open the Site Menu () and go to Site Builder → Pages.

2. Click Actions for a content page and select Edit.

3. In the page editor toolbar, click Create Variations next to the experience selector.

   

   The element variations editor opens, with a sidebar on the left and a preview of the page on the right.

4. Use the Experience selector at the top of the sidebar to choose the experience the variation belongs to.

5. Click New.

6. Enter a name for the variation.

7. Select an element in the Page Element picker.

   Each option is labeled with the fragment name and the ID of the editable element inside it, such as Banner (title). Hovering over an option highlights that element in the preview.

   

   When the element you want is missing from the list, it most likely does not have the data-lfr-editable-id attribute. See Fragment Specific Tags and Attributes Reference for more information on making fragment elements editable.

8. Select one or more audiences in the Audience field.

   An audience already used by another variation of the same page element does not appear.

9. (Optional) Toggle Hide Page Element to hide it from the set audiences.

   Tip

   The preview automatically updates as you make edits, so you can see the result of your changes.

10. (Optional) Enter custom markup into the HTML field.

    The markup replaces the element’s inner HTML.

11. (Optional) Enter custom code in the JavaScript field to run it against the element.

    The code runs after the HTML replacement and can use a variable named element, which holds the target element.

    Important

    Once the code has run, its effects stay applied to the preview even as you keep editing. Click Reload to load the preview again and run the current code from a clean page.

12. Click Save.

    Saving stores the variation on the page’s draft.

13. Publish the page.

Visitors see element variations only after the page is published. Publishing matches each variation to the experience it belongs to. Because detection runs in the browser after the page loads, visitors may briefly see the default content before a variation is applied.

Managing Existing Variations

The sidebar lists the variations of the selected experience, grouped under the page element each one targets. Every entry shows its name, its audiences, and a label for each part it defines: HTML, JavaScript, or Hide Element. A variation that is turned off also shows a Disabled label.

Each entry has an Edit quick action and an Actions menu with these options:

• Edit opens the variation in the form.

• Disable or Enable turns the variation off or on.

• Delete removes the variation.

Setting Audience Priority

A visitor can match several audiences at once, so the browser needs an order to decide which variation to apply. You can set that order in the sidebar, under Audiences Priority.

1. Click Edit next to Audiences Priority.

2. Drag the audiences into the order you want. The first audience takes precedence.

   

3. Click Save.

The list shows every audience in the instance, and the order applies to every element of the selected experience. When no audiences exist, the sidebar shows No Audiences Available instead of the list.

How Variations Are Applied

Only the variations belonging to the experience a visitor is served are considered.

A visitor can match several of an element’s audiences at once. When that happens, the audience ranked first in the audience priority order wins, and only the variation attached to it is applied. The rest are skipped, so a visitor sees one variation of any given element.

Two other factors affect what a visitor sees:

• HTML replaces the inner HTML of the target element, rather than being added around or beside it.

• A variation whose target element is absent from the rendered page does nothing, including its JavaScript.

Translating a Variation

The HTML and JavaScript values of a variation are localizable. Use the language picker in the form header to switch to another language, then edit the fields for that language. A visitor gets the value for the page’s language, falling back to the default language value when the field is empty for that language.

While you translate, the Name, Page Element, Audience, Hide Page Element, and Disable Variation fields are not localizable. These settings are shared across languages. The default language value appears under each code field for reference.

Related Topics

• Content Page Personalization
• Creating and Managing Experiences
• Audiences
• Creating and Managing Audiences