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
![Step 1 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=1&width=800&height=600&mobile_width=450&mobile_height=400)
2 Click on Background
![Step 2 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=2&width=800&height=600&mobile_width=450&mobile_height=400)
3 Select Background color for header strip.
![Step 3 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=3&width=800&height=600&mobile_width=450&mobile_height=400)
4 Now show Header Strip bar
![Step 4 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=4&width=800&height=600&mobile_width=450&mobile_height=400)
5 Select any Font Color and put here.
![Step 5 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=5&width=800&height=600&mobile_width=450&mobile_height=400)
6 Now select any Link Font Color for top menu.
![Step 6 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=6&width=800&height=600&mobile_width=450&mobile_height=400)
7 Select Link Hover Font Color
![Step 7 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=7&width=800&height=600&mobile_width=450&mobile_height=400)
8 Now Click Enable and Select a Navigation menu for showing on top bar.
![Step 8 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=8&width=800&height=600&mobile_width=450&mobile_height=400)
9 Now click on select menu, you'll be able to select a navigation here that will display on your top bar on header.
![Step 9 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=9&width=800&height=600&mobile_width=450&mobile_height=400)
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.
![Step 10 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=10&width=800&height=600&mobile_width=450&mobile_height=400)
11 Now enable Show Top Nav in Mobile Menu
![Step 11 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=11&width=800&height=600&mobile_width=450&mobile_height=400)
12 Put Text here-
(Geo Ip Flag/Country) Spend $x to Unlock Free Shipping to
![Step 12 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=12&width=800&height=600&mobile_width=450&mobile_height=400)
13 If enable Show Free Shipping Achieved Text When Threshold Is Met then shows Free shipping message.
![Step 13 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=13&width=800&height=600&mobile_width=450&mobile_height=400)
14 Now enable Display User Country and shows your current contry flag based on your IP Address.
![Step 14 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=14&width=800&height=600&mobile_width=450&mobile_height=400)
15 If enable Use Custom Icon for cart then upload here in PNG Format
![Step 15 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=15&width=800&height=600&mobile_width=450&mobile_height=400)
16 Bottom Border Color – Changes the border underneath the strip.
![Step 16 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=16&width=800&height=600&mobile_width=450&mobile_height=400)
17 Click highlight go into mobile design
![Step 17 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=17&width=800&height=600&mobile_width=450&mobile_height=400)
18 Click Enable Top Bar for Mobile header top bar
![Step 18 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=18&width=800&height=600&mobile_width=450&mobile_height=400)
19 Add Custom text on Top Bar Text which you want to show on mobile header.
![Step 19 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=19&width=800&height=600&mobile_width=450&mobile_height=400)
20 Pick up any suitable Top Bar FontColor as your choice and combination on a theme.
![Step 20 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=20&width=800&height=600&mobile_width=450&mobile_height=400)
21 Pick up any suitable Top Bar Background Color as your choice and combination on a theme.
![Step 21 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=21&width=800&height=600&mobile_width=450&mobile_height=400)
22 Pick up any suitable Top Bar Bottom Border Color as your choice and combination on a theme.
![Step 22 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=22&width=800&height=600&mobile_width=450&mobile_height=400)
23 Show selected background color and stripr bar on mobile top bar
![Step 23 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=23&width=800&height=600&mobile_width=450&mobile_height=400)
24 If enable Display User Country in mobile
![Step 24 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=24&width=800&height=600&mobile_width=450&mobile_height=400)
25 Shows Country Flag and Full Name in mobile header strip.
![Step 25 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=25&width=800&height=600&mobile_width=450&mobile_height=400)
26 Now enable Use Facebook Page Plugin.
Put your facdbook page name and page URL.
![Step 26 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=26&width=800&height=600&mobile_width=450&mobile_height=400)
27 Shows Facebook page on header strip bar.
That's it! you are done.
![Step 27 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1583842&step_number=27&width=800&height=600&mobile_width=450&mobile_height=400)
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