How to make your Shopify search bar look more rounded?

Rate this article

Share this article

The default Shopify search bar is a rectangle. To make it more rounded, you have to change the border-radius attribute of the Shopify search bar. This will make your Shopify search bar more rounded. Along with app filter and search, this also adds to the visual beauty of your store. ExpertRec’s Shopify search bar app is among the very best. It’s a smart search app which provides instant search on your store. Live search shopify app takes less than 5 minutes to add all shopify product search

The search app on shopify is extremely critical as smart search app are the need of the hour. With the capability of Shopify app Voice search, users can easily find their desired product.

 

 

make shopify search more rounded

Here are steps to make your Shopify search more rounded.

  1. Log in to your Shopify admin panel.
  2. Go to online store->settings->themes->actions->edit code.make shopify search more rounded
  3. Go to assets-> Open the theme.scss.liquid file.make shopify search more rounded
  4. In the code file of theme.scss.liquid, search for “search-bar__input” around line 4557.make shopify search more rounded
  5. In the following code change border-radius: 0px; to border-radius: 50px; If you want more roundedness.
    .search-bar__input {
      background-color: transparent;
      border-radius: 50px;
      color: $color-text;
      border-color: transparent;
      padding-right: calc(35em / 16);
      width: 100%;
      min-height: 44px;

     

  6. Using expertrec’s Shopify custom search, you can easily change the look and feel of your search engine without having to touch code.
  7. You can also install expertrec’s Shopify app which lets you make your shopify search bar more rounded from here.Shopify search app

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

Are you showing the right products, to the right shoppers, at the right time? Contact us to know more.
You may also like