We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Move search bar to announcement bar - Dawn theme 15.1

Move search bar to announcement bar - Dawn theme 15.1

cerom
New Member
5 0 0

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.

 

Search bar.jpg

Replies 3 (3)

AsadSani
Shopify Partner
11 0 0

i will help you

Need a Shopify expert



Contact Me on

Whatsapp

mt686
Shopify Partner
146 12 21

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!

cerom
New Member
5 0 0

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.