Agencies
Services
Working With Experience Fragments
Experience Fragments (XFs) are reusable pieces of a webpage that contain both content and layout. Instead of building the same section of a page over and over, you can build it once in AEM and reuse it anywhere the same experience is needed.
Table of Contents:
What Are Experience Fragments?
You can think of an Experience Fragment like a pre‑built block of webpage content. It might include text, images, buttons, icons, or even detailed formatting and layout that can be tedious to recreate each time. For example, imagine your organization has a promotional banner that says “Seasonal Flu Shots Available!” and you want it displayed across multiple pages on the site. Instead of rebuilding that banner on every page, you can make an Experience Fragment and insert it wherever you need it.
Because an Experience Fragment acts as a central source of content, any update you make to the fragment automatically appears on every page where it is used. This helps prevent the common problem of missing or inconsistent updates when sections are copied and edited manually. Changes occur faster, are more accurate, and require less repeated work for authors and developers.
This idea is similar to how Content Fragments work in the Assets area of AEM: one source, many uses. The difference is that Experience Fragments are designed to hold not just text-based content, but also structured layout, styling, and components — making them powerful tools for building consistent experiences across your entire site.
Creating & Updating Experience Fragments
Step 1 - Go to the Experience Fragments Section of AEM
Experience Fragments are handled separately from Sites and Assets, and are only accessed by clicking the "Experience Fragments" button on the Landing Page (below).
Step 2 - Navigate to Your Agency's Experience Fragment Folder
Once within the Experience Fragment section, the layout is the same as Assets, showing folder structures that hold the html-curated fragments. Traverse through the list of items and find the Experience Fragment that you need to update for your agency. For example below, the Global Header is an Experience Fragment and is selected for update.
Step 3 - Create/Edit Your Experience Fragment
Experience Fragments are HTML page fragments that are insertable. So, just like with pages, they are Created and Edited the same way:
- To create new Experience Fragments, go to the Agency folder and click on Create > Experience Fragment.
- To edit existing Experience Fragments, go to the Agency folder and hard-select the fragment for editing, then click on Edit to open the Experience Fragment. Authoring Experience Fragments is the exact same process as for Pages.
Step 4 - Insert the Experience Fragment on Pages
Experience Fragments get inserted on pages using the actual Experience Fragment component. The only setup for the component is to set which Experience Fragment is used in the Variation fragment path field.
Step 5 - Publish the Experience Fragment
Experience Fragments need published just like any other content in AEM. It is recommended to use the SOI Request for Activation workflow to publish the fragment just as would be done with pages. After publishing, any updates made will be reflected Live across all instances of Experience Fragment components referencing that specific fragment.