Brand Your LWR Site

Build LWR sites that consistently match your brand with the new Lightning Web Runtime (LWR) design system. The system includes base components that follow design best practices, and uses --dxp styling hooks to make it easier to get the look you want.

  • How Branding Works in LWR Sites

    With the Lightning Web Runtime (LWR) design system, you can modify base and custom Lightning web components to achieve a consistent look and feel across your LWR site. The system uses --dxp styling hooks, which map to properties in the Theme panel, to help you more easily apply branding to your entire site.

  • Enable --dxp Styling Hooks

    If you created your LWR site before Summer ’21, enable --dxp styling hooks by adding the DXP branding style sheets to your site.

  • --dxp Styling Hooks in LWR Sites

    With --dxp styling hooks, you can set a single hook that affects both base and custom Lightning web components throughout your LWR site in Experience Cloud.

  • How --dxp Styling Hooks Map to Theme Panel Properties

    Each declarative property in the Theme panel maps to one or more programmatic --dxp styling hooks. When a user updates a property in the Theme panel, the system automatically updates any Lightning web component that uses the hooks associated with that branding property.

  • Use --dxp Styling Hooks in Custom Components

    To build a custom Lightning web component for your site that uses the design system, use the appropriate --dxp styling hooks.

  • Override Component Branding in LWR Sites with Custom CSS

    Occasionally, styling hooks are insufficient to style a component exactly the way you want. In this situation, you can use CSS selectors to target and style preapproved “parts” within a component.

  • Create a Color Palette for Page Sections and Columns

    On many websites, it’s common to have sections of a page, such as the header, footer, or columns and banners, that use different colors from the overall site. For example, perhaps you want to create a header with a dark background and a light foreground, whereas the rest of your site does the opposite. To achieve this, you can create separate color palettes and apply them to these page areas.

  • Create a Configurable Site Logo Component

    Use the --dxp-s-site-logo-path and --dxp-s-site-logo-url global styling hooks to create an easily configurable site logo component that you can add to your site pages. When you update the Site Logo property in the Images tab of the Theme panel, the system automatically updates any component that references the hooks.

  • Add Custom Fonts

    You can add custom fonts by uploading the font file as a static resource. Alternatively, you can reference a file that’s hosted externally.

  • Remove SLDS

    If necessary, you can remove Salesforce Lightning Design System (SLDS) from your site.