All Collections
Advanced Design
Change the text displayed in your Search Bar
Change the text displayed in your Search Bar

Make the Search bar on your store more user-friendly!

Liam Cadle avatar
Written by Liam Cadle
Updated over a week ago

If you'd like to change the text displayed within the search bar on your storefront, here's a cool bit of script that you can add:

<script>

// change the search bar placeholder text

var myNewText = 'Search using Keywords or Product Code';

var searchPlaceholder = $('.searchlist_hd, .searchlistpanel_hd');

searchPlaceholder.attr('placeholder', myNewText);

searchPlaceholder.addClass('placeholdertext');

</script>

Copy the above then navigate to Appearance > Theme Options and in this area, scroll, to the Footer Block area and paste in the script:

To change the wording, simply remove the text highlighted in bold and type in what you want it to say (please leave all other characters):

"var myNewText = 'Search using Keywords or Product Code';

For Example:

If you wanted your search bar to say "Start your search here by using keywords or product codes", your script would look like this:

<script>

// change the search bar placeholder text

var myNewText = 'Start your search here by using keywords or product codes';

var searchPlaceholder = $('.searchlist_hd, .searchlistpanel_hd');

searchPlaceholder.attr('placeholder', myNewText);

searchPlaceholder.addClass('placeholdertext');

</script>

Last bit of the puzzle is to add this little bit of CSS code - this will hide the original message in the search bar - not critical but nice to have:

Still within Theme Options, this time navigate to the CSS Block and paste in the below CSS:

/* Begin change the search placeholder text */

.searchlist_hd::placeholder {
opacity: 0;
}
.searchlist_hd.placeholdertext::placeholder {
opacity: 1;
}

/* end */

Once you're happy with your script and text, hit Publish on the top right of the screen and then refresh your storefront to see your changes!

Job done :)

Did this answer your question?