Solved

Change Search Icon to Search Bar in Refresh Theme

joshwp
Explorer
61 1 9

Hello. I am trying to figure out a way to change the Search Magnifying Glass icon into a Search Box so that my customers have an easier way to find where to search for products. I have shared an image of what it currently looks like and what I ideally would like it to look like. Any help is much appreciated. UR:: https://woodburnplus.com/

 

Current Search Icon: 

joshwp_0-1713873349134.png

What I would Like it to look like: 

joshwp_1-1713873375414.png

 

 

Accepted Solutions (2)

Dawood_Mirza_
Excursionist
70 12 20

This is an accepted solution.

Hi Joshwp,
I understood what you are looking for, this might be complicated but I have a Solution for this:

Go to "Edit Code" and open "Header.liquid" file 
In that search for the section for Search Modal

Most probably it will be something like {% render 'header-serach', input_id: 'Search-In-Modal' %}

Now replace this line with this code

Code:-

 

      <style>
        :root {
            --inputs-radius: 20px !important;
        }

        .mobile-search {
          display: none;
        }

        .desktop-search {
          display: block;
        }

        @media only screen and (min-width: 769px) {
          predictive-search[open] .predictive-search {
                position: absolute;
                min-width: 768px;
                left: -768px;
                transform: translateX(50%);
          }          
        }

        @media only screen and (max-width: 768px) {
          .mobile-search {
            display: block;
          }

          .desktop-search {
            display: none;
          }
        }
      </style>
      <div class="mobile-search">
        {% render 'header-search', input_id: 'Search-In-Modal' %}
      </div>
      <div class="desktop-search">
              {%- if settings.predictive_search_enabled -%}
          <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
        {%- else -%}
          <search-form class="search-modal__form">
        {%- endif -%}
        <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
          <div class="field">
            <input
              class="search__input field__input"
              id="{{ input_id }}"
              type="search"
              name="q"
              value="{{ search.terms | escape }}"
              placeholder="{{ 'general.search.search' | t }}"
              {%- if settings.predictive_search_enabled -%}
                role="combobox"
                aria-expanded="false"
                aria-owns="predictive-search-results"
                aria-controls="predictive-search-results"
                aria-haspopup="listbox"
                aria-autocomplete="list"
                autocorrect="off"
                autocomplete="off"
                autocapitalize="off"
                spellcheck="false"
              {%- endif -%}
            >
            <label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
            <input type="hidden" name="options[prefix]" value="last">
            <button
              type="reset"
              class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
              aria-label="{{ 'general.search.reset' | t }}"
            >
              <svg class="icon icon-close" aria-hidden="true" focusable="false">
                <use xlink:href="#icon-reset">
              </svg>
            </button>
            <button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
              <svg class="icon icon-search" aria-hidden="true" focusable="false">
                <use href="#icon-search">
              </svg>
            </button>
          </div>

          {%- if settings.predictive_search_enabled -%}
            <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
              {%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
            </div>

            <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
          {%- endif -%}
        </form>
        {%- if settings.predictive_search_enabled -%}
          </predictive-search>
        {%- else -%}
          </search-form>
        {%- endif -%}
      </div>

 


and you are good to go

Dont forgot to like and mark this as Solution if you found it to be helpful,
Thank You

 
 
Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.

View solution in original post

Dawood_Mirza_
Excursionist
70 12 20

This is an accepted solution.

yup,
thats correct

 

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.

View solution in original post

Replies 4 (4)

Dawood_Mirza_
Excursionist
70 12 20

This is an accepted solution.

Hi Joshwp,
I understood what you are looking for, this might be complicated but I have a Solution for this:

Go to "Edit Code" and open "Header.liquid" file 
In that search for the section for Search Modal

Most probably it will be something like {% render 'header-serach', input_id: 'Search-In-Modal' %}

Now replace this line with this code

Code:-

 

      <style>
        :root {
            --inputs-radius: 20px !important;
        }

        .mobile-search {
          display: none;
        }

        .desktop-search {
          display: block;
        }

        @media only screen and (min-width: 769px) {
          predictive-search[open] .predictive-search {
                position: absolute;
                min-width: 768px;
                left: -768px;
                transform: translateX(50%);
          }          
        }

        @media only screen and (max-width: 768px) {
          .mobile-search {
            display: block;
          }

          .desktop-search {
            display: none;
          }
        }
      </style>
      <div class="mobile-search">
        {% render 'header-search', input_id: 'Search-In-Modal' %}
      </div>
      <div class="desktop-search">
              {%- if settings.predictive_search_enabled -%}
          <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
        {%- else -%}
          <search-form class="search-modal__form">
        {%- endif -%}
        <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
          <div class="field">
            <input
              class="search__input field__input"
              id="{{ input_id }}"
              type="search"
              name="q"
              value="{{ search.terms | escape }}"
              placeholder="{{ 'general.search.search' | t }}"
              {%- if settings.predictive_search_enabled -%}
                role="combobox"
                aria-expanded="false"
                aria-owns="predictive-search-results"
                aria-controls="predictive-search-results"
                aria-haspopup="listbox"
                aria-autocomplete="list"
                autocorrect="off"
                autocomplete="off"
                autocapitalize="off"
                spellcheck="false"
              {%- endif -%}
            >
            <label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
            <input type="hidden" name="options[prefix]" value="last">
            <button
              type="reset"
              class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
              aria-label="{{ 'general.search.reset' | t }}"
            >
              <svg class="icon icon-close" aria-hidden="true" focusable="false">
                <use xlink:href="#icon-reset">
              </svg>
            </button>
            <button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
              <svg class="icon icon-search" aria-hidden="true" focusable="false">
                <use href="#icon-search">
              </svg>
            </button>
          </div>

          {%- if settings.predictive_search_enabled -%}
            <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
              {%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
            </div>

            <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
          {%- endif -%}
        </form>
        {%- if settings.predictive_search_enabled -%}
          </predictive-search>
        {%- else -%}
          </search-form>
        {%- endif -%}
      </div>

 


and you are good to go

Dont forgot to like and mark this as Solution if you found it to be helpful,
Thank You

 
 
Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
joshwp
Explorer
61 1 9

@Dawood_Mirza_ This worked great. However, I still have the Search Icon displayed on the left. Do you know how I could remove this? I really appreciate your quick help on this.

joshwp_1-1713875261252.png

 

 

joshwp
Explorer
61 1 9

I may have figured it out. I remove this following and the icon was removed. Do this sound correct to you @Dawood_Mirza_ ?

joshwp_2-1713875457128.png

 

Dawood_Mirza_
Excursionist
70 12 20

This is an accepted solution.

yup,
thats correct

 

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.