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 homepage.

The previous image shows a Header section on a store's homepage. In the upper left, the section's Logo selector contains an uploaded image. The uploaded image is displayed as a custom logo inside the section (top center).

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:

Go to Customize theme. At the top of the page, use the dropdown to select the Home page template.
Note
The header section is accessible from all page templates, excluding the Checkout, Password, and Gift card page templates.
From the side menu, select Header.
Select a section setting described in the following table.

Section setting name	Description
Logo > Logo	Use the following Logo selector options to set up an image to use as your store's primary logo, inside the section. To add an image, choose Select image, and then upload an image or select an image file from your store's file library. To add a focal point to an image, select Edit in the image selector's thumbnail preview area, and then select Add focal point. Refer to Shopify help: Add a focal point to an image, and Edit an image inside a section or block. To add "alt text" to an image, select Edit, and then enter a brief description of the image into the Image alt text box. The description improves search engine optimization (SEO), and provides greater accessibility for customers who use screen-reading tools. The text is saved immediately. Refer to Shopify help: Adding alt text to media To download an image, select Edit > Download. To replace an image, choose Change > Change image, and then select or upload a new image. To remove an image, select Change > Remove image. To display an image from a dynamic source, select the Change > Connect dynamic source, and then choose a metafield to add. Refer to Shopify help: Metafields For mobile displays, or "sticky-mode" header, etc., Configure a block within a header section.
Logo > Logo > Connect dynamic source	To display a logo image from a dynamic source, 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 width	Adjust the slider Logo maximum width to set a maximum width size for the logo image inside the section between `2rem` and `9rem` (relative root elements).
Navigation > Main menu	Set up a menu to display inside the section. Refer to Set a header menu.
Color scheme > Color scheme	Use the Color scheme dropdown to set the section's color scheme to Primary, Secondary or Tertiary. Refer to Colors.
Sticky header > Sticky header	Select the Sticky header checkbox to turn on/ off keeping the header (fixed) at the top of the page.
Sticky header > Transparent when sticky	Select 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 page	Select the checkbox Enable on home page to turn on/ off positioning the header over the homepage, as an overlay.
Overlay header > Enable on collection template	Select 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 template	Select 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 classic product template	Select the checkbox Enable on classic product template to turn on/ off positioning the header over the (classic) product page, as an overlay.
Overlay header > Enable on split product template	Select the checkbox Enable on classic product template to turn on/ off positioning the header over the (split) product page, as an overlay.
Overlay header > Overlay header color	Select the Overlay header color dropdown to set a background color for the header overlay. The color options are Primary, Secondary, Tertiary (color schemes), White, and Black. To use this feature, enable the Header overlay.
Overlay header > Overlay logo	Use the following Overlay logo image selector options to set up an image to use as a logo inside the section, when the header overlays a page. To add an image, choose Select image, and then upload an image or select an image file from your store's file library. To add a focal point to an image, select Edit in the image selector's thumbnail preview area, and then select Add focal point. Refer to Shopify help: Add a focal point to an image, and Edit an image inside a section or block. To add "alt text" to an image, select Edit, and then enter a brief description of the image into the Image alt text box. The description improves search engine optimization (SEO), and provides greater accessibility for customers who use screen-reading tools. The text is saved immediately. Refer to Shopify help: Adding alt text to media To download an image, select Edit > Download. To replace an image, choose Change > Change image, and then select or upload a new image. To remove an image, select Change > Remove image. To display an image from a dynamic source, select the Change > Connect dynamic source, and then choose a metafield to add. Refer to Shopify help: Metafields
Overlay header > Overlay logo > Connect dynamic source	To display a overlay logo image from a dynamic source, 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 layout	For 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 layout	For 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 on the left, centered logo Menu and logo on the left Logo on the left, menu on the right
Layout and items > Use mobile menu on desktop	Select 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 search	Select the Show search checkbox to show/ hide the search feature inside the section.
Layout and items > Display menu items as	Select the radio buttons Display menu items as to display menu items (like cart and search) inside the section as Icons or Text.
Layout and items > Section padding	Select the Section padding radio buttons 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 links	Use the dropdown Showcase second level links to show/ hide second level links inside the section's Featured links area. This setting also applies a Grid or Scroll style for displaying second level links inside the section. 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 crop	Use 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 settings	Select Theme settings to access additional settings for the section. Refer to Section theme settings menu.

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

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
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.

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:

Go to Customize theme. At the top of the page, use the dropdown to select the Home page template.
From the side menu, expand the Header section menu.
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.
Note
Inside the header section, you can add, remove, or show/ hide blocks. Refer to Configure blocks inside a section, or Shopify help: Sections and blocks
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 name	Block description	Block setting(s)
Logo for Sticky header	Set 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 following Logo selector options to set up an image to use as a logo for the "sticky header" area, inside the block. To add an image, choose Select image, and then upload an image or select an image file from your store's file library. To replace an image, choose Change > Change image, and then select or upload a new image. To remove an image, select Change > Remove image. Select the Add alt text link, and then enter a brief description of the image into the Image alt text box. Refer to Shopify help: Adding alt text to media To display an image from a dynamic source, select Change > Connect dynamic source, and then choose a metafield to add. Refer to Shopify help: Metafields To display a logo image from a dynamic source, 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 mobile	Set up a block with a logo image to display on mobile devices, inside the section	Use the following Mobile logo image selector options to set up an image to display on mobile devices, inside the block. To add an image, choose Select image, and then upload an image or select an image file from your store's file library. To replace an image, choose Change > Change image, and then select or upload a new image. To remove an image, select Change > Remove image. Select the Add alt text link, and then enter a brief description of the image into the Image alt text box. Refer to Shopify help: Adding alt text to media To display an image from a dynamic source, select Change > Connect dynamic source, and then choose a metafield to add. Refer to Shopify help: Metafields To display a logo image from a dynamic source, 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 following 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. To add an image, choose Select image, and then upload an image or select an image file from your store's file library. To replace an image, choose Change > Change image, and then select or upload a new image. To remove an image, select Change > Remove image. Select the Add alt text link, and then enter a brief description of the image into the Image alt text box. Refer to Shopify help: Adding alt text to media To display an image from a dynamic source, select Change > Connect dynamic source, and then choose a metafield to add. Refer to Shopify help: Metafields To display a logo image from a dynamic source, 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 following image 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. To add an image, choose Select image, and then upload an image or select an image file from your store's file library. To replace an image, choose Change > Change image, and then select or upload a new image. To remove an image, select Change > Remove image. Select the Add alt text link, and then enter a brief description of the image into the Image alt text box. Refer to Shopify help: Adding alt text to media To display an image from a dynamic source, select Change > Connect dynamic source, and then choose a metafield to add. Refer to Shopify help: Metafields To display a logo image from a dynamic source, 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 adjust	Add 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 - advanced	Add 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.

Header ​

Set up the header section ​

Set a header menu ​

Configure a block within a header section ​

Table: Header blocks ​

Set up the header section

Set a header menu

Configure a block within a header section

Table: Header blocks