Header

The Header is the top of every page: your logo or store name, the main menu, search, the customer account and the cart. It lives in the Header group of the theme editor, below the Announcement bar, and there can be only one.

Change the logo

The logo isn’t a setting of this section. Upload it in Theme settings > Logo and favicon, so the same logo appears in the header and in the Mobile menu. If you leave it empty, the theme uses the logo from your store’s brand settings in the Shopify admin, and without either one it shows your store name as text, sized by Store name size.

Logo width sets the width on computers and Logo width on mobile on phones. A tall, portrait logo is also limited in height, so it can’t make the header grow. Screen readers read the logo as your store name, and on the home page it is the page’s main heading.

The menu is also a theme setting: choose it in Theme settings > Navigation > Main menu, and edit its links in your Shopify admin under Content > Menus. The header shows up to three levels.

Main menu type decides how the menu works on computers:

Dropdown opens a small panel under each top-level item that has children.
Mega menu opens a wide panel. When the item has a third level, its children become columns with their own links below. When it has only two levels, the links are listed and, if you haven’t added promotions for that item, the panel shows the images of up to four linked collections.
Drawer hides the menu behind a button and opens it from the side, as on phones.

Items open with a click or a tap, not on hover. Each submenu starts or ends with a “View all” link, so the page of the top-level item stays reachable. When the items don’t fit on one row, the row scrolls sideways and arrows appear at its ends.

On phones and tablets the menu is always behind the menu button, which opens the Mobile menu section. If you remove that section from the Sidebars group, the button stops working.

Desktop layout puts the logo on the left or in the center, with the menu beside it or on a second row below. Mobile logo position does the same on phones. Vertical spacing sets the height of the header, and Use full page width stretches it to the edges of the screen instead of the page width set in theme settings.

Add a Mega menu promotion block to show an image with a heading and a link inside the mega menu. Promotions appear only when Main menu type is Mega menu.

Main menu item position says which top-level item the promotion belongs to: 1 is the first item from the start of the menu, 2 the second, and so on. An item shows up to two promotions when it has a third level, or up to three when it doesn’t; the rest are left out. You can add up to six promotions in all.

Leave Link empty to link the promotion to its menu item.
Without an image, the promotion shows only the heading and the link.
A promotion can appear only between two dates, for a sale or a new season: turn on Schedule visibility in the block. See Scheduling.

Show search, account and cart as words or icons

Style shows search, account and cart as words or as icons on computers. Phones always use icons. With words, Cart count shows the number of items as “Cart (2)” or “Cart 02”; with icons, the count is a bubble on the cart icon.

Show search adds a search field that suggests products, collections, pages and articles as customers type. Pressing Enter opens the search results page.
The account appears when customer accounts are turned on in your Shopify admin, under Settings > Customer accounts. It can’t be hidden from the theme, and Shopify draws it: a sign-in link for visitors, the customer’s avatar after they sign in.
The cart link opens the Cart drawer. Without the drawer it leads to the cart page.

Text case applies to the menu, search, account and cart.

Let customers change country or language

Show country/region selector and Show language selector appear only when your store sells in more than one country or region, or has more than one language. The header shows them only on wide computer screens, where there is room for the full country name and currency. On smaller screens customers find them in the Footer and in the Mobile menu, so keep them turned on there too.

Keep the header visible while scrolling

Under Sticky header, Behavior set to Always keeps the header at the top of the screen. On scroll up hides it while customers scroll down and brings it back as soon as they scroll up, which leaves more room for products. None lets it scroll away with the page.

Show the header over the first image of the home page

Turn on Use on home page under Transparent header to lay the header over the first section of the home page, with no background of its own. It works only when that first section is a Slideshow or a Rich text section with a background image or video. With any other first section, the header keeps its normal colors, so light text never ends up on a light background.

The Color scheme under this heading uses only its text color: choose a scheme with light text for dark photos. As soon as customers scroll, the header takes back its normal color scheme.

Change the colors

Color scheme under Colors colors the header bar. Main menu color scheme colors what opens from it: dropdowns, the mega menu and the search panel.

Settings

Settings: Header
Setting	Type	Default	Options
Logo
Logo width	Slider	140px	50px–300px, step 10
Logo width on mobile	Slider	100px	40px–200px, step 5
Store name size Applies when you don't upload a logo.	Drop-down	Medium	Small Medium Large
Layout
Desktop layout	Drop-down	Menu left, logo center	Menu left, logo center Logo left, menu center Logo left, menu left Logo left, menu below Logo center, menu below
Mobile logo position	Drop-down	Center	Left Center
Vertical spacing	Drop-down	Compact	Compact Regular Spacious
Use full page width	Checkbox	On	—
Show divider	Checkbox	On	—
Navigation
Main menu type Mega menu shows three menu levels in columns. Drawer opens the menu from the side on every screen size.	Drop-down	Mega menu	Dropdown Mega menu Drawer
Text case Applies to main menu, search, account, and cart.	Drop-down	Uppercase	Uppercase Regular
Search, account, and cart
Style Mobile always uses icons.	Drop-down	Text	Text Icons
Show search	Checkbox	On	—
Cart count Applies to text style. Icons always use a bubble.	Drop-down	Two digits	In parentheses Two digits
Country/region and language
Show country/region selector Shows when you sell in more than one country/region. To add a country/region, go to your market settings.	Checkbox	On	—
Show language selector Shows when your store has more than one language. To add a language, go to your language settings.	Checkbox	On	—
Sticky header
Behavior	Drop-down	On scroll up	None Always On scroll up
Transparent header
Use on home page Applies when the first section of the home page is a slideshow, or rich text with a background.	Checkbox	Off	—
Color scheme Uses only the text color of the scheme. Choose a light text color for dark images. Shown when Use on home page is on	Color scheme	scheme-3	—
Colors
Color scheme	Color scheme	scheme-1	—
Main menu color scheme Applies to dropdowns, mega menu, and search.	Color scheme	scheme-1	—

Blocks

Mega menu promotion

Up to 6 per section.

Settings: Mega menu promotion
Setting	Type	Default	Options
Main menu item position Position of the top-level main menu item, starting from 1. Shows only with the mega menu type: up to 2 per item, or 3 when the item has no third level. Without promotions, the mega menu shows the images of the linked collections.	Slider	1	1–12, step 1
Image 600 x 750px recommended.	Image	—	—
Heading	Text	New season	—
Link label	Text	Shop now	—
Link Leave empty to link to the main menu item.	Link	—	—
Schedule
Schedule visibility	Checkbox	Off	—
Start date and time Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to show it right away. Shown when Schedule visibility is on	Text	—	—
End date and time Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to keep showing it. Shown when Schedule visibility is on	Text	—	—

Theme and guide by ICT Sviluppo