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. 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.
     
  6. Click on save and refresh your Shopify website to see the new changes. reduce shopify search bar width

muthali ganesh

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.