Skip to main content
All CollectionsAdvanced 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 3 years 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?