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:
- 1
-
Make a duplicate of your theme
Do not skip this step, it's required.
- 2
-
Create navigation menu items
Open your Navigation editor for your store:
Create top-level menu items for Account and Search:
Create in your Main Menu two menu items:
Sign-In (Account):
1. 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.
2. Make sure the Name is exactly (case sensitive) :
Search
At this point your new navigation menu items should be showing:
- 3
-
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:
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.
- 4
-
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.
CSS code to invert icon colors
If you're using a transparent header with a dark background, the icons may appear too dark:
You can use this CSS snippet can help with both modes, transparent and white background when scrolling:
/* -- Start Pipeline override code -- */
.nav-link img { filter:invert(1); }
/* - end - */
Use this link to learn where exactly to add this code snippet: