The Header and Footer blocks are essential for enhancing navigation and ensuring consistency across your online store, including the homepage, product listings, and checkout. These blocks are typically defined once in the blocks.jsonc file and serve as default elements for all other templates in the Store Framework.

However, you may want to customize these blocks for specific pages. For instance, you might wish to display a unique Header on your homepage while retaining the default Header for the Order Placed page, or even remove the Footer from product pages entirely to declutter the user interface.

This guide outlines how to customize these blocks for specific pages within your store.

1. Open your Store Theme project in your preferred code editor.
2. Find the template you want to customize within the blocks.jsonc file.
3. Replace or remove the Header and Footer blocks according to your needs.
4. Save your changes and link your app to see the new configurations reflected on the desired page.

To customize the Header and Footer for a particular template, locate the desired template in the blocks.jsonc file and add the following code to override the default blocks:

Replace {headerBlock} and {footerBlock} with the actual block names you want to use. Also, replace {templateName} with a valid theme template, such as product, search#category, and custom.

If you wish to override only one block, keep the parent structure and specify the block you want to change. For instance, to customize just the Header, use the following code:

You can then configure the Header and Footer blocks based on your specific requirements for the selected template.

Here’s an example configuration that customizes the Header for a product page:

For further customization, refer to the Header and Footer documentation.

If you prefer to remove the Header and Footer blocks from a specific template, you can declare the blocks with empty children arrays: