Salesforce Docs Portal

Customize the Theme of Your Experience Builder Site

Customize the theme of your Experience Builder site by adjusting everything from the size and color of your headers and footers, to the fonts and colors for active text. We can get you started, but you get to make the final tweaks to make the theme your own.

Required Editions

Available in: both Salesforce Classic and Lightning Experience
Available in: Enterprise, Performance, Unlimited, and Developer Editions
User Permissions Needed
To customize or publish an Experience Cloud site:
  • Create and Set Up Experiences AND View Setup and Configuration AND be a member of the site

    OR

  • View Setup and Configuration AND be a member of the site AND have appropriate role-based site access

Every pre-built theme is loaded with options to help you achieve the style you want without ever dealing with code. And we remember how you set up each theme so you can change between them easily.

If you previously customized a pre-built theme, when you reactivate it you can decide to use your current settings or replace them and start over.

Using current settings for reactivated theme

Note
Note Using either Reset or Replace and start fresh deletes all of your customizations.
  • Branding sets
  • Theme regions (settings for common elements across pages like headers)
  • Theme settings
  • Custom theme layouts
  • Custom theme layout assignments for pages
  • Custom CSS overrides
These settings aren’t retrievable, so be careful about selecting either Reset or Replace and start fresh.

Changing themes preserves your content, but a new theme doesn’t necessarily display your content in a useful or desirable manner. After a change, always reconfirm that your site still works the way you want it to.

  • Adjust the Style and Layout of Your Site Theme
    Experience Builder sites include several pre-built themes that you can modify easily. In addition to customizing the layouts, you can configure colors, fonts, images, sizes, and actions with a ton of choices and levers.
  • Theme Guidance: Header Components
    Headers provide context and easy navigation throughout a site.
  • Theme Guidance: Hero Component
    Hero images are large images that are designed to dominate the visual field of a page and grab attention.
  • Theme Guidance: Search Component
    Multiple search components and placement options give you flexibility to design the right experience for your customers.
  • Custom Theme Layouts and Theme Layout Components
    Theme layouts and theme layout components combine to give you granular control of the appearance and structure of each page in your site. Customize the layout’s header and footer to match your company’s style. Configure theme layout properties. Or use a custom search bar and user profile menu. Then use theme layouts to assign theme layout components to individual pages allowing you to quickly change layouts from one central location. Whether you’re a consulting partner or an ISV, or you simply want to revamp your own site, custom theme layouts make it easy to rebrand.

See Also