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.
2 Now click Background Color to change the header background color.
3 Next, select color or you can enter color hex code into the highlighted input field.
4 Next is the Header navigation section.
Click Menu Border Color to change the border color of the menu.
5 Next, click the Menu Background Color to change the background color of the menu.
6 Next, click Menu Font Color to change the Font(Text) color of the menu.
7 Next, if you would like show the animated border above the menu item on mouse hover, click on Show Hover Highlight bar.
8 Now, click Link Font Size and select your preferred font size for Menu link.
Below you can select the font style for it.
9 Now scroll down and click Use Social sharing URL preview image.
It will show a custom image whenever you share your site URL.
10 Next, click Replace to change the URL preview image.
11 Next up are the sticky header settings.
you can select anyone between 4 options.
12 Use Full Sticky Header.
It will make the full header sticky including top strip bar on page scroll.
13 Use Minimal Sticky Header.
It will make header sticky except the top strip bar on scroll.
14 Use Sticky Header In Mobile.
Header will be sticky only in mobile.
15 Disable sticky header in mobile and desktop.
Disable sticky header both in desktop and mobile.
16 Now scroll down and go to the Mobile Search Bar Section.
Here, you have 3 different options.
you can select anyone.
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
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.
19 Select menu.
20 Next, click on the select menu and select the Last main menu.
This menu will show after the last Megamenu.
21 Now, click Nav alignment and select menu alignment.
22 Next, scroll down and Click Use Promotion Banner.
It will show a small banner in the header.
23 Next, click Replace to change the promotion banner image.
24 Next, Enter URL for promotion banner image.
25 You can enable/disable the search feature here.
Customers can search for products, collections, articles, blogs, etc..
26 Next, click Search Products Only, If you want to allow your clients to search for only products via the search bar.
27 Next, enter Search Field Prompt Text(Placeholder text).
This text will show in the search bar when the search bar is empty.
28 Click highlight and select background color for search box.
29 Next, select search box text color.
30 Next, select search box border color.
31 Next, select the background color for the search box button.
32 Now scroll down and click Use Custom Search Icon, If you want to use a custom image instead of the default search icon.
33 Click Search Icon Image and upload search icon image.
Note: please upload '.png' format image file.
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.
35 Now, scroll down and go to Header Contact Details.
Click Display Contact Details.
36 Next, Click Use Custom Phone Icon, If you want to use custom phone icon instead of theme default.
37 Click Replace and Upload phone icon 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.
39 Next, select font size for phone number prompt text.
40 Next, select font style for phone number prompt text.
41 Next, Enter phone number or email id.
42 Next, click Highlight to link phone number or email id with URL.
43 Next, enter URL for phone number or email id.
44 Now, select color for phone number/ email address text.
45 Next, select font size for phone number/ email id text.
46 Next, select font style for phone number/ email id text.
47 Next, enter Opening hour text.
Ex. 'Mon-Sat 9am-6pm Eastern'
48 Next, select color for Opening hour text.
49 Next, select font size for Opening hour text.
You can change font style also by click on Font style.
50 Now scroll up and go to again Phone/Date bar settings and select UI style for it.
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.
52 Now click save to save your theme config and preview your changes.
That's it. You are done!
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.
