The header strip houses all your important information – announcements, account login, menu and the shopping cart. It’s the first thing customers see.
27 STEPS
1 The first step is to open your sections area of your Shopify theme config and go to the Header-Strip section
2 Click on Background
3 Select Background color for header strip.
4 Now show Header Strip bar
5 Select any Font Color and put here.
6 Now select any Link Font Color for top menu.
7 Select Link Hover Font Color
8 Now Click Enable and Select a Navigation menu for showing on top bar.
9 Now click on select menu, you'll be able to select a navigation here that will display on your top bar on header.
10 Select your navigation,
In this example we picked Top Menu 5.1 for top bar then click on select button.
Also on any Navigation put maximum 4 links.
11 Now enable Show Top Nav in Mobile Menu
12 Put Text here-
(Geo Ip Flag/Country) Spend $x to Unlock Free Shipping to
13 If enable Show Free Shipping Achieved Text When Threshold Is Met then shows Free shipping message.
14 Now enable Display User Country and shows your current contry flag based on your IP Address.
15 If enable Use Custom Icon for cart then upload here in PNG Format
16 Bottom Border Color – Changes the border underneath the strip.
17 Click highlight go into mobile design
18 Click Enable Top Bar for Mobile header top bar
19 Add Custom text on Top Bar Text which you want to show on mobile header.
20 Pick up any suitable Top Bar FontColor as your choice and combination on a theme.
21 Pick up any suitable Top Bar Background Color as your choice and combination on a theme.
22 Pick up any suitable Top Bar Bottom Border Color as your choice and combination on a theme.
23 Show selected background color and stripr bar on mobile top bar
24 If enable Display User Country in mobile
25 Shows Country Flag and Full Name in mobile header strip.
26 Now enable Use Facebook Page Plugin.
Put your facdbook page name and page URL.
27 Shows Facebook page on header strip bar.
That's it! you are done.
Here's an interactive tutorial for the visual learners
https://www.iorad.com/player/1583842/DemoStore-----Header-Strip
Background: Changes the color of the strip background.
Font Color: Changes the color of the strip’s font.
Link Font Color: Changes the color of links.
Link Hover Font Color: Changes the color of links when hovering your mouse.
Bottom Border Color: Changes the border underneath the strip.
Other Details Text Color: Changes other text details.
Font Size: Changes the header font size.
Top Bar Settings
Enable: Allows you to enable or disable the top bar.
Navigation Menu: Use the strip as a secondary menu or if you’d like your menu higher up on your site.
Show Top Nav in Mobile Menu: Shows or hides the top nav on the mobile menu.
Text: Allows you to add any text you wish to the strip. Best used for marketing messages.
Show Free Shipping Achieved: If you have a free shipping threshold set up, you can activate an achievement message to display when they’ve met the spend amount.
Link to URL: Allows you to link to the desired URL within the strip.
Display User Country: Uses GEO IP to display the users country flag next to your marketing message.
Use Custom Icon for Cart: Allows you to use custom icons for the cart image. (be sure to use a transparent PNG 20x20px for this section.
Enable Border Bottom: Enable or disable the border right underneath the header strip.
Facebook Page Plugin: Connect with your audience and grow your business socially. Just enter your URL.
Time to click “Save” and continue on.
TAGS: top bar, top bar menu, top-bar, header-strip, header strip
