Header Strip

Learn how to customize the various elements of the header strip bar.
Written by Jonathan Diaz
Updated 8 months ago

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

2 Click on Background

Step 2 image

3 Select Background color for header strip.

Step 3 image

4 Now show Header Strip bar

Step 4 image

5 Select any Font Color and put here. 

Step 5 image

6 Now select any Link Font Color for top menu.

Step 6 image

7 Select Link Hover Font Color

Step 7 image

8 Now Click Enable and Select a Navigation menu for showing on top bar. 

Step 8 image

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

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

11 Now enable Show Top Nav in Mobile Menu

Step 11 image

12 Put Text here- 
(Geo Ip Flag/Country) Spend $x to Unlock Free Shipping to

Step 12 image

13 If enable Show Free Shipping Achieved Text When Threshold Is Met then shows Free shipping message. 

Step 13 image

14 Now enable Display User Country and shows your current contry flag based on your IP Address. 

Step 14 image

15 If enable Use Custom Icon for cart then upload here in PNG Format

Step 15 image

16 Bottom Border Color – Changes the border underneath the strip.

Step 16 image

17 Click highlight go into mobile design

Step 17 image

18 Click Enable Top Bar for Mobile header top bar

Step 18 image

19 Add Custom text on Top Bar Text which you want to show on mobile header. 

Step 19 image

20 Pick up any suitable Top Bar FontColor as your choice and combination on a theme. 

Step 20 image

21 Pick up any suitable Top Bar Background Color as your choice and combination on a theme. 

Step 21 image

22 Pick up any suitable Top Bar Bottom Border Color as your choice and combination on a theme. 

Step 22 image

23 Show selected background color and stripr bar on mobile top bar

Step 23 image

24 If enable Display User Country in mobile

Step 24 image

25 Shows Country Flag and Full Name in mobile header strip. 

Step 25 image

26 Now enable Use Facebook Page Plugin. 
Put your facdbook page name and page URL. 

Step 26 image

27 Shows Facebook page on header strip bar. 
That's it! you are done. 

Step 27 image

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

Did this answer your question?