I just uploaded the new Dawn 10.0 version and my code to have the search icon on the right is no longer working. Right now my search icon is showing up on the left margin of the header. But I would like it to be on the right, alongside the account and cart icons. Can someone please help me.
Topic summary
Issue: After updating to the Shopify Dawn 10.0 theme, the search icon appeared on the left side of the header; the goal was to place it on the right alongside the account and cart icons.
Fix provided: A helper shared steps to edit theme code (Online Store > Themes > Edit code) and add custom CSS in base.css to reposition the search component to the header’s right icon area and align it on the top row with a small left margin. The CSS targets the header search element and uses grid placement.
Outcome: The original poster confirmed the CSS fix worked. An image was shared showing the successful result (attachments central to understanding the placement).
Follow-up request: Another user, for prettyprettyplease.fr (password provided), asked to:
- Place the search icon before the account icon.
- Move the localization (country) selector to the far right (where the search icon used to be). An image illustrating the desired layout was provided.
Status: The initial issue is resolved. The follow-up (reordering icons and relocating the localization selector) is pending; the helper requested clarification and got a visual, but no final CSS or steps have been provided yet.
Notes: Dawn is Shopify’s default theme; CSS is the styling code used to control layout.
1 Like
Hi @rivahviewhome ,
Would you mind to share your URL website and with password if its protected? Thanks!
Yes. It’s www.rivahviewhome.com
PW; rivahviewhome
1 Like
Hi @rivahviewhome ,
Thank you for the information. Try this.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
- And Save.
.header>.header__search {
grid-area: right-icons;
}
details-modal.header__search:nth-child(2) {
grid-row: 1;
margin-left: 5px;
}
Result:
I hope it help.
2 Likes
It worked. Thank you so much!
Your welcome, 
Hello,
i have used your code it worked, thank you so much. Is it possible to put the search icon before the account icon ?
1 Like
I will try would you mind to share your URL website? with password if its protected. Thanks!
Hi,
The url is :https://prettyprettyplease.fr
Password:Naomi
and do you have a code to move the localization selector to the right where the search icon was before ?
1 Like
Thank you for the information. Do you mean move to the far right the local selector? exhange to the search Icon area? Im sorry I cant remember where the search icon located before. 
