====== How to add a Search Box to your store design ======

===== Using the default "include" file =====

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

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

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.

===== Using the code itself =====

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:

<code>
<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>
</code>

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

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

===== Editing the form behavior =====

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.
<code><input type="hidden" name="exact" value="1"/></code>