How can I customize the search icon in Dawn?

[EliskaM]

Hello there, 

I would like to ask you for help with changing search icon from original setting to custom as on the picture.

 

Is there any way to change it please? Thank you very much in advance. 

[StudioEnchant · Accepted solution]

Hello again @EliskaM,

Inside you header.liquid file, replace the code for the search icon with the following code:

<details-modal class="header__search">
  <details>
    <summary class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle" aria-haspopup="dialog" aria-label="Search" role="button">
      <div class="search-field">
        <span>
          <svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false">
            <use href="#icon-search"></use>
          </svg>
          <svg class="modal__toggle-close icon icon-close" aria-hidden="true" focusable="false">
            <use href="#icon-close"></use>
          </svg>
        </span>
        <!-- Add text here -->
        <span class="icon-text">Potřebuji vyhledat</span>
      </div>
    </summary>
    <div class="search-modal modal__content gradient" role="dialog" aria-modal="true" aria-label="Search">
      <div class="modal-overlay"></div>
      <div class="search-modal__content search-modal__content-top" tabindex="-1">
        <predictive-search class="search-modal__form" data-loading-text="Loading...">
          <form action="/search" method="get" role="search" class="search search-modal__form">
            <div class="field">
              <input class="search__input field__input" id="Search-In-Modal-1" type="search" name="q" value="" placeholder="Search" 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" aria-activedescendant="">
              <label class="field__label" for="Search-In-Modal-1">Search</label>
              <input type="hidden" name="options[prefix]" value="last">
              <button type="reset" class="reset__button field__button hidden" aria-label="Clear search term">
                <svg class="icon icon-close" aria-hidden="true" focusable="false">
                  <use xlink:href="#icon-reset"></use>
                </svg>
              </button>
              <button class="search__button field__button" aria-label="Search">
                <svg class="icon icon-search" aria-hidden="true" focusable="false">
                  <use href="#icon-search"></use>
                </svg>
              </button>
            </div>
            <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search="">
              <div class="predictive-search__loading-state">
                <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                  <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                </svg>
              </div>
            </div>
            <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
          </form>
        </predictive-search>
        <button type="button" class="search-modal__close-button modal__close-button link link--text focus-inset" aria-label="Close">
          <svg class="icon icon-close" aria-hidden="true" focusable="false">
            <use href="#icon-close"></use>
          </svg>
        </button>
      </div>
    </div>
  </details>
</details-modal>

And add the following code to the bottom of your base.css file:

.search-field {
  display: inline-flex;
  align-items: center;
  background-color: #f0f0f0; /* Set your desired background color */
  padding: 10px 20px; /* Adjust padding as needed */
  border-radius: 5px; /* Rounded corners */
  border: 1px solid #ccc; /* Add a border */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-field svg {
  margin-right: 10px; /* Adjust the spacing between icon and text */
}

.icon-text {
  font-weight: bold;
  white-space: nowrap;
}

Of course you can edit the parameters so the field will look as you wish.

We are here for any questions, hope we helped!

[StudioEnchant]

Hey @EliskaM,

Please provide store URL

[EliskaM]

Hey there, it's:

https://krasopiska.myshopify.com/

Password: chedow

Just to clarify my request: The point is to display the text all the time, not only when clicked. Also my e-shop is in czech language, so the text should be something like: Potřebuji vyhledat

Thank you very much for your effort and time 🙂

[StudioEnchant · Accepted solution]

Hello again @EliskaM,

Inside you header.liquid file, replace the code for the search icon with the following code:

<details-modal class="header__search">
  <details>
    <summary class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle" aria-haspopup="dialog" aria-label="Search" role="button">
      <div class="search-field">
        <span>
          <svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false">
            <use href="#icon-search"></use>
          </svg>
          <svg class="modal__toggle-close icon icon-close" aria-hidden="true" focusable="false">
            <use href="#icon-close"></use>
          </svg>
        </span>
        <!-- Add text here -->
        <span class="icon-text">Potřebuji vyhledat</span>
      </div>
    </summary>
    <div class="search-modal modal__content gradient" role="dialog" aria-modal="true" aria-label="Search">
      <div class="modal-overlay"></div>
      <div class="search-modal__content search-modal__content-top" tabindex="-1">
        <predictive-search class="search-modal__form" data-loading-text="Loading...">
          <form action="/search" method="get" role="search" class="search search-modal__form">
            <div class="field">
              <input class="search__input field__input" id="Search-In-Modal-1" type="search" name="q" value="" placeholder="Search" 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" aria-activedescendant="">
              <label class="field__label" for="Search-In-Modal-1">Search</label>
              <input type="hidden" name="options[prefix]" value="last">
              <button type="reset" class="reset__button field__button hidden" aria-label="Clear search term">
                <svg class="icon icon-close" aria-hidden="true" focusable="false">
                  <use xlink:href="#icon-reset"></use>
                </svg>
              </button>
              <button class="search__button field__button" aria-label="Search">
                <svg class="icon icon-search" aria-hidden="true" focusable="false">
                  <use href="#icon-search"></use>
                </svg>
              </button>
            </div>
            <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search="">
              <div class="predictive-search__loading-state">
                <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                  <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                </svg>
              </div>
            </div>
            <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
          </form>
        </predictive-search>
        <button type="button" class="search-modal__close-button modal__close-button link link--text focus-inset" aria-label="Close">
          <svg class="icon icon-close" aria-hidden="true" focusable="false">
            <use href="#icon-close"></use>
          </svg>
        </button>
      </div>
    </div>
  </details>
</details-modal>

And add the following code to the bottom of your base.css file:

.search-field {
  display: inline-flex;
  align-items: center;
  background-color: #f0f0f0; /* Set your desired background color */
  padding: 10px 20px; /* Adjust padding as needed */
  border-radius: 5px; /* Rounded corners */
  border: 1px solid #ccc; /* Add a border */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-field svg {
  margin-right: 10px; /* Adjust the spacing between icon and text */
}

.icon-text {
  font-weight: bold;
  white-space: nowrap;
}

Of course you can edit the parameters so the field will look as you wish.

We are here for any questions, hope we helped!

[EliskaM]

Thank you very much!! Really appreciate your effort ❤️ 
Could you please navigate me where exactly put this code? l'm begginer 🙂 

[StudioEnchant]

Of course!

1. From your Shopify admin proceed to Online store > Themes
2. Next to the "Customize" button you will find the three dots button, click it and choose "Edit code"
3. From there, same instructions as my previous response - find the file and add/change the code.

If you have any further questions, don't hesitate to reply. If you managed to apply the changes, please mark our reply as a solution 😉

[EliskaM]

Nice to hear from you 🙂 

Thank you for your help, I just don't know where exactly to put the first code. Like how to exactly do this:
Inside you header.liquid file, replace the code for the search icon with the following code:

[StudioEnchant]

Let us make the changes for you, we have sent a collaborator request.

[StudioEnchant]

Hello again @EliskaM,

We have made the changes, done!

[EliskaM]

Hey there!
I can see it now. I'm very sorry but its very different from my request. Can I customize it to the same design as on my first message? 

[StudioEnchant · Accepted solution]

Yes, at the end of your base.css file, change the values as you wish

[zahin]

hello can you tell me how can I change the search icon, I have the SVG to be placed but I dont know which code to be replaced with