How to Fix Search Bar on Publisher Theme

Shopify Discussion

Topic summary

A user is experiencing a display issue in the Shopify Publisher theme where the word “SUGGESTIONS” in the search bar breaks incorrectly into “SUGGEST” and “IONS” across multiple lines.

Likely Cause:
The problem appears to stem from CSS styling issues—possibly oversized heading elements (h2) or incorrect flex/grid settings causing unexpected text wrapping in the search predictive dropdown.

Proposed Solution:

  • Inspect the .predictive-search__section-header element using browser dev tools
  • Add white-space: nowrap; to prevent line breaks
  • Reduce font size if needed (e.g., from 3rem to 1.2rem)
  • Optionally adjust flex container settings with appropriate gap values
  • Alternative: Edit the theme’s predictive-search.liquid file to use shorter text like “Suggested”

Status: The discussion remains open with one detailed troubleshooting response provided, but no confirmation yet whether the solution resolved the issue. Two other users requested the store URL to investigate further.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

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" ?

Trish68_0-1746146788760.png
Trish68_0-1746146788760.png1099Ă—439 41.6 KB

1 Like
2

Hi @Trish68

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

3

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…

4

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:


  SUGGESTIONS

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 :blush:

1 Like