Use HTML Includes in your themes

Abstract

How to use create and configure HTML Includes for SXA themes, so you can inject external HTML content onto your pages.

With HTML Includes, you can define chunks of HTML that you want to be rendered into the HTML for a page. This can give faster load times and improved maintainability, since you can use external front-end assets. You can define any HTML, and configure it to render on any of the available locations in your HTML. HTML Includes are configured for the SXA themes, and you can use them both for themes that are assigned to components and that are assigned to a page.

Important

Before using HTML Includes for a theme, make sure the HTML structure is correct, so using the HTML Includes does not break the structure of existing pages that use the theme.

If you want to use HTML Includes, you must create them for the theme.

To create an HTML Include for an SXA theme:

  1. In the Content Editor, navigate to the theme you want to create an HTML Include for, for example, /sitecore/media library/Themes/Basic2.

  2. Right-click on the HTML Includes folder, and select HTML Include.

    Tip

    If your theme does not already have this folder, you can create it using this template, which is available as an insert option: /sitecore/templates/Foundation/Experience Accelerator/Theming/HTML Snippets/HTML Snippets Folder.

  3. Give the include a Name.

  4. Click OK.

For HTML Includes to properly render on pages using the theme, you must configure them.

To configure an HTML Include:

  1. In Content Editor, navigate to the HTML Include you want to configure.

  2. In the window for the HTML Include, specify the HTML and Location fields.

Field

Description

HTML

The HTML content of your HTML Include, for example link, script, and div.

Location

Specifies where in the output HTML to render the HTML Include. Can be head, body-top, and body-bottom.