Skip to content

Header

This guide describes setting up the Header section.

Use the section to provide visitors with a menu for navigating the pages in your store. The header section is typically displayed across the top of store pages.

An example Header section on a store's home page.

The previous image shows a Header section at the top of a store's home page. In the upper left, below the Header, the section's Sticky header option is set to on (enabled). With this option enabled the Header remains fixed, at the top of the page, as store visitors scroll through the page's content.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.

Set up the header section

To set up your store's header section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select the Home page.

    Note

    The section is accessible from all pages, excluding the Checkout, Password, and Gift card pages.

  2. From the side menu, select Header.

    The header section selected in Theme editor.

  3. Select a section setting described in the following table.

Setting nameDescription
Logo > LogoUse the Logo selector options to set up an image to use as your store's primary logo, inside the section. Refer to Edit an image inside a section or block. For mobile displays or a "sticky-mode" header, refer to Configure a block within a header section.
Logo > Logo > Connect dynamic sourceTo display a logo image from a dynamic source, if available, select the Connect dynamic source icon beside the Logo image selector, and then choose a metafield to add. Refer to Shopify help: Metafields.
Logo > Logo maximum widthAdjust the slider Logo maximum width to set a maximum width size for the logo image inside the section between 2 rem and 9 rem (relative root elements).
Navigation > Main menuSet up a menu to display inside the section. Refer to Set a header menu.
Color scheme > Color schemeUse the Color scheme options to select a color scheme for the section. Refer to Colors.
Sticky header > Sticky headerSelect the Sticky header checkbox to turn on/off keeping the header (fixed) at the top of the page.
Sticky header > Transparent when stickySelect the Transparent when sticky checkbox to set the sticky header's background to transparent (on) or solid (off). To use this feature, enable the Sticky header setting.
Overlay header > Enable on home pageSelect the checkbox Enable on home page to turn on/off positioning the header over the home page, as an overlay.
Overlay header > Enable on collection templateSelect the checkbox Enable on collection template to turn on/off positioning the header over collection pages, as an overlay.
Overlay header > Enable on default product templateSelect the checkbox Enable on default product template to turn on/off positioning the header over the (default) product page, as an overlay.
Overlay header > Enable on cascade product templateSelect the checkbox Enable on cascade product template to turn on/off positioning the header over the (cascade) product page, as an overlay.
Overlay header > Enable on split product templateSelect the checkbox Enable on split product template to turn on/off positioning the header over the (split) product page, as an overlay.
Overlay header > Overlay header colorUse the Overlay header color options to select a color scheme for the header overlay. To use this feature, enable the Header overlay.
Overlay header > Overlay logoUse the Overlay logo image selector options to set up an image to use as a logo inside the section, when the header overlays a page. Refer to Edit an image inside a section or block.
Overlay header > Overlay logo > Connect dynamic sourceTo display a overlay logo image from a dynamic source, if available, select the Connect dynamic source icon beside the Overlay logo image selector, and then choose a metafield to add. Refer to Shopify help: Metafields.
Layout and items > Mobile layoutFor mobile devices, use the Mobile layout dropdown to select a position for the logo and menu items inside the section. The dropdown options are:
  • Menu on the left, centered logo
  • Menu and logo on the left
  • Logo on the left, menu on the right
Layout and items > Desktop layoutFor desktop devices, use the Desktop layout dropdown to select a position for the logo and menu items inside the section. The dropdown options are:
  • Menu and logo on the left
  • Logo on the left, menu on the right
  • Menu on the left, centered logo
Layout and items > Use mobile menu on desktopSelect the checkbox Use mobile menu on desktop to turn on/off the mobile sidebar menu for desktop devices. With this setting enabled, make adjustments by using the Mobile sidebar's section settings.
Layout and items > Show searchSelect the Show search checkbox to show/hide the search feature inside the section.
Layout and items > Display menu items asUse the Display menu items as options to display menu items (like cart and search) inside the section as Icons or Text.
Layout and items > Section paddingUse the Section padding options to set a size for the space displayed around elements (padding) inside the section to Small or Large. Refer to W3 Schools: CSS Padding.
Featured links > Showcase second-level linksUse the Showcase second level links options to hide (Off) second level links inside the section's Featured links area. Alternatively, show second level links inside the section using a Grid or Scroll style. With this setting enabled, the section displays second level links to products or collections. The section showcases products or collections if they don't have child links.
Featured links > Collection image cropUse the dropdown Collection image crop to set an image cropping style for collection images inside the section's Featured links area. The options are: No crop, Portrait, Square, and Landscape. To use this feature, set the option Showcase second-level links to Grid or Scroll.
Theme settingsIf available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.

Configure a block within a header section

A header section can contain four (logo) blocks. The blocks are: Logo for Sticky header, Logo for mobile, Logo - fine adjust, and Logo - advanced.

To configure a block inside the section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select the Home page.

  2. From the side menu, expand the Header section menu.

  3. To configure an existing block, select the block from the side menu.

    To add a new block, select Add block, and then select the block you added.

    The add block menu in Theme editor.

    Note

    Inside the section, you can add, remove, show or hide blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks.

  4. Apply a block setting described in the Table: Header-blocks.

Table: Header blocks

The following table describes the blocks inside the header section, and their corresponding settings.

To configure a block, refer to Configure a block within a header section.

Block nameBlock descriptionBlock setting(s)
Logo for Sticky headerSet up a block with a logo image, for the section's "sticky header" area. To use this feature, enable the section's Sticky header option.
  • Use the Logo selector options to set up an image to use as a logo for the "sticky header" area, inside the block. Refer to Edit an image inside a section or block.

  • To display a logo image from a dynamic source, if available, select the Connect dynamic source icon beside the Logo image selector, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • Adjust the slider Logo maximum width to set a maximum width size for the logo image inside the block between 2 and 9.

  • Select Remove block to delete the block from the current section.
Logo for mobileSet up a block with a logo image to display on mobile devices, inside the section
  • Use the Mobile logo image selector options to set up an image to display on mobile devices, inside the block. Refer to Edit an image inside a section or block.

  • To display a logo image from a dynamic source, if available, select the Connect dynamic source icon beside the Mobile logo image selector, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • Adjust the slider Logo maximum width to set a maximum width size for the logo image inside the block between 0.5 and 4.

  • Use the Logo when header is overlaid image selector options to set up an image to display on mobile devices, inside the block. The logo is shown when the header is displayed as an overlay. Refer to Edit an image inside a section or block.

  • To display a logo image from a dynamic source, if available, select the Connect dynamic source icon beside the image selector Logo when header is overlaid, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • Use the fimage selector options in Logo for sticky header on mobile > Sticky mobile logo to set up an image to display on mobile devices, inside the block. The logo is displayed in the "sticky header" area. Refer to Edit an image inside a section or block.

  • To display a logo image from a dynamic source, if available, select the Connect dynamic source icon beside the image selector Logo for sticky header on mobile > Sticky mobile logo, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • Adjust the slider Logo for sticky header on mobile > Logo maximum width to set a maximum width size for the logo image inside the block between 0.5 and 4.

  • Adjust the slider Breakpoint > Logo breakpoint to set a screen width between 512 and 1024. When the width of the user's display device is less than this value, the block uses the mobile logo image. For display widths that exceed this value, the desktop logo image is used.

  • Select Remove block to delete the block from the current section.
Logo - fine adjustAdd a block to reposition the images inside the section's logo blocks.To reposition the images inside the section's logo blocks:
  • Adjust the Horizontal slider to reposition logo images to the left or right. The slider ranges from -0.5 (left) to 0.5 (right), and applies minor adjustments to the logo's position. This setting applies to logos on both desktop and mobile devices. To apply this setting to desktop devices only, set the checkbox option Apply different adjustments to on.

  • Adjust the Vertical slider to reposition logo images downwards or upwards. The slider ranges from -0.5 (down) to 0.5 (up), and applies minor adjustments to the logo's position. This setting applies to logos on both desktop and mobile devices. To apply this setting to desktop devices only, set the checkbox option Apply different adjustments to on.

  • Select the checkbox Mobile > Apply different adjustments on mobile to turn on/off using different Horizontal and Vertical position settings for header logos on desktop and mobile devices. To use this feature, add a mobile logo image block inside the section.

  • Adjust the slider Mobile > Horizontal to reposition the mobile logo image to the left or right. The slider ranges from -0.5 (left) to 0.5 (right), and applies minor adjustments to the logo's position. This setting applies to logos on mobile devices. The apply this setting, set the checkbox option Apply different adjustments to on.

  • Adjust the slider Mobile > Vertical slider to reposition the mobile logo image downwards or upwards. The slider ranges from -0.5 (down) to 0.5 (up), and applies minor adjustments to the logo's position. This setting applies to logos on mobile devices. The apply this setting, set the checkbox option Apply different adjustments to on.

  • Select Remove block to delete the block from the current section.
Logo - advancedAdd a block containing a text or HTML logo made from custom Liquid template language code. When this block is added, all other logo settings and blocks are ignored. Refer to Learning Liquid: A guide to Shopify theme development.
  • In the Liquid box, enter Liquid template language code. The section displays the contents of this block inside <h1></h1> tags. All Header logo blocks use this code, unless you provide alternative Liquid code for each corresponding logo block/area.

  • In the box Sticky header > Liquid for sticky header, enter Liquid template language code. The section displays the contents of this block inside the sticky header area.

  • In the box Mobile > Liquid for mobile, enter Liquid template language code. The section displays the contents of this block inside the header area, on mobile devices.

  • In the box Mobile > Liquid for sticky header on mobile, enter Liquid template language code. The section displays the contents of this block inside the sticky header area, on mobile devices.

  • Adjust the slider Mobile > Logo breakpoint to set a screen width between 512 and 1024. When the width of the user's display device is less than this value, the block uses Liquid code for the mobile logo. For display widths that exceed this value, the Liquid code for the desktop logo image is used.

  • Select Remove block to delete the block from the current section.

Set a header menu

To select a menu to display inside the header section, apply the following settings in Header > Navigation > Main menu.

  • If the section has no menu, to select a menu, choose Select menu. Enter the name of a menu into the Search box, or pick a menu from the list, and then choose Select.

  • To edit the current menu, select the menu link. The link opens the Navigation menu editor in Shopify admin. Use the editor to modify the menu. Refer to Shopify help: Add, remove, or edit menu items in your online store.

  • To create a new menu, select Change > Change menu, and then follow the Create menu link. The link opens the Navigation > Add menu page in Shopify admin. Use the menu editor to create a new menu, and then the select the new menu. Refer to Shopify help: Add, remove, or edit menu items in your online store.

    The header menu options in Theme editor.

  • To replace the current menu, select Change > Change menu. Enter the name of the replacement menu into the Search box, or pick a replacement menu from the list, and then choose Select.

  • To delete the current menu, select Change > Remove menu.