Working with the Header section
Edited

What is the Header section?

The Header section is more than just the first section visible on your website. It's one of the more powerful sections available in your theme and can dramatically change the look and feel of your site.

Key elements in your Header section include:

  • Logo blocks - These allow you to include assets that represent your brand. We highly recommend using PNGs and you can upload multiple color formats that the theme will automatically swap for you on image overlays, where a white logo will look better than a black logo.

  • Navigation - Lets you quickly integrate the menu items that you create for your shop in the Shopify admin.

  • Mega menus - This feature offers a great way to present a larger number of menu items by presenting them in multiple columns, rather than just a traditional drop-down. With the exception of Streamline, all of our themes include mega menu options in the header.

  • Header layout - This setting lets you change up the look and feel of your navigation, logo, social links and more. You'll find anywhere from 4-7 different layout options available depending on the theme you are using, that can radically change the look of your shop.

  • Header style - Options for a sticky or a normal menu style.

  • Toolbar - Some themes like Impulse include an option to include a secondary, 'toolbar' menu which can be great for including 2-3 links in the top portion of the header.

  • Language and currency selectors - All of our themes support Shopify's multi-currency and multi-language features. Once enabled in your shop, you can choose to show these 'selectors' in the header to allow for manual switching between the language or currencies shown on your shop.

Best practices for optimizing the Header section

  • Keep it clean - Clutter is distracting. Be really intentional with any elements that you allow to 'live' in your header. Less is more.

  • Prioritize your navigation - The header is your visitor's gateway to your site and most navigational journeys will start here. Make sure that your most important links are prominent and easy to find.

  • Brand consistency - The colors, fonts and logos you use in your header should be consistent with your brand identity and the overall design of your site.

  • Use high-quality assets - Your theme settings allow you to fine-tune the max-width of any logo you use on both desktop and mobile devices. Go with the highest resolution PNG files you can and let the theme settings handle responsively rendering the best quality image.