Remove search bar in header

Store Design
, , ,
1

hi, i want to remove the search bar in my store. But i want to keep the search icon, and make the search bar appear once it is clicked.

url: https://2wcq4x-ch.myshopify.com/

1 Like
2

Hi @Wellanie
Customized code is necessary to do that so you will need to hire an expert to do that for you.

3

Hi @Wellanie

Sure! You can do that — you just need to hide the search input by default and show it when the search icon is clicked.

Add this to your theme CSS:

.live-search-form input.live-search-form-field {
  display: none;
}

.live-search-form.active input.live-search-form-field {
  display: block;
}

Add this in theme.liquid before </body> or in your theme JS file:

document.addEventListener('DOMContentLoaded', function() {
  const searchBtn = document.querySelector('[data-live-search-submit]');
  const searchForm = document.querySelector('.live-search-form');

  if (searchBtn && searchForm) {
    searchBtn.addEventListener('click', function(e) {
      if (!searchForm.classList.contains('active')) {
        e.preventDefault();
        searchForm.classList.add('active');
        searchForm.querySelector('.live-search-form-field').focus();
      }
    });
  }
});

Best regards,
Devcoder :laptop:

1 Like
4

Hello, @Wellanie

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.live-search-form-field {
  width: 0px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: width 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
  border: none !important;
}

.live-search.search-active .live-search-form-field {
  width: 250px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: 1px solid #ccc !important;
}

.live-search-form .form-field {
  transition: flex-grow 0.4s ease;
}

Click Save. After this step,

Add the JavaScript

While still in the code editor, find the Layout folder and click on the theme.liquid file. Scroll down to the very bottom of the theme.liquid file, right before the closing tag.

Paste the following JavaScript code just above the tag:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const searchIcon = document.querySelector('.live-search-button');
    const searchContainer = document.querySelector('.live-search');
    const searchInput = document.querySelector('.live-search-form-field');
    if (searchIcon && searchContainer && searchInput) {
      searchIcon.addEventListener('click', function(event) {
        const isSearchActive = searchContainer.classList.contains('search-active');
        if (!isSearchActive) {
          event.preventDefault();
          searchContainer.classList.add('search-active');
          searchInput.focus();
        }
      });
      document.addEventListener('click', function(event) {
        if (!searchContainer.contains(event.target)) {
          searchContainer.classList.remove('search-active');
        }
      });
    }
  });
</script>

Click Save, and Check!

If this code works, please mark my comment as the solution!

Thank You!

5

Hi @Wellanie to do that is generally an advanced theme customization to do properly.
Generally merchants should start with a theme that has such features before trying to retrofit.

Exercise caution when being provided AI generated content.
:bomb: ALWAYS backup themes before modifying files, and know the rollback process.
:bomb: And ALWAYS try to utilize a custom-liquid section/block/setting before having to change and possibly break core files from AI generated code.
Modifying core files also prevent easy future upgrades.

Make sure this is what CUSTOMERS want.