Customize a Page with Template Extensibility

Let’s imagine that you want to add a component to a page and there’s no existing component that can be overridden. Page-level extensibility solves this problem. In this tutorial, we’ll use template extensibility to customize a product detail page (PDP) by adding a component to the page. In this example, we’ll add a promotional banner to the PDP.

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/components, create a folder called banner.
  • In the banner folder, create a file called index.jsx.
  • Under overrides/app/pages, create a folder called product-detail..
  • In the product-detail folder, create a file called index.jsx.

The new folders and files have this structure:

Associated screenshot

Add a product detail route to the list of of routes in overrides/app/routes.jsx:

Add this code to overrides/app/components/banner/index.jsx:

Add the code below to overrides/app/pages/product-detail/index.jsx.

We want to keep the PDP’s current layout and only add a component to the page. So we’ll reuse the code from base template by copying it into the newly created index.jsx file. Then we can customize the code as we see fit.

In this example:

  • On line 5, we’ll import a BannerWithImage component from the banner folder.
  • On line 333, we’ll add the BannerWithImage component at the top of the page.

Every PDP displays your customer banner as shown in the example below. In this scenario, when you click on the banner, it takes you to the women’s product listing page.

Associated screenshot