Skip to main content
Paper: Header
Thomas K avatar
Written by Thomas K
Updated over a week ago

Summary


The header section features a content focused dropdown menu and all the core navigational items you would come to expect from a large-catalog ecommerce store.

Tips


  • Test your header on both mobile and desktop to ensure that your menu items are displayed properly. On mobile devices, nested navigation is contained within an accordion.

  • Utilize the "Search recommendations" menu to showcase popular searches and pages when customers use the search function.

  • Adjust the header position from Theme settings > Layout > Header position

    • Sticky: The header is always visible at the top

    • Standard: The header is at the top of the page. Once you scroll down you won't see it.

    • Dynamic: The header will animate away when scrolling down and animate back into view when scrolling up

How to add featured images to the dropdown menu


Blocks can be used to display featured images within the dropdown menu on desktop. This is useful for highlighting top products or collections that need more attention.

  1. Open the theme editor by clicking Customize next to the relevant theme.

  2. Select Header from the theme sections.

  3. Click Add Block.

  4. Click into the newly created block.

  5. For the Menu field enter the title of the dropdown menu you’d like this block to be displayed within. This field must be entered in lowercase to work.

  6. Update the URL, Headings and Image as needed.

    • It’s recommended to use images in a landscape ratio. Our recommended size is 400 x 200px

  7. Click Save.


Did this answer your question?