How to merge login/cart/search box with nav links in the header in Shopify?

Merge login, cart and search box with navigation menu in Shopify

Hello Developers, Hope you are doing well. Shopify is a total E-Commerce arrangement that permits you to set up an online store to offer your merchandise. It gives you a chance to arrange your items, modify your customer facing facade, acknowledge Mastercard installments, tracks and react to orders — all with a couple snaps of the mouse (What is Shopify? ). Let's dive into the topic how to merge login/cart/search box with nav links in the header in Shopify.


Step 1: Go to your Shopify admin panel and find out Online Store menu from the left sidebar and then click on Themes menu.

Step 2: After clicking on Themes menu it will open a theme screen, from their go to ...(Triple dots showing at right side) menu click on it and it will display 5 options like below screen. Among them click on "Edit HTML/CSS" option.

Edit HTML/CSS in Shopify

Step 3: Another screen will appear with folder and files. Now click on "Layout" folder and then click on "theme.liquid" file.

ADDITIONAL READING ON KRAZZYCODES

1. ERROR: Cookies are blocked or not supported by your browser
2. How to add sub menu in Shopify?
3. How to show single item into the owl carousel slider?
4. "Sorry, your session has expired. Return to homepage" - WordPress WooCommerce error
5. How to resize google reCaptcha?

Change liquid file in the Shopify

Step 4: Now you can see the file codes. Now find out <nav> tag or class="nav" from file, And cut (CTRL + X) whole code starting from <nav> to </nav> and paste that code between code of right-side label (Check main screenshot there is a label saying "FREE SHIPPING FOR ORDERS OVER $50" that code) from top header and login/cart/search bar code. It's so simple paste code in between where you want navigation that's all.

Step 5: After pasting the code, you need to add some CSS to the header menu. For EX. Top header label width should be 33%, our navigation menu width should be 33% and floating left, the right side login/cart/search bar width should be 33% and floating left.

Step 6: Now press CTRL + S to save code and check you have done.


If you still facing issues, then let me know via comment.
Don't be too selfish please do like, comment or share it.
Thank you for reading this post.