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

Store Design

Topic summary

A user wants to reposition the search, account, and cart icons higher in the Dawn theme header (closer to the announcement bar) and add a “Contact Us” link near the search function.

Proposed Solutions:

  • One suggestion involves adding custom CSS code to the theme.liquid file above the </body> tag to adjust icon positioning
  • Another recommends reducing the logo height, as it’s taking up significant header space
  • A detailed solution suggests editing the header.liquid file to:
    • Locate and rearrange code within the header__toolbar section
    • Add HTML code below the search bar section to insert a “Contact Us” link

Important Notes:

  • Modifications require basic HTML, CSS, and Liquid knowledge
  • Users should create a theme backup before making changes
  • Preview changes before publishing live
  • Contact Shopify Support if issues arise

The discussion includes a screenshot showing the current header layout. Multiple approaches are offered, ranging from simple CSS adjustments to more comprehensive code editing.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
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.