Customize Your Storefront

Modify the storefront by adding a custom page and component.

• Generate a Storefront Next app by following the steps in Create a Storefront in Business Manager with Local Code or Explore Storefront Next Code Locally.
• An Integrated Development Environment (IDE), such as VS Code, Cursor, or your favorite IDE. See Download VS Code or Download Cursor.

1. Create a component that displays a banner. Later, add this component to a new page.

   a. In {project-folder}/src/components, create a folder with the name custom-banner.

   b. In the new custom-banner folder, create the index.tsx file with this code.

   The CustomBanner component in /custom-banner/index.tsx renders a centered banner with a large title and optional subtitle. It accepts title (required), subtitle (optional), and className (optional) via CustomBannerProps. It uses Tailwind classes for responsive typography, primary theme colors, and spacing, and centers content within a max-width container. The component returns a React element with the title as an <h1> and conditionally renders the subtitle as a paragraph, if provided.

2. Add a page that includes this new component. The new page is created as a route file. In {project-folder}/src/routes, create a route file with the name _app.custom-page.tsx and add this code.

   The _app.custom-page.tsx file defines a React Router page at /custom-page. The _app. prefix in the file name causes the React Router to nest your custom page route under the _app.tsx layout. That layout renders the header, your page content, and the footer. It exports a default page via createPage, which wraps CustomPageView with Suspense and loading handling. CustomPageView renders the CustomBanner component inside a container with bottom padding. The page uses CustomPageData, an empty record. It doesn’t require loading data so it renders immediately without async data fetching.

3. In a terminal window, go to the storefront folder.

4. If you haven’t already, install Storefront Next project dependencies that are specified in package.json.

5. Build the storefront and then run the development server.

6. Navigate to the new page that you created by appending /custom-page to the storefront URL. For example, go to this default URL: http://localhost:5173/custom-page. The new page shows the banner with a title.

• Deploy Storefront Next to Managed Runtime