Open search bar instead of icon in the header of dawn

Solved

Open search bar instead of icon in the header of dawn

AmetaComputer
New Member
5 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
2138 615 493

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@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 14 (14)

ThePrimeWeb
Shopify Partner
2138 615 493

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@theprimeweb.com or check out the website
Check out our interview with Shopify!
AmetaComputer
New Member
5 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
2138 615 493

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@theprimeweb.com or check out the website
Check out our interview with Shopify!
AmetaComputer
New Member
5 0 0

Thank you so much!!!

 

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

eliamal
Shopify Partner
9 0 1

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
Shopify Partner
2138 615 493

Hey @eliamal,

 

Please share the link to your store, thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
eliamal
Shopify Partner
9 0 1
ThePrimeWeb
Shopify Partner
2138 615 493

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.

ThePrimeWeb_0-1714912893212.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
eliamal
Shopify Partner
9 0 1

I can't get it to work. Did I do  anything wrong?Skärmavbild 2024-05-05 kl. 15.13.28.pngSkärmavbild 2024-05-05 kl. 15.14.17.png

ThePrimeWeb
Shopify Partner
2138 615 493

Hey @eliamal,

 

No. Could you add !important tag for these two

 

ThePrimeWeb_0-1714915039333.png

 

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>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
eliamal
Shopify Partner
9 0 1

That worked! Do you think it's also possible to get the search results aligned under the box? It looks a bit misplaced now 🙂Skärmavbild 2024-05-05 kl. 15.22.06.png

ThePrimeWeb
Shopify Partner
2138 615 493

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

 

and translateX(50%) to 0%

ThePrimeWeb_0-1714915612227.png

 

It should look like

 

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

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
KateD199
Tourist
11 0 0

you're a legend, thank you!

KateD199
Tourist
11 0 0

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:

KateD199_0-1716438021875.png

 

Thank you!