Solved

Open search bar instead of icon in the header of dawn

AmetaComputer
Visitor
3 0 0

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

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1062 275 215

This is an 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"

ThePrimeWeb_0-1706625603481.png

 

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

ThePrimeWeb_1-1706625613559.png

 

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

ThePrimeWeb_2-1706625643829.png

 

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.

ThePrimeWeb_3-1706625824464.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here

View solution in original post

Replies 4 (4)

ThePrimeWeb
Shopify Partner
1062 275 215

Hey @AmetaComputer,

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

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
AmetaComputer
Visitor
3 0 0

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
Shopify Partner
1062 275 215

This is an 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"

ThePrimeWeb_0-1706625603481.png

 

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

ThePrimeWeb_1-1706625613559.png

 

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

ThePrimeWeb_2-1706625643829.png

 

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.

ThePrimeWeb_3-1706625824464.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
AmetaComputer
Visitor
3 0 0

Thank you so much!!!

 

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