How can I change my search icon to a full bar without affecting product pages?

Shopify Discussion

Topic summary

Goal: turn the header’s search icon into a full, always‑visible search bar without breaking product pages.

  • Initial change achieved the bar but made product pages load blank.

  • A helper requested the store URL and header.liquid (theme header template), then provided a complete replacement of header.liquid containing StickyHeader JavaScript and section schema.

  • After applying the new header.liquid, the site worked and the search bar displayed correctly; another participant confirmed the same fix worked for them.

  • Follow‑ups: one request to center the search bar was redirected to a new thread (no in‑thread solution). Another user seeking the same visible bar shared their header-search snippet and a reference image; no resolution provided yet.

  • Artifacts central to understanding: multiple code snippets (header.liquid and header-search) and a screenshot.

  • Status: original issue resolved for the initial requester; additional customization questions (centering, implementing on another store) remain open.

Summarized with AI on January 5. AI used: gpt-5.
16

Hi! May you also help me on my page, I also wanted it to show this way, not just a magnifying glass, but a full search bar that is visible just like the one below. I don’t know where to start, but I do have the header search liquid code.

butcherssecrets_0-1707639765844.png
butcherssecrets_0-1707639765844.png965×109 3.86 KB

{% comment %}
Renders a header search modal. Should be used with ‘header.liquid’

Accepts:

  • input_id: {String} Id for the search input element (required)

Usage:
{% render ‘header-search’, input_id: ‘My-Id’%}
{% endcomment %}

{%- if settings.predictive_search_enabled -%} {%- else -%} {%- endif -%}
{{ 'general.search.search' | t }}

{%- if settings.predictive_search_enabled -%}


{%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- else -%} {%- endif -%}