Header

Header is the section at the top of every page. It features the main navigation, your store logo, and search, customer profile, and cart icons.

Multiple header layouts

GENERAL

Color scheme

Choose a separate color scheme for the section.

Width

Choose the width of the section on the page.

Sticky header

Choose whether and how to show the sticky header. Note that on mobile, you can’t turn the sticky header off: when set to ‘None’, it still appears dynamically.

None	sticky header is turned off (on desktop only)
Static	sticky header is always pinned to the top and remains in place when you scroll up and down the page
Dynamic	sticky header disappears when you scroll down and re-appears after you slightly scroll up the page

Show shadow

Select to show a decorative shadow at the bottom of the header bar to make it more distinct.

Show separator

Select to show a decorative line at the bottom of the header bar to visually separate it from the page body.

Enable transparent header

Select to make the header transparent.

MENU

Menu

Choose from the list of menus in the navigation section of your admin. Note that for the header, you can create a complex menu with up to three levels of nested sub-menus.

Desktop menu type

Choose the view of the first-level menu and the nested sub-menus.

On mobile devices, small screens, and browser windows that fit less than 768 pixels as well as when the first-level menu items don’t fit in one row, the menu always appears as a ‘Drawer’.

Dropdown	shows the first-level menu in a row on the header bar and opens the sub-menus as a series of nested dropdown lists
Mega menu	shows the first-level menu in a row on the header bar and opens the sub-menus as a panel where the 2nd-level sub-menu items are placed in a row on top and 3rd-level sub-menus - in columns below them
Drawer	the first-level menu and the sub-menus are hidden behind a hamburger button on the left of the header bar; when you select the button, the menu slides out from the left as a drawer

Desktop layout

Adjust the layout of your logo and first-level menu items on the header bar. Note that layouts don’t apply to the ‘Drawer’ menu type.

Open menu

Choose how to open the nested sub-menus on desktop. Note that the ‘Drawer’ menu always opens on click.

Color menu items

Color the selected menu items by adding a rule (menu item name:#hexcolorcode) to the input field. Don't forget the colon that separates the menu item name and the color code, as well as the # before the color code. Note that if you color more than one menu item, you need to separate each rule with a comma. You can use this hex color palette to choose the right shade and see its code.

LOGO

Desktop logo

Select an image for your store logo. You can choose images either from your library or the free images collection. Note that the free images you use are also saved to your library. You can further edit the uploaded image: add a focal point and fill in an alt text.

Transparent desktop logo

Select an alternate store logo that looks better with a transparent header. Use the same dimensions as for the main store logo. You can choose the image for the logo either from your library or the free images collection. Note that the free images you use are also saved to your library. You can further edit the uploaded image: add a focal point and fill in an alt text.

When you hover over the header, it loses transparency and the main desktop logo appears.

Desktop logo size

Adjust the logo size within the section.

Mobile logo

Select an image for your store logo. You can choose images either from your library or the free images collection. Note that the free images you use are also saved to your library. You can further edit the uploaded image: add a focal point and fill in an alt text.

Transparent mobile logo

Select an alternate store logo that looks better with a transparent header. Use the same dimensions as for the main store logo. You can choose the image for the logo either from your library or the free images collection. Note that the free images you use are also saved to your library. You can further edit the uploaded image: add a focal point and fill in an alt text.

Mobile logo size

Adjust the logo size within the section.

TRANSPARENT HEADER

Adjust the view of the transparent header.

IMPORTANT:

• when you hover over the header, it loses transparency and shows as a regular header

• when the first section on the page is not a banner section (Slideshow, Image slider, Collage, Video, etc.) and the header can’t overlap it, the header loses transparency and shows as a regular header

• when opacity and blurring are set to “0” and the sticky header is turned on, the header on scroll loses transparency and shows as regular

Show only on home page

Select to show the transparent header on the home page only.

Opacity

Adjust how much the store content in the background of the transparent header should be dimmed to increase the menu items and icons visibility.

Blurring

Adjust how much the store content in the background of the transparent header should be blurred.

Background

Pick the color for the transparent header background.

Items and icons

Pick the color for the menu items and icons on the transparent header.

ICONS

Icon style

Choose the view of the 'Search', 'Login', and 'Cart' icons in the header.

Style 1 - Solid	icons in a square style filled with color
Style 1 - Outline	icons in a square style with their edges colored
Style 2 - Solid	icons in a rounded style filled with color
Style 2 - Outline	icons in a rounded style with their edges colored

Cart type

Choose the view of the 'Cart' icon in the header.

Bag	choose it if your customers shop for clothing and accessories
Cart	choose it if your customers shop for bulky goods and home appliances
Basket	choose it if your customers shop for housewares and groceries

Login mobile position

For the mobile view, choose whether to place the 'Login' icon on the header bar or within the menu drawer.

LANGUAGE SELECTOR

Show language selector

Select to let customers choose the store language from the header. Note that Shopify themes are originally in English, and you should add translations to enable language selection. For additional details regarding multiple languages, please, contact Shopify support.

CURRENCY SELECTOR

Show currency selector

Select to let customers choose the currency from the header. For additional details regarding multiple currencies, please, contact Shopify support.

PADDINGS

Add side paddings

Select to add extra space on the sides between the section and the screen.

Desktop top padding

For the desktop view, adjust the space between the section and the previous element on the page.

Desktop bottom padding

For the desktop view, adjust the space between the section and the following element on the page.

Mobile top padding

For the mobile view, adjust the space between the section and the previous element on the page.

Mobile bottom padding

For the mobile view, adjust the space between the section and the following element on the page.

ADD HEADER BLOCKS

Header is a navigation section where you can create a mega menu of up to three levels. Choose out of three blocks and link them to menu items so that they appear when you open menu tabs.

Link header blocks to menu items

Fill in the name of the menu item to link the block to, for example, 'Home'. The block appears next to the first menu level when you select this menu item in the header. Note that as you open the dropdown sub-menus within the menu item, the block remains in the background.

pageImagespageFeatured collectionpageCollection list