In almost every CQ-project you get a ques­tion like ‘but I want to style this page *now* to match the new mar­ket­ing cam­paign’, or ‘can’t we have a com­po­nent where I can enter HTML’?

With these ques­tions you always have to think twice how to imple­ment this, and also if you even want to have this avail­able for the author. But from the author side it makes sense to have tool­ing avail­able that can react quickly on design-changes with­out have to (re)deploy code.

Now with 5.6.1 you have the ‘Desig­n­Im­porter’ com­po­nent that can help you with these questions.

In this blog­post I will guide through the process how to do this, and the nice thing is…no cod­ing involved.

Desig­n­Im­porter, what is it?

If I would need to explain it in once sen­tence I would go for: “The DesignImporter-component lets you import a com­plete HTML-design (css/js/images/html) inside a part of your page”

I have pre­pared a sim­ple exam­ple to demon­strate how the Desig­n­Im­porter works, let’s first enable the com­po­nent on this Geometrixx demo page: http://localhost:4502/cf#/content/geometrixx/en/toolbar.html

Go to the Design-mode and enable the Desig­n­Im­porter com­po­nent, when you have done that drag the com­po­nent onto the page.

The two images below show you the steps.

Import your design

Now you can import your design into your page, I have pre­pared this invalid link: /content/dam/cemblogs/fvisser/designimporter/designimporter.zipdesign-file. Either double-click on the ZIP-logo or drag the file on the component.

When you have done this you will see this appear­ing on the page.

As you can see a new design is now avail­able inside your exist­ing page, and the best thing for the author.…: no cod­ing involved.

Let’s have a fur­ther look

If you hoover over the items you will see that actu­ally we have now three com­po­nents: title, image and text component.

When you go to the details of the image you see that it already has a title and alt-text.

How does it work?

So you are won­der­ing what is then inside the zip-file, so let’s have a look.

index.html -> con­tains the HTML that is imported, with the spe­cial cq-ids the hint to cq to cre­ate components

img-folder -> con­tains the images

css-folder -> con­tains the css-files

Here you see an overview on the spe­cial ids used inside the index.html file.

<div id=“cqcanvas”>
is the start­ing point for the import process

<div data-cq-component=“title”>This points to the title-component</div>

<div data-cq-component=“image”>points to the image component</div>

<div data-cq-component=“text”>points to the text component</div>

<img src=“img/product.png” alt=“Photo of Polar Brake Gog­gles” title=“Polar Brake Gog­gles” />
Image com­po­nent that spec­i­fies the alt-text and title

Other options available:

In the sam­ple that I used the HTML-file pointed to the stan­dard com­po­nents (title, image, text). If you want to use your own com­po­nents in the design-file you can do this like this.

Use your own components

<div data-cq-component=”/apps/myproject/component/mycomponent”>custom component</div>


Here is more doc­u­men­ta­tion around this feature:



Sachin Mak
Sachin Mak

"Let Simplicity be the master of all Complexity" is bang on.. At times we need to understand Capability, usefulness, usability and experience to create a full circle for customer success.. Very well said :)