Sharing Design Resources Across Sites
Release Feature (LPD-57283) Liferay DXP 2026.Q3+
Add style books and page fragments to a design library, then connect the sites that use them.
Adding Design Resources to a Design Library
Open the Global Menu (
) and click Applications → Design Libraries, then click the library.
The library’s New menu lists only the resource types you have permission to add. When you can add one type, the control reads that type’s name instead of New. When you can add none, it doesn’t appear.
Adding a Style Book
-
In the library, click New → New Style Book.
-
In the Add Style Book dialog, set these fields:
Create Style Book For: The theme the style book applies to. The list holds every theme that provides a frontend token definition, which on a default installation is CMS Theme and Classic Theme.
Name: The style book’s name.
A style book’s available tokens come from its theme’s frontend token definition, so the theme you choose determines which tokens you can set. If no theme provides a token definition, the dialog reports that no themes are available.
-
Click Save.
Liferay DXP opens the new style book in the Style Book Editor.
-
Set the style book’s token values, then click Publish.
The editor saves your work as a draft as you go, and the Saved indicator refers to that draft. Connected sites use the style book’s values only after you publish it.
-
Use the back control at the top of the editor to return to the library, where the list of design resources now includes the style book.
Once a site is connected, you can preview a library style book against that site’s pages from the editor. Each page appears with its site’s name.
Adding a Page Fragment
Every fragment belongs to a fragment set.
-
In the library, click New → New Basic Fragment or New Form Fragment.
Choose New Basic Fragment for a fragment you can place anywhere on a page, or New Form Fragment for a form fragment, which you map to a field in a form. Both types are written in HTML, CSS, and JavaScript.
-
In the Add Fragment dialog, enter a Fragment Name.
When the library already holds fragment sets, select the Fragment Set to hold the fragment, or click Save In New Set and replace the default Fragment Set Name. When the library holds no sets yet, the dialog asks for the Fragment Set Name directly and creates the set along with the fragment.
-
Click Save.
Liferay DXP opens the new fragment in the Fragments Editor.
-
Add the fragment’s HTML, CSS, and JavaScript, then click Publish.
A new fragment starts as a draft holding an empty element, and connected sites can use it only after you publish it.
-
Use the back control at the top of the editor to return to the library.
The library’s list holds fragment sets rather than individual fragments, so open the set to reach the fragment again.
To add an empty set, click New → New Fragment Set, then replace the default Name and add an optional Description.
To import fragments from a ZIP file, the library must already hold a fragment set. Click the set in the library’s list, then click Actions (
) → Import next to the set’s name. The ZIP file’s own fragment sets are recreated in the library, so the set you open is only the entry point.
The same menu offers Export, which downloads the set’s fragments as a ZIP file. Export becomes available once the set holds a published fragment.
A library cannot hold fragment compositions. See Fragment Composition and Import Limitations.
A library’s fragments are written and managed the same way as a site’s own, though you reach a fragment’s actions from the library’s resource list rather than the site’s Fragments application. See Managing Fragments for those actions and Using Fragments for how fragment code works.
You cannot delete a fragment that any site’s page uses, including a site that has since been disconnected from the library. The View Site Usages report lists connected sites only, so a page on a disconnected site blocks a delete without appearing there, and the error names page templates even when an ordinary page is the blocker.
Connecting Sites to a Design Library
-
Open the library and click More Actions (
) → Connected Sites. -
In the Site field, enter an active site’s name, then select it from the results.
-
Click Connect.
Liferay DXP confirms the site is connected to the library.
Connecting a site makes the library’s design resources available to that site’s pages. It does not change how any page looks. Each page keeps the style book it already uses until you select one of the library’s style books for it, and there is no bulk apply.
To disconnect a site, click Disconnect (
) next to it in the same dialog. Disconnecting takes effect without a confirmation, and any page using one of the library’s style books falls back to its site’s default style book.
A page using one of the library’s fragments keeps rendering unchanged, because each fragment placed on a page holds its own copy of the HTML, CSS, and JavaScript. The library’s fragments leave the site’s page editor, so you cannot add new ones from the library, and you can no longer propagate later library changes to the fragments already on its pages, because the site drops out of the fragment’s site usages.
Once a page uses a library style book, publishing a change to that style book reaches the page directly. A change is neither staged for review nor overridden per site.
Where a Library’s Design Resources Appear
Style Books
Only the library style books built for the page’s theme appear, so a style book created for CMS Theme is not offered for a page using Classic Theme.
A style book from a library carries a badge showing the library’s name, which distinguishes it from the site’s own style books.
You can select it in either place:
- The Select Style Book dialog, opened from the Style Book field in a page’s Design settings under Basic Settings. Its table view adds a Design Library column naming each style book’s source.
- The Page Design Options sidebar in the page editor.
See Choosing a Style Book for a Page for the page-level procedure.
If a library style book you expect is missing from the list, check that its theme matches the page’s theme.
Page Fragments
The library’s published fragments appear in the Fragments and Widgets sidebar of the page editor, alongside the site’s own. A set that comes from a design library carries an icon whose tooltip names the library, which distinguishes it from the site’s own sets. A set whose fragments are all unpublished does not appear.
By default, publishing a change to a library fragment does not update the fragments already placed on pages. To see every connected site that uses a fragment and propagate the change to it, click Actions () → View Site Usages on the fragment. See Propagating Fragment Changes.
Fragment Composition and Import Limitations
A design library cannot hold fragment compositions. When you import a fragment ZIP file that contains compositions into a library, the import adds the file’s fragments and lists each composition among the items it couldn’t import, with no explanation. Save each composition in the site where you use it.
In a site, you cannot create a composition from a fragment whose design library is not connected to that site. When you click Save Composition, the Save Composition Not Allowed dialog reports that some fragment references are missing and advises reimporting the fragments, which doesn’t clear the error. Connect the library to the site instead, and then you can save the composition.
Importing a page or page template into a site skips fragment page elements whose design library is not connected to that site. A page template import lists each skipped fragment by its key. When the same skip happens as you add a page element to a page, the fragment is dropped without a message. Connect the library to the site before you import.