change the background color of shopify search bar

How to change the background color of shopify search bar?

Rate this article

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

The default color of the default Shopify search bar is set to transparent. You might want to change the color properties of the Shopify search bar and this tutorial will help in doing the same.

Edit code to change the background color of Shopify search bar

  1. Log in to your Shopify admin panel.
  2. Go to online store->settings->themes->actions->edit code.How to change the background color of shopify search bar?
  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. Change background-color:transparent; to background-color:violet; (you can use any other color you want).
  6. Now the background color of your search bar must have changed to your desired color.

Add Search to your website @ 9 USD per month

Use an App and change the background of the search bar in Shopify

If you are looking for a simple drag and drop color editor for your Shopify search, you can sign up for Expertrec’s Shopify custom search engine from here for as low as 9 USD per month.

This app will let you customize the search bar and search results page from the dashboard.


Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

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.