The header of your Shopify theme is pretty important.
Not only does it appear on almost every page, it’s also the first thing shoppers see when looking from the top to bottom of the page.
It’s also where your primary navigation menu lives, which can play a huge role in how shoppers interact with your site and, ultimately, find products to buy.
Headers are also important in the sense that they typically contain quick access to the user’s cart or bag — another key element in helping shuffle shoppers toward checkout.
These reasons are why we've included four Header styles for you to choose from in our new Flex theme.
To adjust which header your store uses, navigate to Customize > Theme settings > Layout.
Additional options and settings, which change depending on which header is active, are under Customize > Home page > Sections > Header.
Note that after changing header layouts, there is a brief delay while the theme editor processes your request and updates what settings are shown under the header section panel.
Typically, you should wait until the preview refreshes with the new layout before attempting to work on any other theme settings.
Classic Shopify theme header
As its name implies, this header option is a tried and true option — with a clean, easy to navigate layout combined with slick design.
From left to right, here’s a quick look at the classic header’s elements:
- The classic layout features your store’s name or logo on the far left. You can control the width of your logo under the header section settings.
- Next up is a navigation menu. This occupies the space between your logo (on the left) and a small icon based menu on the far right, and will vary based on the width of the logo and number of menu items.
- On the far right of the classic header is an icon based menu that, by default, includes a search, account and cart (bag, basket, or box) icon. You can disable search in the header under the header options. If your store doesn’t allow users to create accounts, the “person” icon for the customer login page won’t show up.
- When classic is activated, the additional bar above the header becomes dedicated to the top bar content you’ve set up.
Centered Shopify theme header
This option, which has been created specifically in response to customer requests, puts your site name or logo in the center of the page.
In the header section settings, you can select whether the logo is between or above the menu.
If you select between, the theme attempts to place the logo as close to the center of your navigation menu as possible.
The exact position of the logo, however, will vary depending on the number of navigation items you have in your menu and how lengthy they are. In general, using an even number of navigation items that are all relatively the same number of letters will produce the best results.
When using centered mode, the icon menu moves to the far right of the top bar.
Both centered and classic also include an “overlay” option that makes the menu bar blend into the content under it — including options to control the color and transparency of the background as well as the link colors, enabling text shadows to improve readability and using a unique logo.
Search focus Shopify theme header
Another newcomer is a new search focused header option.
Like a certain ecommerce giant named after a South American river, this option gives your shoppers quick and easy access to a large, highly visible search box as well as other layout changes:
- Because the search bar is, by design, very large, it essentially becomes two tiers.
- The first tier accommodates the store name or logo, search box and icon menu.
- The second tier, which falls immediately below this, is home to the main navigation menu.
Vertical Shopify theme header
This “header” is a little bit of a misnomer — since it can’t really be a “header” when it’s running down the side of the page.
However, this feature ultimately gives you yet another option for creating stunning layouts with your Shopify theme.
This layout is “stacked” and you can control what elements appear (and don’t appear) in it thanks to content blocks:
- Site name or logo
- Icon menu (including options to show text, icons or both and hide the search icon)
- Search box
- Primary navigation menu
- Payment icons
- Social media icons
- Text area
- Copyright statement
Because it uses content blocks, the vertical header is also a good option for early stage Shopify stores who aren’t ready to turn on the cart and checkout functionality since it allows you to remove the cart icon or link by just removing that section — instead of having to use CSS or code customizations.
When vertical header is enabled, you can select between left or centered alignment in the sidebar menu.
It’s worth noting that the sidebar menu is “sticky” on desktop and larger tablet screens so it always remains visible for these visitors. Mobile users, however, see a more traditional header-based navigation.
Because of this, it’s a good idea to keep an eye on the number of sections and menu items when considering how the theme will look on desktop.
On larger screens, if there’s not enough room in the user’s browser to show all of the menu items vertically, it will scroll slightly, but this will typically cause elements such as your logo and search bar to go off screen as users get farther down the page.
A good workaround to this is to utilize Flex’s mega menu feature, which is also supported in vertical mode.
Mobile header considerations
It’s important to keep in mind that the navigation menu is largely identical when your site is viewed on a mobile device.
This includes the vertical header option becoming a horizontal bar (though, after hovering on the menu icon in mobile, the fly in menu is more a vertical layout in all modes).
However, there are mobile specific settings for the header under Customize > Theme Settings > Mobile which will allow you to make some positioning and color selections, as well as uploading a mobile specific logo.
Other header areas
Flex also includes the option to have a promo bar and top bar that play a key role in how your Shopify store’s header looks and works.
The promo bar is available in all header options and, as its name suggests, is an area intended for promotional information or campaigns — but it also works well for standing messages such as free shipping notices.
On the other hand, the “top bar,” which is not available in the vertical option, can be used for a variety of purposes, such as an address, phone number or other messaging.
Headers and Shopify theme mega menus
When using Flex, you have the option to create highly configurable mega menus to engage users and make finding just the right product easier.
