Move Search, Account, Cart icons closer to top of header Dawn theme

Store Design
1

Screen Shot 2023-05-29 at 2.41.56 PM.png
Screen Shot 2023-05-29 at 2.41.56 PM.png2104Ă—1332 275 KB

Hi is it possible to move the search, account, cart higher up closer to the announcement bar? And also near search at a link to Contact Us? I am using Dawn theme.

https://stq6d5w0wr74xk6u-73677046074.shopifypreview.com

pw bopewp

Thanks.

2

Hey @shellbell

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

Capture.JPG
Capture.JPG1262Ă—318 16.3 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

You need to reduce height of logo for it as its taking a lot of space in header.

4

To move the search, account, and cart icons closer to the announcement bar in the Dawn theme, and add a “Contact Us” link near the search, you can follow these steps:

  1. Go to your Shopify Admin and click on “Online Store” in the left-hand menu.
  2. Click on “Themes” and then select the “Actions” dropdown menu next to your active Dawn theme. Choose “Edit code” from the list.

To move the search, account, and cart icons:
3. In the code editor, locate the header.liquid file under the “Sections” directory.
4. Find the section of code that contains the header__toolbar class.
5. Look for the following lines of code within that section:

<div class="header__toolbar-item">
{{ render 'search-bar' }}
</div>
<div class="header__toolbar-item">
{{ render 'customer-account' }}
</div>
<div class="header__toolbar-item">
{{ render 'cart-icon' }}
</div>
  1. Rearrange these lines of code within the header__toolbar section to change the order of the search, account, and cart icons as desired.

To add a “Contact Us” link:
7. Still in the header.liquid file, find the <div class="header__search"> section.
8. Inside that section, add the following code below the search bar code:

<div class="header__search-contact">
<a href="/pages/contact-us">Contact Us</a>
</div>
  1. Save the changes by clicking the “Save” button.

After making these modifications, the search, account, and cart icons should be moved closer to the announcement bar, and a “Contact Us” link will be added near the search.

Remember to preview your changes to ensure they appear as intended. If everything looks good, you can publish your changes to make them live on your website.

Please note that modifying the theme code requires basic knowledge of HTML, CSS, and Liquid. Make sure to create a backup of your theme before making any changes, and if you encounter any issues, you can revert to the backup or reach out to Shopify Support for further assistance.