A user working with Shopify’s Turbo theme needs to relocate the search bar, which currently forces the main menu to wrap on narrow browser windows. They want to move it to one of two desktop-only positions:
Centered above the main menu (below the logo)
Into the top bar menu
Additionally, they want to:
Widen the search bar
Change the placeholder text from default to custom text like “What are you looking for?” or “Search by keyword”
Proposed solutions:
One responder provided technical guidance involving editing theme files (header.liquid or top-bar.liquid), repositioning the search bar HTML code, and adjusting CSS width properties. They also explained how to modify the placeholder attribute in the input tag.
Another commenter recommended hiring experienced developers or contacting GemPages Support/the theme provider, noting that repositioning will impact the code and requires careful implementation.
Status: The discussion remains open with technical guidance provided but no confirmed resolution or implementation.
Summarized with AI on November 19.
AI used: claude-sonnet-4-5-20250929.
By default, the search bar for my client’s theme (Turbo) forces the main menu to wrap to a second line on narrow browser windows, especially if I try to center the main menu. This looks messy, especially as I add items to the main menu.
I’d like to move and widen the search bar at either of these locations (on desktop only):
centered above the main menu, just below the logo
or into the top bar menu
Photo attached to show possible new locations for the search bar.
I’d also like to change the words that appear in the search bar so it reads “What are you looking for?” or “Search by keyword”. I’ve found a way to do that on the Search page, but not within the search bar.
Making changes to the location will have an impact on the code, so to make sure that everything is working correctly I recommend hiring someone experienced to make or you can contact the theme provider for assistance.
I hope the above is useful to you.
Best regards,
GemPages Support Team
To move and widen the search bar in your client’s Turbo theme, you can follow these steps:
Centered above the main menu, just below the logo:
Locate the HTML or template file responsible for rendering the header section of your theme. This could be header.liquid or a similar file.
Within that file, find the code that generates the search bar. It might look something like .
Move this code to the desired location above the main menu. You can use HTML and CSS to position it accordingly.
To widen the search bar, adjust the CSS width property of the search bar element. For example, you can set it to width: 300px; to make it wider.
Into the top bar menu:
Locate the HTML or template file responsible for rendering the top bar menu section of your theme. This could be top-bar.liquid or similar.
Find the code that generates the menu items within the top bar.
Insert the code for the search bar into the desired location within the top bar menu code. Again, use HTML and CSS to position it as needed.
Adjust the CSS width property of the search bar element to widen it if desired.
To change the placeholder text inside the search bar to “What are you looking for?” or “Search by keyword,” you can modify the HTML code for the search bar element. Look for the placeholder attribute within the tag and update its value. For example:
Remember to save the modified files and test the changes on your website to ensure they have the desired effect.
