Horizon Theme: Search Bar instead of Search Icon

Sero1 · May 29, 2025, 4:48pm

Is there a way to show the search bar instead of the search icon in the new Horizon Theme (Dwell) ?

Would be great if someone could tell me which part of the source code i have to replace with which source code.

Thanks a lot !

suyash1 · May 29, 2025, 4:53pm

@Sero1 you will need to find search bar code in header file and use it at the place you want, you will need to take care of desktop/mobile views though

Sero1 · May 29, 2025, 5:08pm

So there is a search bar in a seerate page that could be use, right ?

inside _search-input.liquid


{% stylesheet %}
  .search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (width < 750px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgba(from var(--color-input-text) r g b / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

    @media screen and (width < 750px) {
      max-width: 100%;
    }
  }

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (width < 750px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (width < 750px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
{% endstylesheet %}

{% if block.settings.inherit_color_scheme == false %}
  {% assign color_scheme = block.settings.color_scheme | prepend: ' color-' %}
{% endif %}

{% schema %}
{
  "name": "t:names.search_input",
  "tag": null,
  "settings": [
    {
      "type": "select",
      "id": "width",
      "label": "t:settings.width",
      "options": [
        {
          "value": "fill",
          "label": "t:options.fill"
        },
        {
          "value": "custom",
          "label": "t:options.custom"
        }
      ],
      "default": "custom"
    },
    {
      "type": "range",
      "id": "custom_width",
      "label": "t:settings.custom_width",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "default": 50,
      "visible_if": "{{ block.settings.width == \"custom\" }}"
    },
    {
      "type": "checkbox",
      "id": "inherit_color_scheme",
      "label": "t:settings.inherit_color_scheme",
      "default": true
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:settings.color_scheme",
      "default": "scheme-1",
      "visible_if": "{{ block.settings.inherit_color_scheme == false }}"
    }
  ],
  "presets": []
}
{% endschema %}

Ela_V_TSM · February 10, 2026, 4:24am

The code on this link seemed to work for me. Just had to tweak it a little since another search bar also appears on the left side of the navigation bar. You can find the code I edited below.

{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}


{% unless style == 'none' %}
  <search-button class="search-action onhow-search-wrapper{% if class != blank %} {{ class | strip }}{% endif %}">
    
    <!-- Desktop Search Bar -->
    <form action="{{ routes.search_url }}" method="get" role="search" class="onhow-search-bar">
      <div class="onhow-search-bar__container">
        <span class="onhow-search-bar__icon svg-wrapper" aria-hidden="true">
          {{ 'icon-search.svg' | inline_asset_content }}
        </span>
        <input
          type="search"
          name="q"
          class="onhow-search-bar__input"
          placeholder="{{ 'content.search_input_placeholder' | t }}"
          value="{{ search.terms | escape }}"
          autocomplete="off"
        >
        <input type="hidden" name="type" value="product">
        <button type="submit" class="onhow-search-bar__submit visually-hidden">
          {{ 'accessibility.search' | t }}
        </button>
      </div>
    </form>
    
    <button
      on:click="#search-modal/showDialog"
      class="button button-unstyled search-modal__button header-actions__action onhow-mobile-search-icon"
      name="Search"
    >
      <span aria-hidden="true" class="svg-wrapper">
        {{ 'icon-search.svg' | inline_asset_content }}
      </span>
      <span class="visually-hidden">
        {{ 'accessibility.open_search_modal' | t }}
      </span>
    </button>
    
  </search-button>
{% endunless %}

{% stylesheet %}
  .search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);
    display: flex;
  }
  
  .header__column--center .search-action {
    width: auto;
    flex-grow: 1;
  }
  
  :is(.header__column--left, .header__column--center) .search-action {
    @media screen and (width >= 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
      display: none;
    }
  }
  
  .header__column--right .search-action {
    @media screen and (width >= 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }
  .onhow-search-wrapper {
    position: relative;
    width: 100%;
  }

  .onhow-search-bar {
    display: none;
    width: 100%;
    max-width: 250px;
  }

  .onhow-search-bar__container {
    position: relative;
    display: flex;
    align-items: center;
    background-color: rgba(from var(--color-input-background) r g b / 0.38);
    border: var(--search-border-width) solid rgba(from var(--color-input-border) r g b / 0.26);
    border-radius: var(--search-border-radius);
    transition: all 0.3s ease;
  }

  .onhow-search-bar__container:focus-within {
    background-color: var(--color-input-background);
    border-color: var(--color-foreground);
  }

  .onhow-search-bar__icon {
    position: absolute;
    left: calc(var(--padding-md) * 0.8);
    z-index: 1;
    color: var(--color-input-text);
    opacity: 0.6;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    pointer-events: none;
  }

  .onhow-search-bar__input {
    width: 100%;
    background: transparent;
    border: none;
    padding: calc(var(--padding-md) * 0.8) calc(var(--padding-md) * 0.8) calc(var(--padding-md) * 0.8) calc(var(--icon-size-md) + var(--padding-lg));
    font-family: var(--font-body-family);
    font-size: var(--font-size-sm);
    color: var(--color-input-text);
    outline: none;
  }

  .onhow-search-bar__input::placeholder {
    color: rgba(from var(--color-input-text) r g b / 0.6);
  }

  .onhow-mobile-search-icon {
    display: flex;
  }

  @media screen and (min-width: 750px) {
    .onhow-search-bar {
      display: block;
    }
    
    .onhow-mobile-search-icon {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    .onhow-search-bar {
      display: none !important;
    }
    
    .onhow-mobile-search-icon {
      display: flex;
    }
  }

  .header__column--center .onhow-search-wrapper {
    justify-content: center;
  }

  .header__column--right .onhow-search-wrapper {
    justify-content: flex-end;
  }

  .header__column--right .onhow-search-bar {
    margin-left: auto;
  }
{% endstylesheet %}

fabiomalaspina · July 6, 2026, 5:56pm

Yes, but it doesn’t seem to search pages.

SectionKit · July 17, 2026, 3:26pm

Hey @Sero1 .

Check the Customize Online Store Themes section first. Some Horizon presets like Dwell may have an option to show the search bar instead of just the icon.
If not, you will need to modify the header file to replace the click to expand icon with a permanently visible search input. Note that Horizon’s file structure is different from Dawn’s, so the file or class names may vary, which makes it difficult to identify the exact location without the theme code

RachidBo · August 10, 2026, 9:51am

Hi Ela_V_TSM

New Horizon 4.1.3 install (without any changes) looks like this:

With 2 problems in the editor:

‘accessibility.search’ does not have a matching entry in ‘locales/en.default.json’

‘accessibility.open_search_modal’ does not have a matching entry in ‘locales/en.default.json’

Custom-Cursor · August 10, 2026, 2:38pm

Hey, @Sero1
Hope you are doing great!
Yes, it’s possible with the Horizon theme, but I wouldn’t recommend replacing the search icon directly in the source code. The exact change depends on how Dwell’s header/search component is structured. If you share the relevant header/search Liquid code, I can point out exactly what to replace and give you the CSS needed to keep the full search bar visible on desktop.

RachidBo · August 11, 2026, 11:30am

Now it works. Here are a few modifications for Horizon Theme V4.1.4.

Open snippets/search.liquid and insert code:

{%- doc -%}
  Renders the search action button.

  @param {string} [style] - The style of the search action.
  @param {string} [class] - Additional classes for the search action.
  @param {string} [display_style] - The display style ('icon' or 'text').

  @example
  {% render 'search', style: 'default', class: 'custom-class', display_style: 'icon' %}
{%- enddoc -%}

{% comment %}
<!-- New Mod from V4.1.4 - Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}

{% unless style == 'none' %}
  <search-button class="search-action onhow-search-wrapper{% if class != blank %} {{ class | strip }}{% endif %}">
    
    <!-- Desktop Search Bar -->
    <form action="{{ routes.search_url }}" method="get" role="search" class="onhow-search-bar">
      <div class="onhow-search-bar__container">
        <span class="onhow-search-bar__icon svg-wrapper" aria-hidden="true">
          {{ 'icon-search.svg' | inline_asset_content }}
        </span>
        <input
          type="search"
          name="q"
          class="onhow-search-bar__input"
          placeholder="{{ 'content.search_input_placeholder' | t }}"
          value="{{ search.terms | escape }}"
          autocomplete="off"
        >
        <input type="hidden" name="type" value="product">
        <button type="submit" class="onhow-search-bar__submit visually-hidden">
          {{ 'accessibility.search' | t }}
        </button>
      </div>
    </form>
    
    <button
      on:click="#search-modal/showDialog"
      class="button button-unstyled search-modal__button header-actions__action onhow-mobile-search-icon"
      name="Search"
    >
      <span aria-hidden="true" class="svg-wrapper">
        {{ 'icon-search.svg' | inline_asset_content }}
      </span>
      <span class="visually-hidden">
        {{ 'accessibility.open_search_modal' | t }}
      </span>
    </button>
    
  </search-button>
{% endunless %}

{% stylesheet %}
  .search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);
    display: flex;
  }
  
  .header__column--center .search-action {
    width: auto;
    flex-grow: 1;
  }
  
  :is(.header__column--left, .header__column--center) .search-action {
    @media screen and (width >= 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }
  
  .header__column--right .search-action {
    @media screen and (width >= 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }
  .onhow-search-wrapper {
    position: relative;
    width: 100%;
  }

  .onhow-search-bar {
    display: none;
    width: 100%;
    max-width: 250px;
  }

  .onhow-search-bar__container {
    position: relative;
    display: flex;
    align-items: center;
    background-color: rgba(from var(--color-input-background) r g b / 0.38);
    border: var(--search-border-width) solid rgba(from var(--color-input-border) r g b / 0.26);
    border-radius: var(--search-border-radius);
    transition: all 0.3s ease;
  }

  .onhow-search-bar__container:focus-within {
    background-color: var(--color-input-background);
    border-color: var(--color-foreground);
  }

  .onhow-search-bar__icon {
    position: absolute;
    left: calc(var(--padding-md) * 0.8);
    z-index: 1;
    color: var(--color-input-text);
    opacity: 0.6;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    pointer-events: none;
  }

  .onhow-search-bar__input {
    width: 100%;
    background: transparent;
    border: none;
    padding: calc(var(--padding-md) * 0.8) calc(var(--padding-md) * 0.8) calc(var(--padding-md) * 0.8) calc(var(--icon-size-md) + var(--padding-lg));
    font-family: var(--font-body-family);
    font-size: var(--font-size-sm);
    color: var(--color-input-text);
    outline: none;
  }

  .onhow-search-bar__input::placeholder {
    color: rgba(from var(--color-input-text) r g b / 0.6);
  }

  .onhow-mobile-search-icon {
    display: flex;
  }

  @media screen and (min-width: 750px) {
    .onhow-search-bar {
      display: block;
    }
    
    .onhow-mobile-search-icon {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    .onhow-search-bar {
      display: none !important;
    }
    
    .onhow-mobile-search-icon {
      display: flex;
    }
  }

  .header__column--center .onhow-search-wrapper {
    justify-content: center;
  }

  .header__column--right .onhow-search-wrapper {
    justify-content: flex-end;
  }

  .header__column--right .onhow-search-bar {
    margin-left: auto;
  }

  .search-action--hidden-on-menu {
  display: none !important;
}

@media screen and (max-width: 749px) {
  .search-action--hidden-on-menu {
    display: flex !important;
  }
}

{% endstylesheet %}

Open locales/en.default.json and insert code in { "accessibility…

"open_search_modal": "Open search",
    "search": "Search",

ONLY FOR GERMAN! CHANGE THIS TOO:

Open locales/de.json and insert code in { "accessibility…

"open_search_modal": "Suche öffnen",
    "search": "Suchen",

Now it looks like this:

Screenshot 2026-08-11 132913

Topic		Replies	Views
Search bar instead of search icon (horizon theme) Store Design design	17	352	April 9, 2026
Create search bar instead of icon Store Design design , customizations , css , shopify-themes , shopify-theme	2	161	February 26, 2026
Horizon theme remove ”search” and ”my page”- icon in bar Store Design design , customizations , css , shopify-themes , shopify-theme	8	243	October 3, 2025
Change the search icon to search bar - Dawn Theme Store Design design , header	6	148	September 27, 2024
Remove search bar in header Store Design design , customizations , css , shopify-theme	4	118	November 11, 2025

Horizon Theme: Search Bar instead of Search Icon

Related topics