How to create aem content fragments ?

Posted in AEM Tutorials By Raj On December 3, 2016

If you are new to aem content fragments, I request you please read this introduction to aem content fragments to get some idea, this article covers how to create content fragments and variations

The content fragment is a re-usable asset which contains text elements and reference to other assets such as images, videos etc…  to create a content fragment I am going to open DAM folder, in Touch UI you can open it by going to http://localhost:4502/assets.html/content/dam

I am also going to create multiple variations one is for desktop and another one is for mobile, on selection of mobile variations the content of content fragment will display mobile content

Creating Content Fragment

On top left corner, there is an create button using which you can create new Content Fragment (refer screenshot below)














Here I am using OOTB template so I selected simple fragment template but, we can create our own custom template I will cover creating custom template in my next article, once we select “Simple Fragment” then click on next button, in the next window enter title and description


Once the content fragment is created to author text you need to edit it, there are three options to author text such as rich text, plain text, and Markdown, you can create variations by clicking on variations tab

In variations tab, click on “create variation” and enter title as “Mobile” and provide some description

Once variation is created just author some text and click on tick icon to save content


Now, open any page and select parsys and add Content Fragment component ( refer screenshot below )


Next, on left-hand side Assets drop-down select content fragments, the list of content fragments which are created will appear in bottom window, select any content fragment, drag and drop on the content fragment component


Finally, the hello world demo fragment text appears on the page, you can choose different variations by selecting variation dropdown


In the variations dropdown choose Mobile variation, then the “hello world mobile demo fragment” text should appear on the page ( refer screenshot below )


  • Saurabh Gupta

    Hi Raj,

    I want to use content fragment variation for mobile and desktop.
    For eg. I have one content fragment with two variation one is desktop and second is mobile. Let say in dekstop variation i authored the text like “this is desktop CF” and in mobile variation i authored the text like “this is mobile CF”. and if i will open the page in dekstop then it should show this is desktop CF and same page if i will open in mobile then it should show this is mobile CF. How can i achieve this use case?