Move account and search icons to your navigation

Move your account and/or search icons into the main navigation with this customization. 

Result:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

1

Create navigation menu items

Create top-level menu items for Account and Search:

https://myshopify.com/admin/links

Create in your Main Menu two menu items:

Sign-In (Account):

Make sure the Name is exactly (case sensitive) :

Sign-In

Search:

If you have the old menu system, map the link for search to "/search" without quotes. The new menu system has an option for Search.

Make sure the Name is exactly (case sensitive) :

Search

At this point your new navigation menu items should be showing:

2

Add Javascript to replace the text in the menu with icons

Add the following code to the very bottom of your Javascript file, this will vary depending on which version of Pipeline you're running: 

Code to add:

/* --- code to swap nav items to icons --- */
$( "a.nav-link:contains('Sign-In')" ).html("<img src='https://cdn.shopify.com/s/files/1/2018/8867/t/78/assets/account.svg'>");
$( "a.nav-link:contains('Search')" ).html("<img src='https://cdn.shopify.com/s/files/1/2018/8867/files/search.svg'>");
/* -- end -- */

Where do I add the Javascript code?

Use this link to learn where exactly to add this code snippet:

Where to add your Javascript code

You can use your own .SVG files (from your shop). These .SVG files have been uploaded to our sample shop. 

3

Turn off icons in the header

You can turn off the duplicate icons in the top announcement bar from the Theme Editor's Header settings:

Use the Custom Theme option in the top right corner of the Code Editor:

At the bottom of the Header settings you'll find the TOP BAR section:

Uncheck both these settings:

Save your changes. 

Still need help? Contact Us Contact Us