Experience Fragment Component (v1)

Last update: June 24, 2025

CREATED FOR:

  • Developer
  • Admin
  • User

The Core Component Experience Fragment Component allows the content author to place an experience fragment variation on a page while supporting a localized site structure.

Usage

The Core Component Experience Fragment Component allows the content author to select from existing experience fragment variations and place one on the content page. The Experience Fragment component also supports a localized site structure.

  • The component’s properties can be defined in the configure dialog.
  • Defaults for the component when adding it to a page can be defined in the design dialog.

Version and Compatibility

This document describes v1 of the Experience Fragment Component, which was introduced with release 2.6.0 of the Core Components in September 2019.

CAUTION
This document describes v1 of the Experience Fragment Component.
For details of the current version of the Experience Fragment Component, see the Experience Fragment Component document.

Localized Site Structure Support

The Experience Fragment Component is adaptive to localized site structures and renders the proper experience fragment based on the localization of the page. To do this, the experience fragment must meet the following conditions.

  • The Experience Fragment Component is added to a template.
  • That template is used to create a new content page that is part of a localized structure below /content/<site>.
  • The experience fragment referenced on a content page is part of a localized experience fragment structure below /content/experience-fragments that follows the same patterns as the site below /content/<site> including using the same component names.

In this case, the fragment with the same localization (language, blueprint, or live copy) as the current page will be rendered as part of the template.

This behavior is limited to Experience Fragment Components added to templates. Experience Fragment Components added to individual content pages will render the exact experience fragment renditions configured within the component.

Example

Let’s say that your content looks something like this:

/content
+-- experience-fragments
   \-- wknd
      +-- language-masters
      +-- us
         +-- en
            +-- footerTextXf
            \-- headerTextXf
         \-- es
            +-- footerTextXf
            \-- headerTextXf
      \-- ch
         +-- de
            +-- footerTextXf
            \-- headerTextXf
         +-- fr
            +-- footerTextXf
            \-- headerTextXf
         \-- it
            +-- footerTextXf
            \-- headerTextXf
+-- wknd
   +-- language-masters
   +-- us
      +-- en
      \-- es
   +-- ch
      +-- de
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

Notice that the structure below /content/experience-fragments/wknd mirrors the structure of /content/wknd.

In this case, if the Experience Fragment component /content/experience-fragments/wknd/us/en/footerTextXf is placed on a template, the localized pages created based on that template will automatically render the localized experience fragment that corresponds to the localized content page.

So if you navigate to a content page under /content/wknd/ch/de that uses the same template, /content/experience-fragments/wknd/ch/de/footerTextXf will be rendered instead of /content/experience-fragments/wknd/us/en/footerTextXf.

Fallback

The Experience Fragment Component will attempt to find a corresponding localized component in the following order.

  1. First it tries to find a language root.
  2. If not found, it tries to find a blueprint.
  3. If not found, it tries to find a live copy.
  4. If not found, it defaults to the experience fragment configured in the component.

Sample Component Output

To experience the Experience Fragment Component as well as see examples of its configuration options as well as HTML and JSON output, visit the Component Library.

Technical Details

The latest technical documentation about the Experience Fragment Component can be found on GitHub.

Further details about developing Core Components can be found in the Core Components developer documentation.

Configure Dialog

The configure dialog allows the content author to select the experience fragment variation that should be rendered on the page.

Experience Fragment Component's edit dialog

Use the Open Selection Dialog button to open the component selector to choose which experience fragment component variation to add to the content page.

If you add the Experience Fragment Component to a template, note that it will be automatically localized provided that the Experience Fragments are localized, so what is rendered on the page may vary from the component you explicitly select. See the example above for more information.

You can also define an ID. This option allows to control the unique identifier of the component in the HTML and in the Data Layer.

  • If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.
  • If an ID is specified, it is the responsibility of the author to make sure that it is unique.
  • Changing the ID can have an impact on CSS, JS and Data Layer tracking.