Your Cart is Empty
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.
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:
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.
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:
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:
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.
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.
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.
When using Flex, you have the option to create highly configurable mega menus to engage users and make finding just the right product easier.
Our affiliate program is designed to reward your hard work and dedication. When you refer sales of our Superstore, Turbo, or Flex Shopify themes, you'll earn a handsome 15% commission for the first three months. Imagine the potential for substantial earnings during this initial period.
Join today!
