Guides/Edit your website/Editor/Create different headers and footers for different pages

Create different headers and footers for different pages

In this guide, you’ll learn how to create unique headers and footers for different pages of your site. Learn how to create custom headers and footers for specific sections of your site.

Requirements

To follow this guide, you need a theme that supports the Editor. Check if your site uses the Editor by looking for Appearance → Editor in your site’s dashboard.

Create a new header

First, create a new header template part:

  1. Go to your site’s dashboard.
  2. Navigate to Appearance → Editor.
  3. Click Patterns to view your site’s template parts.
  4. Click the “Add Pattern” button and select “Add Template Part” from the drop-down.
  5. In the popup window:
    • Enter a descriptive name (like “Homepage Header” or “Shop Header”).
    • Select “Header” as the area.
    • Click the “Add” button.
The "Add Template Part" pop-up with a text field for name, the "header" section selected, and a "Save" button.
  1. Design your header:
    • Use the + Block Inserter to add blocks like Site Logo, Navigation, etc.
    • Try a premade header pattern.
    • Customize the elements as needed.
  2. Click the “Save” button to save your changes.

Learn how to assign your new header to a specific template.

Follow these steps to create a custom footer:

  1. Go to your site’s dashboard.
  2. Navigate to Appearance → Editor.
  3. Click Patterns to view your site’s template parts.
  4. Click the “Add Pattern” button and select “Add Template Part” from the drop-down.
  5. In the popup window:
    • Enter a descriptive name (like “Homepage Footer” or “Shop Footer”).
    • Select “Footer” as the area.
    • Click the “Add” button.
The "Add Template Part" pop-up with a field for a name, the Footer section selected, and a "Save" button.
  1. Design your footer:
    • Use the + Block Inserter to add blocks like Site Title, Navigation, Social Icons, etc.
    • Try a premade footer pattern.
    • Customize the elements as needed.
  2. Click the “Save” button to save your changes.

Learn how to assign your new footer to a specific template.

After you’ve created a new header or footer, you can display it on specific pages by assigning it to a custom template. Templates control the structure of your pages, including which header or footer is shown.

In the following instructions, you will learn how to edit an existing template and replace the header or footer with the one you created. You can also create your own template from scratch.

To replace the header or footer in an existing template:

  1. Click Templates in the left sidebar of the Site Editor.
  2. Click an existing template to open it in the editor.
  3. Use the List view to select the existing header or footer template part.
  4. Click the () next to the template name and choose “Replace” from the drop-down menu.
  5. Click the new header or footer you created earlier.
  6. Click the Save button to save your changes.

Learn how to assign a template to a specific page or post.

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!