Build your site header

false

Build your site header

Last updated August 11, 2026 22:33

Style the elements that appear at the top of every page on your site.

Your header is where your site title or logo, navigation menu, and other features display. Generally, the header appears the same throughout your site and plays a big role in how visitors navigate and interact with your content.

These features are available for site headers in version 7.1. If your site is on version 7.0, your header is specific to your site's template.

site header displayed at the top of a website page

Video on site headers

This video shows how to edit and style your site header.

When you created your site, you may have given it a site title. If you add a logo, it replaces your site title in the header, but you should add a site title regardless. Search engines use the title for search results and browser tabs, unless you add a separate SEO title.

The navigation menu in your site header reflects what pages you’ve added to the Pages panel. To change the navigation links:

Add a button to your header

Adding a button to a header puts your call to action front and center, encouraging visitors to click it right away. Depending on your header layout, the button may be grouped with navigation links or apart from them. On mobile, the button always appears below your navigation links.

To add a button to your header:

  1. Open the Pages panel.
  2. Click Edit in the top-left corner of your site preview.
  3. Hover over the header and click Edit site header.
  4. Click Add elements.
  5. Switch the Button toggle on.

Button in a site header

Edit the header button

To set the button text, link, and style:

  1. Open the Pages panel.
  2. Click Edit in the top-left corner of your site preview.
  3. Hover over the header and click Edit site header.
  4. Click the header button, then click Edit design.
  5. Under Content, edit the button text and link.
  6. Click the Design tab, then choose Primary, Secondary, or Tertiary to set the button's style.

The shape of your header follows your button styles.

Set header button font

If you set your button style to Secondary or Tertiary, the text on your header button follows your button styles.

To style the font of a header button with Primary styling:

  1. Open site styles.
  2. Click > next to Fonts.
  3. Click Assign Styles.
  4. Click Header Button and make changes.

Set header button color

How you change the header button color depends on your header background style.

If your header background style is:

  • Solid - Color - The button color follows your site’s default color theme.
  • Solid - Theme - The button color follows the selected color theme.
  • Gradient - The button color follows your site’s default color theme.
  • Adaptive - The button color follows the color theme for the top section on each page. Customize the button color for each color theme your sections use.

To add other elements to your header, like an account login for customers, social links, a shopping cart, or a language switcher:

  1. Open the Pages panel.
  2. Click Edit in the top-left corner of your site preview.
  3. Hover over the header and click Edit site header.
  4. Click Add elements.
  5. Switch the toggle on next to features you want to enable.

Customize header features

You can customize the design of your social links and cart icon. If your site uses Weglot, you can also customize the language switch.

To edit these features:

  1. Open the Pages panel.
  2. Click Edit in the top-left corner of your site preview.
  3. Hover over the header and click Edit site header.
  4. Click the feature you want to edit, then click the pencil icon.
  5. Use the settings to make changes to the design. These options vary by feature.
  6. Click Save.

Add design effects to your header

When editing your site header’s design, you can add visual effects to give it a unique look or complement your brand. These effects apply to both the computer and mobile versions of your header.

To add header effects:

  1. Open the Pages panel.
  2. Click Edit in the top-left corner of your site preview, then hover over the header and click Edit site header.
  3. Click Edit Design.
  4. Under effects, add a drop shadow, add a border, and set a fixed header style.

Add a drop shadow to your header

To create a shadow effect around the header:

  1. While editing the header design, click Drop shadow. This enables a drop shadow immediately.
  2. Choose from Soft or Strong presets. You can customize the presets after selecting them.
  3. To choose and style the color, click Color.
  4. To change the appearance of the drop shadow, use the Spread, Distance, and Blur sliders. We recommend trying different combinations to find one you like.
  5. To remove the drop shadow, click Remove.

Add a border around your header

To border around the header:

  1. While editing the header design, click Border. This enables a border immediately.
  2. To choose and style the color, click Color.
  3. Click S, M, or L to set the line thickness, or click … to set a custom thickness.
  4. Set the position of the border. It can display on all sides of the header, only the top, only the bottom, or both the top and the bottom.
  5. To remove the border, click Remove.

Enable a fixed header

Depending on the device, fixed headers of either style may expand or contract slightly when scrolling. To keep the header fixed at the top of your site as visitors scroll:

  1. While editing the header design, switch the Fixed position toggle on.
  2. Set the fixed header style as Basic (the header always appears at the top of the browser) or Scroll back (the header only appears at the top of the browser when the visitor scrolls up).

Style your mobile navigation menu

In mobile view, your header navigation will collapse into an expandable menu.

To style the mobile navigation menu:

  1. Open the Pages panel.
  2. Click Edit in the top-left corner of your site preview, then hover over the header and click Edit site header.
  3. In the top-right corner, click the Mobile View icon.
  4. Click the mobile navigation menu, then click the pencil icon.
  5. Select a Menu Icon style.
  6. Click S, M, or L to set the thickness of the icon’s lines, or click … to set a custom thickness.

Change your header background effects and color

You can add background styles to the header to give your header a more distinctive look from the rest of your content, or help it blend with the rest of your site's branding. If your navigation has dropdowns, the dropdown background on a computer matches the header’s background color.

To change the background style:

  1. Click Edit in the top-left corner of your site preview.
  2. Hover over the header and click Edit site header.
  3. Click Edit design, then click the Color tab.
  4. Select a background style from the dropdown menu at the top of the editor. Choose from Solid, Gradient, or Adaptive.
  5. Depending on the style you choose, customize the background style's color, blur effect, and opacity. Some browsers may not display blur effects.

Solid header background

To set the header background to a solid color, choose the solid background style. Choose a custom color, use your site’s palette, or match one of your site’s color themes.

Gradient header background

To make the header background to fade into the background of the first section on each page, choose the gradient style. You can customize the gradient background and navigation colors.

Adaptive header background

To give the header a variable look from page to page, choose the adaptive style to make it transparent. The background of the first section on each page displays behind the header.

Hide your site header

To help draw attention to your content, or to encourage your visitors to take an action, you can hide the header on certain pages.

Collection pages such as blog and store pages, don't have this option.

To hide the header:

  1. Open the Pages panel.
  2. Hover over a page title, then click the gear icon next to the title.
  3. Click Navigation on the page settings tab.
  4. Use the toggles to turn off Show Header.
  5. Repeat these steps for every page where you'd like to hide the header.

Can I make my header look different on mobile devices?

You can customize the layout, height, and width of the header for mobile devices independently from the desktop view. Other design changes affect both desktop and mobile views.

To set separate styles for your desktop or mobile view:

  1. Click Edit in the top-left corner of your site preview. In the top-right corner, click the Desktop View icon or the Mobile View icon, depending which you want to edit.
  2. Hover over the header and click Edit site header.
  3. Click Edit Design.
  4. Click the Layout dropdown menu and select a layout to change the header’s arrangement. Use the sliders to change the spacing between links and other elements.
  5. Use the Header slider to change the height of the header.
  6. Click Full or Inset to set the width of the header.
  7. Click Save.

Was this article helpful?

Yes No

429 out of 2152 found this helpful

Yes No

Build your site header