How can I reposition and modify the search bar in a Turbo theme?

Shopify Discussion
1

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.

This shop uses Turbo theme. https://lovegeorgiewedding.com

Screen Shot 2023-03-15 at 9.56.57 AM.png
Screen Shot 2023-03-15 at 9.56.57 AM.png2478×520 153 KB

2

Hello @elbee

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

3

To move and widen the search bar in your client’s Turbo theme, you can follow these steps:

  1. 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.

  2. 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.

I will work the same on my website. Website link is https://kleap.co/building-a-church-website/

1 Like