Add content to your site’s header

This guide will show you how to add common elements to your website’s header, including a logo, navigation menu, search box, and social media icons. You can use these same steps to add anything to your header.

To follow the steps in this guide, you need a theme that supports the Site Editor. A quick way to check if your site uses the Site Editor is to look for Appearance → Editor in your site’s dashboard.

You’ll need to access your Header template part to add elements to it. If you haven’t done this before, follow the instructions in our Customize Your Header guide.

To add a logo to your Header template part, follow these steps:

1. While editing the Header template part, click on the + Block Inserter button.
2. Search for the Site Logo block.
3. Click the Site Logo block to insert it.
4. Click either “Generate with AI” or “Choose logo” from the toolbar that appears to select a logo.
5. Click and drag the handles (small circles) that appear around the logo to make it larger or smaller.
6. Add your logo, then click the Save button to save your changes.

Once you upload a site logo, it can be reused in different places and templates, using the Site Logo block.

To add a menu to your header, follow these steps:

1. While editing the Header template part, click on the + Block Inserter button.
2. Search for the Navigation block.
3. Click the Navigation block icon to insert it.
4. When you’re finished editing your menu, click the Save button to save your changes.

Once the Navigation block is added to your header, you can customize it following our detailed guide on using the Navigation block. You’ll learn how to add links, create submenus, modify link settings, and more.

To add a search bar to your header, follow these steps:

1. While editing the Header template part, click the + Block Inserter button.
2. Search for the Search block.
3. Click on the Search block icon to insert it into your header.
4. When finished, click the Save button to save your changes.

Read more about using the Search block. You’ll learn how to change the search button text, change the font and colors, adjust the search box width, and more.

To add social icons to your header, follow these steps:

1. While editing the Header template part, click the + Block Inserter button.
2. Search for the Social Icons block.
3. Click on the Social Icons block icon to insert it into your header.
4. When finished, click the Save button to save your changes.

Read more about using the Social Icons block. You’ll learn how to add your social profiles, change the type of icons, style or remove your icons, and more.

Once you have added several elements to your header, you will want to arrange them to create a visually appealing layout. Learn more about arranging content in your header.