Move account and search icons to your navigation
Note:
Groupthought does not provide any warranty or further support for this code. Use this code at your own risk. The code provided below is only a suggestion. You are responsible for any and all code customizations made to your theme. Please work with a developer or Shopify Expert to ensure proper customization. This code may not work with all versions of of Pipeline or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.
This tutorial is intended for use with the Pipeline theme.
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: