How to add a Search Box to your store design

You can easily display a search box in your store design by including into the code a file called smallSearchBox.asp located in the pc folder. To do so, add the following line of code to the section of your HTML code where you want the search box to appear (e.g. a table cell):

<!-- #Include file="SmallSearchBox.asp"-->

If you need to edit the way the search box is presented in your storefront, either open the file SmallSearchBox.asp itself in your favorite HTML editor, or edit the main style sheet used by the storefront (pcStorefront.css) and edit the classes that pertain to the search box.

You can also take the code and directly position it on any page. Open SmallSearchBox.asp in your HTML editor and you will see that the code reads as follows:

<form action="showsearchresults.asp" name="search" method="get" class="pcForms">
	<input type="hidden" name="pageStyle" value="<%=bType%>">
	<input type="hidden" name="resultCnt" value="10">
	<input type="Text" name="keyword" size="14" value="">
	<input type="submit" name="submit" value="Go &gt;&gt;" id="submit">
	<div class="pcSmallText">
		<a href="search.asp">More search options</a>
	</div>
</form>

Copy and paste the code in your customized header.asp or footer.asp pages and edit it as you wish.

If you decide to place the code on a page that is outside of ProductCart, make sure to remove the following line of code (or hardcode the value as mentioned in the next section).

<input type="hidden" name="pageStyle" value="<%=bType%>">

A couple of quick edits can help you change the way the search box behaves:

• Change the value of the pageStyle hidden field from <%=bType%> (this code is retrieving the default page style used in your storefront and set in the Control Panel's Settings > Display Settings area) to one of the following values to change the way search results are presented:
  • h = search results are shown horizontally
  • l = search results are shown in a list
  • m = search results are shown in a list, with the ability to add multiple products to the cart
  • p = search results are shown vertically
• Change the value of the resultCnt hidden field from “10” to any other integer to change the number of results shown on the search results page (e.g. 12).
• Add the following hidden field to the form to obtain the same behavior as if the customer were checking the “Search on Exact Phrase” option on the advanced search page.

<input type="hidden" name="exact" value="1"/>