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 fairly easy but if you are facing 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 is it add the Voice search feature to your Shopify search box. Ajax search is light and does add load to Shopify site search box.

 

The default Shopify search bar looks like this.reduce shopify search bar width

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.reduce shopify search bar width
  4. In the code file of theme.scss.liquid, search for “search-bar__input” around line 4557.reduce shopify search bar width
  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. reduce shopify search bar width

Add a search engine to your website at 9 USD per month

Muthali loves writing about emerging technologies and easy solutions for complex tech issues. You can reach out to him through chat or by raising a support ticket on the left hand side of the page.

You may also like