Customize a Component with Template Extensibility

In this tutorial, we'll use template extensibility to create a custom component for a site. In this example, we'll create a custom footer. Because a footer is an existing component in the base template and we don’t want to change the page layout, we’ll override the footer at the component level.

For more guidance, see this documentation: Best Practices and Troubleshoot.

Before running the commands in this tutorial, replace any placeholders with actual values. Placeholders are formatted like this: $PLACEHOLDER.

Use the headings on the right side of the page to move through this tutorial.

To complete this tutorial, do either of these:

  1. Use a project created with PWA Kit version 3.x.

    or

  2. If you don’t have a project, create a PWA Kit project by running:

    npx @salesforce/pwa-kit-create-app@latest ——outputDir $PATH/TO/NEW/LOCAL/PROJECT

  • Under overrides/app, create a folder called components.
  • In the components folder, create a folder called footer.
  • In the footer folder, create a file called index.jsx.

The new folders and file have this structure:

Associated screenshot

Add this code to overrides/components/footer/index.jsx:

On the homepage, the footer looks similar to the one shown below. For example, the background color and wording are customized.

Associated screenshot