Open search bar instead of icon in the header of dawn

[AmetaComputer]

Hey,

does anybody know how to get an open search bare instead of an icon in the Dawn theme? But still has the dropdown effect with products coming up when you have finished the title you are looking for. So should still work as normally but just with the bar instead of an icon.

Best regards,

Oliver

[ThePrimeWeb]

Hey @AmetaComputer,

Can you share the store link and password (if any) ?

[AmetaComputer]

Hey,

Thanks a lot for your reply,

The URL is: https://6b0cd1-3.myshopify.com/

And the Code is: Ameta1234

Also is it possible to make the corners curved? :))

[ThePrimeWeb · Accepted solution]

Hey @AmetaComputer,

That nearly exhausted me! It's gonna be a little tricky so be very careful here alright 😊

1. In your theme go to "Edit Code"

2. In the search bar type "header.liquid" and click on the file "header.liquid" in the "Sections" folder. 

3. Around line 296, look for the following line that says {% render 'header-serach', input_id: 'Search-In-Modal' %}

4. Now here's the tricky part. Replace it with the following. Be very careful not to touch anything else, and then hit "Save"!

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

You should see the changes now.

[AmetaComputer]

Thank you so much!!!

Is it possible to hire you for creating a product template for us? haha,

[eliamal]

Hi! I just tried this solutions. Still works great! How would I do to expand the search bar full widht? I've set the menu as a drawer followed by the logo and then to the right search, account and cart - and would like the search bar to extend all the way to the logo.

[ThePrimeWeb]

Hey @eliamal,

Please share the link to your store, thanks!

[eliamal]

https://www.hjartgruppenshop.se/

[ThePrimeWeb]

Hey @eliamal,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 990px) {
    .header--top-left.drawer-menu, .header--middle-left.drawer-menu {
        grid-template-columns: auto auto 1fr;
    }
    
    .desktop-search,
    .header__icons {
        width: 100%;
    }
    
    .search-modal__form {
        max-width: unset !important;
    }
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

[eliamal]

I can't get it to work. Did I do  anything wrong?

[ThePrimeWeb]

Hey @eliamal,

No. Could you add !important tag for these two

The final code should look like this, you can also remove the previous and replace with this.

<style>
@media only screen and (min-width: 990px) {
    .header--top-left.drawer-menu, .header--middle-left.drawer-menu {
        grid-template-columns: auto auto 1fr !important;
    }
    
    .desktop-search,
    .header__icons {
        width: 100% !important;
    }
    
    .search-modal__form {
        max-width: unset !important;
    }
}
</style>

[eliamal]

That worked! Do you think it's also possible to get the search results aligned under the box? It looks a bit misplaced now 🙂

[ThePrimeWeb]

In the very first code, change left: to 'unset'

and translateX(50%) to 0%

It should look like

left: unset;
transform: translateX(0%);

[KateD199]

you're a legend, thank you!

[KateD199]

Hi, this is great and worked for our store! How do I change the background of the search box? not the dropdown menu that comes up with searching, just the actual search. To look like this, instead of white:

Thank you!

[liquordept]

my search bar is on the left side can you send me a code to make it work please and thank u.