reduce shopify search bar width

How to reduce the width of shopify search bar

Rate this article

Share this article
Share on facebook
Share on twitter
Share on linkedin
Share on email

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

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published.

You may also like
Hold on!
We’ve gathered our industry knowledge and are sharing hacks, tips to increase e-commerce revenue. Contains best tips for scaling up your ecommerce business.