The Header section is the bar at the top of every page. Your logo sits at the left, the main menu next to it, and the icons for search, wishlist, cart and account at the right. In the editor sidebar, it is under Header, after the Announcement bar section. The logo and its size come from Logo settings.
On screens narrower than 1000 px, the header hides its menu links and every icon the bottom navigation bar also shows: the cart, and search, the wishlist and account when they are on there. It keeps the logo and, when it shows, the light/dark switch. There, the only way to open the menu is Menu in the Mobile bottom navigation section. If you remove or hide that section, customers on phones and tablets have no menu.
Navigation
Setting
What it does
Main menu
The menu whose links show in the header, Main menu by default. A link with nested links opens a list of them when the pointer is over it. When those nested links have links of their own, the list shows them in columns, each under its parent link. The same menu fills the mobile menu.
Menu position
Left (default) puts the menu links next to the logo. Center puts them in the middle of the bar, between the logo and the icons. The Fang style uses Center. The menu links show on screens 1000 px wide and up.
Stick to top on scroll
Keeps the header at the top of the screen on screens 1000 px wide and up. It slides away while a customer scrolls down and comes back when they scroll up quickly. On smaller screens, the header scrolls with the page. On by default.
Transparent over the hero
Lays the header over the photo or video of the first section, with white links and icons. The header turns solid when it reaches the top edge of the screen as the customer scrolls, or when the customer points at it. With Stick to top on scroll off, it scrolls away with the hero and stays clear. It works only in the cases listed under the next heading, and is off by default.
Transparent over the hero takes effect only when the page opens with one of these:
A Hero section with Background type set to a photo or video, Photo or video set to Behind the heading, Background width set to Full, and Overlay opacity above 0%.
A Video section with a background video or photo and Background width set to Full.
On every other page, the header stays solid. Over the photo, the logo turns white when Make logo light on dark is on in Logo settings. With it off, the logo keeps its own colors.
Header icons
Setting
What it does
Search icon
A magnifying glass that opens search. Customers can also open search with Ctrl+K (Command+K on a Mac) or the / key, even with the icon off. On by default.
Search style
Panel (default) opens search in a panel under the header, with the quick search tags and the product carousel. Drawer opens search in a drawer from the right side, with the title Search, the quick search tags, and the search drawer links at its foot.
Search field placeholder
The hint in the empty search field, such as Search for coffee....
Wishlist icon
A heart that opens the Wishlist section. A number on it shows how many products the customer saved. On by default.
Account icon
A person icon that lets customers sign in and open their account. It shows only when Show sign-in links is on in your Shopify admin, under Settings > Customer accounts. On by default.
Light/dark mode toggle
A sun or moon button that switches the store between light and dark colors. It shows only when Color mode is Auto in Color settings. On by default.
Account menu
The links in the account menu that signed-in customers see, Customer account main menu by default. You edit that menu in Content > Menus. Shows when Account icon is on.
The cart icon always shows. Whether it opens the cart drawer or the cart page, and whether it looks like a bag or a cart, is set in Cart settings. What appears while customers type in search is set in Search settings.
Blocks
To add a block, click Add block in the Header section and select one of the five below.
Mega menu
A wide panel that opens under the header in place of a link's usual list. It shows the link's nested links with products or collection cards, and a promo card. Add a mega menu walks through setting one up. If it does not open, see My mega menu doesn't open.
Setting
What it does
Menu item
The title of a top-level link in Main menu that has nested links, such as Coffee. Upper and lower case do not matter. If no link has this title, nothing changes in the header.
Menu layout
Product cards (default) lists the nested links at the left and shows products beside them. Clicking a nested link that points to a collection shows that collection's products. Collection cards shows a card for each nested link, with the photo of the collection it points to.
Maximum products
Products shown for each link, from 0 to 4, default 3. 0 shows no products. Shows with Product cards.
Two link columns
Splits the nested links into two columns on screens 1800 px wide and up. On smaller screens, they stay in one column. Shows with Product cards.
Policy menu
A second, smaller list of links under the nested links, Footer menu by default. Shows with Product cards.
The Promo card settings fill a card with your own message:
Setting
What it does
Image
The card's photo. Shows with Product cards.
Heading
The card's heading. Bold text starts a second line, under the lighter first words.
Text
A short line under the heading.
Button label and Button link
A button on the card. It shows only when both are filled in.
With Product cards, the promo card sits at the right end of the panel, with light text on the photo, or on a dark background when there is no photo. With Collection cards, the heading, text and button form the first card in the row, and Image is not used.
The Product cards settings, from Card style to Metrics, work as they do in other sections. Product card settings in sections describes them. They show when Menu layout is Product cards and Maximum products is above 0.
In the mobile menu, a link with a Product cards mega menu shows its products after its nested links, one card at a time.
Promo link
A short link in the accent gradient, after the menu links, such as a link to a sale. A header holds up to three. Promo links show only on screens 1000 px wide and up.
Setting
What it does
Label
The text.
Link
Where it goes. Without a link, the label shows as plain text.
Scrolling marquee
Scrolls the label sideways in a narrow box. On by default.
Quick search tag
A shortcut under the search field, such as Espresso. Clicking it opens the search results for its term. Tags show in both search styles.
Setting
What it does
Label
The text on the tag.
Search term
The words the tag searches for. Leave it empty to search for the label.
Product carousel
A row of products in the search panel, under the search field, such as your best sellers. A header holds one. It shows only when Search style is Panel.
Setting
What it does
Heading
The title over the row.
Collection
The products to show. Leave it empty to hide the carousel.
Maximum products
From 2 to 10, default 6.
Show product actions
Shows the quick view button on each card's photo and the add to cart button beside its price. Quick view is a popup where the customer picks options and adds the product to the cart. On by default.
Search drawer link
A link with an icon at the foot of the search drawer, such as a link to a collection. It shows only when Search style is Drawer.
Setting
What it does
Label and Link
The text and where it goes.
Icon
Bag (default), Box, Cart, Clock, Cup, Eye, Heart, Leaf, Search, Share or Truck.
The Header section is the bar at the top of every page. Your logo sits at the left, the main menu next to it, and the icons for search, wishlist, cart and account at the right. In the editor sidebar, it is under Header, after the Announcement bar section. The logo and its size come from Logo settings.
On screens narrower than 1000 px, the header hides its menu links and every icon the bottom navigation bar also shows: the cart, and search, the wishlist and account when they are on there. It keeps the logo and, when it shows, the light/dark switch. There, the only way to open the menu is Menu in the Mobile bottom navigation section. If you remove or hide that section, customers on phones and tablets have no menu.
Navigation
Setting
What it does
Main menu
The menu whose links show in the header, Main menu by default. A link with nested links opens a list of them when the pointer is over it. When those nested links have links of their own, the list shows them in columns, each under its parent link. The same menu fills the mobile menu.
Menu position
Left (default) puts the menu links next to the logo. Center puts them in the middle of the bar, between the logo and the icons. The Fang style uses Center. The menu links show on screens 1000 px wide and up.
Stick to top on scroll
Keeps the header at the top of the screen on screens 1000 px wide and up. It slides away while a customer scrolls down and comes back when they scroll up quickly. On smaller screens, the header scrolls with the page. On by default.
Transparent over the hero
Lays the header over the photo or video of the first section, with white links and icons. The header turns solid when it reaches the top edge of the screen as the customer scrolls, or when the customer points at it. With Stick to top on scroll off, it scrolls away with the hero and stays clear. It works only in the cases listed under the next heading, and is off by default.
Set up your store menus explains how to build a menu.
Transparent header over the hero
Transparent over the hero takes effect only when the page opens with one of these:
On every other page, the header stays solid. Over the photo, the logo turns white when Make logo light on dark is on in Logo settings. With it off, the logo keeps its own colors.
Header icons
Setting
What it does
Search icon
A magnifying glass that opens search. Customers can also open search with Ctrl+K (Command+K on a Mac) or the / key, even with the icon off. On by default.
Search style
Panel (default) opens search in a panel under the header, with the quick search tags and the product carousel. Drawer opens search in a drawer from the right side, with the title Search, the quick search tags, and the search drawer links at its foot.
Search field placeholder
The hint in the empty search field, such as
Search for coffee....Wishlist icon
A heart that opens the Wishlist section. A number on it shows how many products the customer saved. On by default.
Account icon
A person icon that lets customers sign in and open their account. It shows only when Show sign-in links is on in your Shopify admin, under Settings > Customer accounts. On by default.
Light/dark mode toggle
A sun or moon button that switches the store between light and dark colors. It shows only when Color mode is Auto in Color settings. On by default.
Account menu
The links in the account menu that signed-in customers see, Customer account main menu by default. You edit that menu in Content > Menus. Shows when Account icon is on.
The cart icon always shows. Whether it opens the cart drawer or the cart page, and whether it looks like a bag or a cart, is set in Cart settings. What appears while customers type in search is set in Search settings.
Blocks
To add a block, click Add block in the Header section and select one of the five below.
Mega menu
A wide panel that opens under the header in place of a link's usual list. It shows the link's nested links with products or collection cards, and a promo card. Add a mega menu walks through setting one up. If it does not open, see My mega menu doesn't open.
Setting
What it does
Menu item
The title of a top-level link in Main menu that has nested links, such as
Coffee. Upper and lower case do not matter. If no link has this title, nothing changes in the header.Menu layout
Product cards (default) lists the nested links at the left and shows products beside them. Clicking a nested link that points to a collection shows that collection's products. Collection cards shows a card for each nested link, with the photo of the collection it points to.
Maximum products
Products shown for each link, from 0 to 4, default 3. 0 shows no products. Shows with Product cards.
Two link columns
Splits the nested links into two columns on screens 1800 px wide and up. On smaller screens, they stay in one column. Shows with Product cards.
Policy menu
A second, smaller list of links under the nested links, Footer menu by default. Shows with Product cards.
The Promo card settings fill a card with your own message:
With Product cards, the promo card sits at the right end of the panel, with light text on the photo, or on a dark background when there is no photo. With Collection cards, the heading, text and button form the first card in the row, and Image is not used.
The Product cards settings, from Card style to Metrics, work as they do in other sections. Product card settings in sections describes them. They show when Menu layout is Product cards and Maximum products is above 0.
In the mobile menu, a link with a Product cards mega menu shows its products after its nested links, one card at a time.
Promo link
A short link in the accent gradient, after the menu links, such as a link to a sale. A header holds up to three. Promo links show only on screens 1000 px wide and up.
Setting
What it does
Label
The text.
Link
Where it goes. Without a link, the label shows as plain text.
Scrolling marquee
Scrolls the label sideways in a narrow box. On by default.
Quick search tag
A shortcut under the search field, such as
Espresso. Clicking it opens the search results for its term. Tags show in both search styles.Product carousel
A row of products in the search panel, under the search field, such as your best sellers. A header holds one. It shows only when Search style is Panel.
Setting
What it does
Heading
The title over the row.
Collection
The products to show. Leave it empty to hide the carousel.
Maximum products
From 2 to 10, default 6.
Show product actions
Shows the quick view button on each card's photo and the add to cart button beside its price. Quick view is a popup where the customer picks options and adds the product to the cart. On by default.
Search drawer link
A link with an icon at the foot of the search drawer, such as a link to a collection. It shows only when Search style is Drawer.
Set up search suggestions covers the tags, the product carousel and the drawer links together.