How to display a fixed, open search bar on Shopify Dawn theme

Shopify Search Bar in Dawn theme

There are a few ways to always show an open search bar on Shopify’s Dawn theme.

The main thing to consider is that, by modifying the structure of the search bar following some of the tutorials found online, you will unfortunately lose the “Predictive Search” feature which is a nice thing to have unless you are using a third-party application to boost your website search engine.

If you would like your website to have an advanced search option, which features like customizable dropdown, rule-based merchandising, search redirects, analytics and more, we recommend trying this search and filter app for Shopify by Boostcommerce.

Filter and search App for Shopify

 

Fixed, always open Search Bar

Luckily we came out with a quick and easy tutorial to make your search bar look open and wide while maintaining the original functionalities designed by Shopify for this theme.

 

What it will look like: the end result

how to make shopify search bar always visible

 

 

Procedure

To make the search bar always visible we are going to create a box simply by showing borders around an existing element in the theme.

Then we position the search icon within that box and add a placeholder text, in this case, “Search…” but it can be anything you want.

Lastly, the @media query rule will make sure that these changes only apply to desktop screens (or windows bigger than 990px).

Simply copy this code and paste it at the end of your base.css file.

 

 

Having troubles? contact us

 

Found it useful? Please Share

Read More…

Comments

0 Comments

Submit a Comment