Header: Customize your header and menus
OS 2.0 themes
The Creative theme comes with advanced header options that will keep your shoppers engaged, allow you to express your brand identity and increase sales. Some options included are:
- Multiple header styles
- Multiple dropdown styles
- Transparent or solid headers
- Sticky headers
- Mega menus
- Collection mega menus
- Promo blocks
- Predictive search
- Search drawer promotions
In this article, we will explain how you can customize your store's header using the included settings.
To edit the header settings, you will need to follow the two steps below.
- Click the Customize button in the Themes area of your Shopify admin. This will take you to the theme editor.
- On the left sidebar, click the Header option.
Within the header settings, you will see the following options.
This option allows you to choose the navigation menu you would like to display within your store's header area.
There are 4 different options to choose from in regards to the header layout.
- Logo left
- Logo center
- Menu center
- Mobile menu
If you select the 'Mobile menu' option, your store's navigation will appear as a 'hamburger' icon which opens a sidebar menu when clicked on - even on desktop devices. You can control the the sidebar settings by selecting the Sidebar menu option when in the theme editor.
By default, your theme's header isn't sticky. This means whenever you scroll down on your store, the header is out of view until you scroll to the top of the store again. If you would rather have a sticky header which is always on display when scrolling down on a page, you can choose the Sticky navigation visibility option. You also have a third option called Scroll up when the header only comes back into view when you scroll up towards the top of the page when viewing the store.
Header link style
With this setting, you can choose to display header links as Words, or Icons (this setting affects the account, cart and search links only.) The following screenshots show what the header links look like as words, and icons.
You also have the option of making your store's parent links clickable or not. This mean's when you have a nested navigation, for example inside a mega menu, and the column has a heading of Women's Tees' you can make this heading a hyperlink. Or not.
Display a solid or transparent header layout
The first two options for the solid header are the Background color, and the Text and icons color.
You can also upload a logo image for your store.
With Creative, you have the option of making your store's header transparent. This option works best when the first section of your homepage is displaying an image based section. You also have the ability to display the transparent header on the homepage only, or on both the homepage and collection pages. You can also display a header divider if you choose for the header to be transparent.
You can have a different text and icons color specifically for your transparent header, and you can display an alternate logo which could suit your header better than using the original logo you uploaded for the solid header. A classic example of this would be to use a black logo for the Solid header and exactly the same logo but in white for the Transparent header. You can see this in action on our demo stores here if you hover over the logo on a desktop device.
There are 4 customizable size options for your store's logo.
There are two different ways to display your store's dropdown menus. You can display a Mega menu, or a Simple menu.
The mega menu provides you with great selling opportunities with built-in promo blocks. A mega menu can also showcase your inventory and help your customers discover your goods quicker.
The simple menu option displays more of a classic menu style, which allow you to display menu tiers up to three levels. There is no option to add promotional images with links when using the simple menu style.
On mobile, the second-level menu items are not clickable and are instead used as triggers to open and close the third-level menu. This ensures a smooth user experience and avoids any difficulty in moving between the three menu levels when using the thumb to navigate on the smaller screen size.
On desktop, you can choose if you would like to make the second level clickable, by checking the box for "Enable clickable parent links" this option can be found in the Header settings.
Mega menu image blocks
When using the Mega menu style for your store's dropdowns, you have the opportunity to display up to two Mega menu image blocks. You can use the blocks to promote certain product, collections, blogs or any other areas of your store that you'd like your customers to visit.
You can add up to two images, and for each image, you can display a Heading, Text, and even apply a link to the image.
You have the ability to display the menu blocks in the first mega menu only (if you have more than one mega menu), and you can also change the image's size ratio, as well as the Heading & Text alignment.
The Mega menu image blocks will only appear if you have chosen the 'Mega menu' dropdown menu style. If you have chosen the 'Simple' dropdown menu style, any mega menu images you upload will not appear.
Collection mega menus
When using the mega menu style for your store's menu dropdowns, you have the ability to add a Collection mega menu. This is a type of visual menu that can automatically display your store's collections along with their associated collection images inside a mega menu. This feature uses the images you have assigned to the collections inside your store admin.
Setting up a Collection mega menu
This guide assumes you have created some collections and have uploaded images to your collections via the admin.
- Click the enable checkbox in the Collection mega menu part of the header settings.
- Go to your store Admin > Navigation and set up a two-level menu using only collections as bottom level links. This two level menu needs to be part of the main navigation you are using in the header of your store. So typically Main menu > Mega menu trigger > Links to collections
- Check your collection mega menu is working as expected
For best results ensure each collection has an image assigned via the collection editor in the admin. The theme will detect that you have used collections to set up a mega menu and will automatically display the collection images.
You have the option to change the image ratios and alignment of the collection titles inside the mega menu.
You can enable a country/region selector which will allows visitors to choose from a country/region you have set up within the Markets settings of your Shopify store.
You also have the ability to display a language selector. You can set up languages for your store within your store's Language settings.
Creative comes with the option to enable 'predictive search' so that shoppers can find what they want instantly without having to visit a search results page. Our search drawer also gives the ability to add both navigation menus and promo blocks to highlight popular collections.
When shoppers type some text into the empty search field, the results will auto-populate. See the screenshot below for example, where we typed 'Jacket' into the empty search field for the Creative Chalk demo store.
The predictive search does not search through blog articles and pages, only products. To search these other areas too you would need to disable predictive search.
You will find the Search settings by following the steps below.
- Click on Online Store then Themes in the side menu to get to the themes area of your admin.
- Click the Customize button next to your active theme to go to the theme editor.
- Once the editor is open navigate to Theme settings.
- Select the Search settings.
- If you make any changes, make sure to click Save and check your work.