Assign a theme to a component

Abstract

How to style your components using themes. Themes let you change the style of an existing component, for example, because of company branding changes or if you want a holiday edition, without interfering with the content.

In SXA, you can style your components using themes. Themes let you change the style of an existing component, for example, because of company branding changes or if you want a holiday edition, without interfering with the content.

Attaching a theme to a specific component is useful when you have a theme that uses a lot of JavaScript (JS) but is only used on a few pages. When the theme is attached to the specific component, its JS-libraries are only assigned to pages using that component, instead of the entire site. This can help alleviate performance issues.

To assign a theme to a component:

  1. In the Content Editor, navigate to Site, Presentation, and click Component Themes.

  2. Under Compatible Renderings, select the components that you want to assign themes to. You can assign the same theme to several components, and you can assign several themes to any component. You can also assign themes to specific components used in composite renderings.

  3. Under Component Themes, select the themes you want to assign. You can select from both Site Themes and Base Themes.

    Note

    If you remove the compatible rendering components that you selected, SXA always injects the themes selected under Component Themes on the page.

  4. Under Priority, select the display priority for the component theme. You can chose the display After Site Themes, which is the default, or Before Base Themes.

Note

This functionality works for both sites and shared sites. SXA injects themes from shared sites before component themes on main sites.