Welcome To Our Help Center 👋

Header (Navigation Area)

Learn how to customize the look and feel, general settings, main menu elements, search, header contact details and mobile header options.
Written by PJ Guerrero
Updated 6 months ago

The header is the main menu area, containing the logo, search and promotional banner.

Look and Feel

1 The first step is to open the theme settings area of your Shopify theme config and go into the Header section.

Step 1 image

2 Now click Background Color to change the header background color.

Step 2 image

3 Next, select color or you can enter color hex code into the highlighted input field.

Step 3 image

4 Next is the Header navigation section.

Click Menu Border Color to change the border color of the menu.

Step 4 image

5 Next, click the Menu Background Color to change the background color of the menu.

Step 5 image

6 Next, click Menu Font Color to change the Font(Text) color of the menu.

Step 6 image

7 Next, if you would like show the animated border above the menu item on mouse hover, click on Show Hover Highlight bar.

Step 7 image

8 Now, click Link Font Size and select your preferred font size for Menu link.

Below you can select the font style for it.

Step 8 image

9 Now scroll down and click Use Social sharing URL preview image.

It will show a custom image whenever you share your site URL.

Step 9 image

10 Next, click Replace to change the URL preview image.

Step 10 image

11 Next up are the sticky header settings.

you can select anyone between 4 options.

Step 11 image

12 Use Full Sticky Header.

It will make the full header sticky including top strip bar on page scroll.

Step 12 image

13 Use Minimal Sticky Header.

It will make header sticky except the top strip bar on scroll.

Step 13 image

14 Use Sticky Header In Mobile.

Header will be sticky only in mobile.

Step 14 image

15 Disable sticky header in mobile and desktop.

Disable sticky header both in desktop and mobile.

Step 15 image

16 Now scroll down and go to the Mobile Search Bar Section.

Here, you have 3 different options.

you can select anyone.

Step 16 image

17 1. Hidden search bar (this option hides the search bar unless your client clicks on the search icon).
2. Show search bar when top scrolled (this option will display a dropdown search bar when the client scrolls to the top.
3. Always show search bar

Step 17 image

18 Now scroll down and click on the select menu, you'll be able to select a navigation here that will display in the header.

This menu will show before the first Megamenu.

Step 18 image

19 Select menu.

Step 19 image

20 Next, click on the select menu and select the Last main menu.

This menu will show after the last Megamenu.

Step 20 image

21 Now, click Nav alignment and select menu alignment.

Step 21 image

22 Next, scroll down and Click Use Promotion Banner.

It will show a small banner in the header.

Step 22 image

23 Next, click Replace to change the promotion banner image.

Step 23 image

24 Next, Enter URL for promotion banner image.

Step 24 image

25 You can enable/disable the search feature here.

Customers can search for products, collections, articles, blogs, etc..

Step 25 image

26 Next, click Search Products Only, If you want to allow your clients to search for only products via the search bar.

Step 26 image

27 Next, enter Search Field Prompt Text(Placeholder text).

This text will show in the search bar when the search bar is empty.

Step 27 image

28 Click highlight and select background color for search box.

Step 28 image

29 Next, select search box text color.

Step 29 image

30 Next, select search box border color.

Step 30 image

31 Next, select the background color for the search box button.

Step 31 image

32 Now scroll down and click Use Custom Search Icon, If you want to use a custom image instead of the default search icon.

Step 32 image

33 Click Search Icon Image and upload search icon image.

Note: please upload '.png' format image file.

Step 33 image

34 Next, Click Select Icon Color and select color for the search icon.

This setting will be applied if you are using the default search icon.

Step 34 image

35 Now, scroll down and go to Header Contact Details.

Click Display Contact Details.

Step 35 image

36 Next, Click Use Custom Phone Icon, If you want to use custom phone icon instead of theme default.

Step 36 image

37 Click Replace and Upload phone icon image.

Step 37 image

38 Next, Enter Phone number prompt text.

Ex. 'Got a Question? Call Us'

You can change text color of it by clicking on Phone Number Prompt Font Color.

Step 38 image

39 Next, select font size for phone number prompt text.

Step 39 image

40 Next, select font style for phone number prompt text.

Step 40 image

41 Next, Enter phone number or email id.

Step 41 image

42 Next, click Highlight to link phone number or email id with URL.

Step 42 image

43 Next, enter URL for phone number or email id.

Step 43 image

44 Now, select color for phone number/ email address text.

Step 44 image

45 Next, select font size for phone number/ email id text.

Step 45 image

46 Next, select font style for phone number/ email id text.

Step 46 image

47 Next, enter Opening hour text.

Ex. 'Mon-Sat 9am-6pm Eastern'

Step 47 image

48 Next, select color for Opening hour text.

Step 48 image

49 Next, select font size for Opening hour text.

You can change font style also by click on Font style.

Step 49 image

50 Now scroll up and go to again Phone/Date bar settings and select UI style for it.

Step 50 image

51 Standard will show the contact details in the header.

Hybrid will show the contact details in the header when full header displays and on the menu bar when it becomes sticky.

Menu will show the contact details on the menu bar itself.

Step 51 image

52 Now click save to save your theme config and preview your changes.

That's it. You are done!

Step 52 image

Here's an interactive tutorial for the visual learners

https://www.iorad.com/player/1583142/DemoStore---Header

Background Color – Changes the background color for the header area.

Menu Background Color – Changes the color for the menu background.

Menu Font Color – Changes the font color for the menu text.

Show Hover Highlight Bar – Displays your primary color above text when hovering over menu links.

Link Font Size – Allows you to change the font size for links.

Social Sharing URL Preview Image – If you have a particular image you want to be seen on social media, upload it here.

 

General Settings:

Use Full Sticky Header – Set your header to be fully sticky, so it follows visitors down the page.

Use Minimal Sticky Header – Set your header to minimal sticky, for a concise header that follows visitors.

Use Sticky Header In Mobile – Enable or disable sticky header on mobile.

Disable Sticky Header in Mobile and Desktop Both – Completely disables the sticky feature from both desktop and mobile.

 

Main Menu:

First Main Menu – Select a nav menu you would like to display before the mega menu's.

Last Main Menu – Select a nav menu you would like to display after the mega menu's.

Promotional Banner – This area allows you to insert an image with a hyperlink - ideal for a promotion.

 

Search:

Customize your search menu to act as a call to action involving your slogan. “Discover Higher Conversions…” for example. “Find Your Style…” “Comfortable Jeans Here…”

 

Phone Number Display Settings:

Standard – Phone number displays on the header. 

Hybrid – Phone number displays on the header when the header is set to full, and moves down to display on the menu bar when the header goes into sticky mode.

Menu – Phone number displays on the menu bar

Header Contact Details:

Display Contact Details – Toggles contact details on or off.

Use Custom Phone Icon – You can choose a custom icon to use if this is ticked.

Phone/Email Icon – Choose a custom icon to replace the stock icon.

Phone Number Prompt Text – Write your CTA text here. Ex: “Questions or Concerns? Call Anytime!”

Font Size – Choose the best font size for your store.

Font Style – Choose between light, normal, bold, and bolder text.

Header Phone Number/Email Address – Type your business phone number here or use your company email address.

Font Color – Changes the font color of the details area.

Font Size – Changes the font size of the details area.

Font Style – Choose between light, normal, bold, and bolder text of the details area.

Opening Hours – Provide your opening and closing hours here. Ex: 9am-5pm

Font Color – Changes the font color of your opening hours.

Font Size – Changes the font size of your opening hours.

Font Style – Choose between light, normal, bold, and bolder text of your opening hours.

 

Mobile Header:

Enable Top Bar – Enable or disable the mobile header area.

Top Bar Font Color – Change the mobile top bar font color.

Top Bar Background Color – Change the mobile top bar background color.

Top Bar Bottom Border Color – Change the mobile top bar border color.

Mobile Header Background Color – Change the color of the mobile header background (logo area).

Top Bar Text – Enter your top bar text here. Best use for promotional needs. Ex: “FREE SHIPPING when you spend $x.”

Display User Country – Display a small flag that automatically shows your visitor’s location.

Search Icon Color – Changes the color of the search icon when expanded.

Did this answer your question?