How to reduce the width of shopify search bar

The default Shopify search bar takes the complete width of the page. If you want to reduce this, you have to edit the CSS properties inside the theme.scss.liquid file.

If you don’t have a search bar here is how you can get one.  

Customizing a search bar is pretty easy but if you face any issues we’ve got you covered. Be it a partial search or a full store search is always the best live search s as it adds the Voice search feature to your Shopify search box. Ajax search is light and does add load to the Shopify site search box.

The default Shopify search bar looks like this.

Here are detailed steps-

1. Log in to your Shopify admin panel.
2. Go to online store->settings->themes->actions->edit code.
3. Go to assets-> Open the theme.scss.liquid file.
4. In the code file of theme.scss.liquid, search for “search-bar__input” around line 4557.
5. In the code, change width:100% to width:50% or any number as per your requirement.

   .search-bar__input {
     background-color: transparent;
     border-radius: 50px;
     color: $color-text;
     border-color: transparent;
     padding-right: calc(35em / 16);
     width: 50%;
     min-height: 44px;

    

6. Click on save and refresh your Shopify website to see the new changes. 

Add great search to your Shopify store