Header

4 min read

The bar at the top of every page, with your logo in the middle, the main menu on the left and links to search, the customer’s account and the cart on the right. On desktop the menu and links are uppercase text labels rather than icons, and the cart shows its count, as in Cart (2); on smaller screens they become icons and the menu unfolds from under the bar. The header belongs to the header group, so you set it up once and every page shows it.

Find the section

The header is already in place, and you don’t add it to templates.

Online Store → Themes → Customize

In your Shopify admin, go to Online Store → Themes and select Customize on Cosmero.
In the header group at the top of the sidebar, above the template’s sections, select Header.
Change the settings, then select Save. The change shows on every page.

Settings

Logo

Logo: your logo image. When it’s empty, the header uses the logo from Brand assets in your Shopify admin, then your store name.
Logo over images: a light version of your logo, for when the header sits over an image (see Enable header overlay). It’s used only when the header also has a logo.
Logo width: the logo’s width on desktop, 40 to 300 px. A logo is never taller than 56 px, so square and tall logos stay compact.
Mobile logo width: the logo’s width on smaller screens, 32 to 160 px.

Main menu: the menu in the header, picked from your menus in Content → Menus in your Shopify admin. It starts with your store’s main menu. The mobile menu shows it too.
Submenu style: how nested links open on desktop. Dropdown opens a list under the menu item. Mega menu opens a panel as wide as the header, with each second-level link as a column heading and its own links below it.
Show collection images: shows the collection image above second-level links that point to a collection. Shown when Submenu style is Mega menu.

Featured collection: shows up to 8 products from the collection at the top of the mobile menu, in a row that scrolls sideways, with a link to the whole collection.
Heading: the heading above those products. Shown when a Featured collection is chosen.

Behavior

Enable header overlay: places the header over the first section of a page when that section is a Slideshow, an Image banner with Text color set to White over overlay, or a Collection banner with Layout set to Image behind text. There the bar is transparent with white text, and it turns solid once it floats or the mobile menu opens. It’s on by default.
Sticky header: Always keeps the header at the top of the screen as a floating bar while customers scroll. On scroll up hides it while they scroll down and brings it back when they scroll up. Off lets it scroll away with the page.

Colors

Color scheme: the bar’s colors. Its submenus, selectors and mobile menu use them too. You edit color schemes in Theme settings.
Floating bar color scheme: the bar’s colors while it floats over the page. Shown when Sticky header isn’t Off.

Country/region and language

Show country/region selector: lets customers pick their country/region, shown with its currency. To add a country/region, go to Markets in your Shopify admin.
Show language selector: lets customers pick a language. To add a language, go to Settings → Languages.

Both selectors show on desktop and at the bottom of the mobile menu, and only when your store has more than one country/region or language.

Tips

Build your menus in Content → Menus. They can go three levels deep. A top-level item with nested links opens its submenu instead of its own page, so Cosmero repeats its link inside the submenu, unless the item links to #.
On screens under 990 px, the menu button opens the menu under the bar, in the bar’s colors: the featured products first, then your menu links, with nested levels that open in place, then the selectors. It closes with the X, a tap outside it or the Esc key.
The account link shows when your store shows sign-in links, which you set in Settings → Customer accounts.
The search link opens the search panel, whose suggestions you set in Theme settings → Search (see Theme settings). The cart link opens the cart drawer or the cart page, depending on Cart type in Theme settings → Cart (see Cart).
The header isn’t in the Add section list, so if you remove it, the theme editor can’t add it back.