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 :)