How to Fix Search Bar on Publisher Theme

[Trish68]

Hi. How can I fix the Search Bar on Publisher Theme. The following shows up on every search. How do I remove the"suggest products-IONS" ?

[BiDeal-Discount]

Hi @Trish68 

Can you share your store url & password (if applicable) then I will check and give you the solution

[tim]

I'd say that most probably you've made some changes to make your h2 elements bigger in size and this affects these headings.

Need to see you store to confirm...

[goldi07 · Accepted solution]

Hello @Trish68  the issue you're seeing where "SUGGESTIONS" is broken into "SUGGEST" and "IONS" in the Shopify Publisher theme is typically due to incorrect flex or grid settings, or the text wrapping unexpectedly inside the search predictive dropdown.

How to Fix the "SUGGESTIONS" Text Breaking in Publisher Theme
Step 1: Inspect the Element
Use the browser's Inspect tool (Right-click > Inspect) to locate the container that's rendering the word "SUGGESTIONS".

You're likely to find something like this in the Liquid or CSS:

<div class="predictive-search__section-header">
  SUGGESTIONS
</div>

Step 2: Check CSS
Look in the theme CSS file (likely base.css or component-predictive-search.css) for this class:
.predictive-search__section-header

You’ll probably see styling like this:

.predictive-search__section-header {
  font-size: 3rem; /* or similar */
  display: block;
}

Step 3: Fix the Styling
You want to:

. Prevent line breaks

. Shrink font size if necessary

. Consider using white-space: nowrap;

Updated CSS:

.predictive-search__section-header {
  white-space: nowrap;
  font-size: 1.2rem; /* adjust as needed */
  line-height: 1.2;
  font-weight: bold;
}

If white-space: nowrap; doesn't work alone, wrap the header in a flex container and ensure it doesn't overflow:

.predictive-search__section-header-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 2rem; /* or smaller */
}

Step 4: Optional – Change the Wording
If needed, you can also edit the actual wording in your theme files:

. Go to Online Store > Themes > Actions > Edit code

. Search for predictive-search.liquid or look inside snippets/ or sections/

. Replace "Suggestions" with "Suggested" or something shorter.

if you need more help plz let me know 

Thank you 😊