Creative - Header - Customize your header and menus

Creative

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.

Header settings

To edit the header settings, you will need to follow the two steps below. 

1

Click the  Customize button in the Themes area of your Shopify admin. This will take you to the theme editor.

2

On the left sidebar, click the  Header option.  

Within the header settings, you will see the following options.

Menu

This option allows you to choose the navigation menu you would like to display within your store's header area.

Header layout

There are 4 different options to choose from in regards to the header layout. 

• Logo left
• Logo center
• Menu center
• Mobile menu

Navigation visibility

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. 

Words:

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

Solid header

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. 

Transparent header

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.

Logo size

There are 4 customizable size options for your store's logo.

Dropdown menus

There are two different ways to display your store's dropdown menus. You can display a Mega menu, or a Simple menu. 

Mega 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.

Simple menu

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. 

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. 

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.

1

Click the enable checkbox in the Collection mega menu part of the header settings.

2

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

3

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.

Country/region selector

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. 

Language selector

You also have the ability to display a language selector. You can set up languages for your store within your store's Language settings. 

Search 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. 

1

Click on  Online Store then  Themes in the side menu to get to the themes area of your admin.

2

Click the  Customize button next to your active theme to go to the theme editor.

3

Once the editor is open navigate to  Theme settings.

4

Select the Search settings.

5

If you make any changes, make sure to click Save and check your work.