Move Search icon to right hand side - Dawn theme

[Kisses1]

Can someone please assist with moving the search icon of my website to the right hand side next to the other icons - Account and cart.

I’m using Dawn Theme.

[LizHoang]

Hi @Kisses1 ,

Thank you for your question! I would like to share with you the steps below that you can try to apply to move the search icon to the right-hand side of the header (next to the account and cart icons) in the Dawn theme:

1. Access the Theme Code- Log in to your Shopify admin.

• Go to Online Store > Themes.
• In the Dawn theme, click Actions > Edit code.

2. Edit the Header Liquid File- In the left sidebar, find and open the header.liquid file (or header-group.liquid if it exists).

• Look for the section where the search icon HTML is located. It may look like this:

• Move this section so it appears after the account and cart icons.

3. Update the CSS- Open the base.css file (or theme.css if you’re using an older version).

• Look for any styles related to .header__icon or .header__search. You may need to adjust the styling to align the search icon properly with the other icons. For example:
  .header__icon {
  display: inline-block;
  margin-left: 10px;
  }

• Ensure that the search, account, and cart icons are all part of the same flex container for proper alignment. The container may look like this in the liquid file:

4. Save and Preview- Save your changes.

• Preview the website to check if the search icon has moved to the right side.

I hope my answer is helpful!

Best,
Liz.

[Kisses1]

Hi Liz,

Thank you for your reply.

I can’t see one that says DIV like you’ve shown, I can see the following throughout though;

if section.settings.logo_position == ‘top-center’ or section.settings.menu == blank
render ‘header-search’, input_id: ‘Search-In-Modal-1’
endif
-%}

{% render ‘header-search’, input_id: ‘Search-In-Modal’ %}

this.predictiveSearch = this.querySelector(‘predictive-search’);

Are you able to assist further?

[LizHoang]

Hi @Kisses1 ,

I will be grateful if you can share with me your store URL along with its protection password (if it had one). Then I will check and try my best to assist you further!

Best,
Liz.

[Kisses1]

Hi Liz,

Thank you my url is below, there’s no protection password on it

devinesaustralia.com.au

[LizHoang]

Hi @Kisses1 ,

I am sorry for my late response!

The issue wasn’t as complicated as I expected in the first comment. You can just simply paste the following code to your theme’s custom CSS, that should help you solve the problem:

@media screen and (min-width: 990px) {
.header–top-center *>.header__search {
display: inline !important;
}
}
@media screen and (min-width: 990px) {
.header–top-center>.header__search {
display: none !important;
}
}

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Best,
Liz.

[Kisses1]

Hi Liz,

Thank you for your reply.

Can you please advise where to paste this?

[LizHoang]

Hi @Kisses1 ,

Please go to your Theme editor > Theme setting on the left panel > Scroll down to find Theme CSS > Open and patse the code above into it and Save!

I look forward to hearing the result from you,
Liz.

[holzwerk-uhren]

Well, it helped me a lot! Thank you!