How can I customize the search icon in Dawn?

Solved

How can I customize the search icon in Dawn?

EliskaM
Explorer
79 1 9

Hello there, 

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

 Screenshot 2023-08-20 at 18.16.29.png

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

Accepted Solutions (2)
StudioEnchant
Shopify Partner
245 40 38

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

If we helped you please Like this reply and Mark it as Solution! ❤️

Chat with us on WhatsApp


Click here to enjoy 3 months of Shopify for $1/month on select plans.

View solution in original post

StudioEnchant
Shopify Partner
245 40 38

This is an accepted solution.

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

If we helped you please Like this reply and Mark it as Solution! ❤️

Chat with us on WhatsApp


Click here to enjoy 3 months of Shopify for $1/month on select plans.

View solution in original post

Replies 11 (11)

StudioEnchant
Shopify Partner
245 40 38

Hey @EliskaM,

Please provide store URL

If we helped you please Like this reply and Mark it as Solution! ❤️

Chat with us on WhatsApp


Click here to enjoy 3 months of Shopify for $1/month on select plans.
EliskaM
Explorer
79 1 9

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
Shopify Partner
245 40 38

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

If we helped you please Like this reply and Mark it as Solution! ❤️

Chat with us on WhatsApp


Click here to enjoy 3 months of Shopify for $1/month on select plans.
EliskaM
Explorer
79 1 9

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

StudioEnchant
Shopify Partner
245 40 38

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 😉

 

If we helped you please Like this reply and Mark it as Solution! ❤️

Chat with us on WhatsApp


Click here to enjoy 3 months of Shopify for $1/month on select plans.
EliskaM
Explorer
79 1 9

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
Shopify Partner
245 40 38

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

If we helped you please Like this reply and Mark it as Solution! ❤️

Chat with us on WhatsApp


Click here to enjoy 3 months of Shopify for $1/month on select plans.
StudioEnchant
Shopify Partner
245 40 38

Hello again @EliskaM,

We have made the changes, done!

If we helped you please Like this reply and Mark it as Solution! ❤️

Chat with us on WhatsApp


Click here to enjoy 3 months of Shopify for $1/month on select plans.
EliskaM
Explorer
79 1 9

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
Shopify Partner
245 40 38

This is an accepted solution.

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

If we helped you please Like this reply and Mark it as Solution! ❤️

Chat with us on WhatsApp


Click here to enjoy 3 months of Shopify for $1/month on select plans.
zahin
Shopify Partner
39 1 21

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