Move search bar to announcement bar - Dawn theme 15.1

Hi guys,

I am looking to change the location of the search bar in our website. It’s actually in the header on the left, and I would like to change it as the full search bar, placein the center of the announcement bar (find picture in attachment).

Our website is https://jetxcel.fr/ and the password is Lavoir

Thanks for your help,

Regards,

Romain.

i will help you

Hey Romain. Couple ways to do it, and depends on your specific theme,


Option 1: Do It Manually (Mess with the code)

  1. Backup Your Theme: Before you start, make a duplicate of your theme to avoid issues.
  2. Edit the Announcement Bar Code:
    • Go to your Shopify Admin > Online Store > Themes > Actions > Edit Code.
    • Open sections/announcement-bar.liquid.
    • Add the following code where you want the search bar to appear:
{% render 'header-search' %}
  • You may need to style it using CSS. Open assets/base.css (or similar) and add:

    css

.announcement-bar .search-bar { display: block; width: 100%; margin: auto; text-align: center; }
  • Test and Adjust: Preview the changes and tweak the styling as needed.
    (That is the general idea, you’ll have to change it a bit more than likely.)

Option 2: Use EasyEdits for Custom Placement
If coding feels tricky, EasyEdits can help you move elements like the search bar without diving into code. You’d just drag and drop the search bar where you want it. Plus, you can adjust spacing, alignment, and even test variations quickly.

Disclaimer: I am the developer behind EasyEdits. You can also make edits with the app during the free trail, delete the app, and keep the edits without paying anything.


Let me know how it works out and what you go with!

Hello, Easy Edit could be the solution I was looking for, but I don’t arrive to make it work.

First, I can’t go next at the password page, so I can’t do anything.
Second, same in the password page, when I publish the edits, it don’t make changes on our website.

Regards,

Romain.