) to the right of the Template Storage icon ( 
). The New Template Panel will appear.
). You will be transferred to the Product Template Control Panel.
) at the bottom of the page. You will be transferred to the Product Templates table.A Brief Product Template is a general design or layout that governs the appearance of Products as they appear on Category pages (with other products of the same Category) as well as their own individualized Brief Product pages (optional). A Brief Product Template should contain all HTML and images that are common throughout your Product Catalog and that provide the basic look and feel of how you would like them to appear on your website.
Your Brief Product Template will also need to contain system-specific Keywords (for instance, AUTO_GENERATED_PRODUCT_NAME, which will be replaced by the Product's name on the website) that inform the shopping cart where in the template the corresponding information should be inserted. Correctly using the Keywords will enable you to display all desired information that pertains to your Products, with the system doing all the hard work by generating every Product page for you!
While Brief Product Templates are primarily used on Category and individualized Brief Product pages, they can also be used in several other areas. For instance, Brief Product Templates can be constructed to govern the display of Products that appear as search results (when a customer searches your online store). They can also be constructed to govern the display of Product Groups, as each Product Group can be assigned its own Brief Product Template as it is created. An example of a Product Group might be Featured Products placed on the store's homepage.
Brief Product Templates are also specifically configured for maximum flexibility. A user can customize a Brief Product Template to do almost anything, and there are three basic layouts that a Brief Product Template can take, based on the way they are viewed. They may be displayed in Grid view (where multiple Products appear side-by-side one another), in List View (where each Product is displayed on its own line), or in Table view (where each Product displays as its own line with common headers displayed at the top of the table, signifying the information that is contained in each column per Product). This guide will assist you in creating all three.
SearchFit Keywords, as previously mentioned, allow you to customize the placement of your Product data within the Brief Product Template. For example, you may add keywords to your Brief Product Template that define the placement of the Product image, name, description, price, and much more.
We recommend Using these 3 steps to create your Brief Product Template:
The rest of the instructions guide you through the above 3 steps. If you are adventurous, feel free to skip straight to step 2, or just download the example brief product template files and modify them on your own.
Create the following directory structure and files on your computer:
root/brief_product_template.html
root/images_templ/image.gif [and the rest of your images]
root/styles_website/product_styles.css
By using the above directory structure you will be able to smoothly perform step 2 of this guide: "Convert Your Brief Product Template into a SearchFit Brief Product Template ".
Below are examples of the three different types of Brief Product Templates that you can make: Grid, List, and Table Layout.
So what are you waiting for? Go now and build your Brief Product Template! Come back with a working Grid View Brief Product Template (including the files and folders listed above) and we'll show you how to convert it into your SearchFit Brief Product Template.
View an Example SearchFit Brief Product Template in Grid View in action.
Download a zip file of files used in the Brief Product Template including HTML, CSS & images.
This Keyword automatically adds the name of the product in a text-only format. This keyword will never be replaced by a link regardless of your settings configuration.
How do I use the AUTO_GENERATED_PRODUCT_NAME_ONLY keyword?
Simply replace the name of your Product in your standard HTML template with the AUTO_GENERATED_PRODUCT_NAME_ONLY keyword.
Example of Code from Standard Template:
<div class="brief_product_header"><p>LG - 22" 720p Widescreen Flat-Panel LCD HDTV</p></div>
Standard Code Modified for SearchFit Template:
<div class="brief_product_header"><p>AUTO_GENERATED_PRODUCT_NAME_ONLY</p></div>
This Keyword automatically adds the small image of the product. The small image is that which is has been assigned to the product and is classified as type small. Dependent on your settings configuration this image may (or may not) automatically link to the detailed product page.
How do I use the AUTO_GENERATED_PRODUCT_IMAGE_SMALL keyword?
Simply replace the <img> tag of your Product's image in your standard HTML template with the AUTO_GENERATED_PRODUCT_IMAGE_SMALL keyword.
Example of Code from Standard Template:
<div class="brief_product_middle"><a href="#"><img src="images_products/57044_small.jpg" border="0" alt="Insignia - 15 Class 720p Widescreen Flat-Panel LCD"></a></div>
Standard Code Modified for SearchFit Template:
<div class="brief_product_middle">AUTO_GENERATED_PRODUCT_IMAGE_SMALL</div>
This Keyword automatically adds the List Price of the product. The List Price indicates the price that competitors are charging for the same product.
How do I use the AUTO_GENERATED_PRODUCT_PRICE_LIST keyword?
Simply replace the Product's List Price in your standard HTML template with the AUTO_GENERATED_PRODUCT_PRICE_LIST keyword.
Example of Code from Standard Template:
<p>List Price: <span class="lblue">$247.49</span></p>
Standard Code Modified for SearchFit Template:
<p>List Price: <span class="lblue">AUTO_GENERATED_PRODUCT_PRICE_LIST</span></p>
This Keyword automatically adds the Final Price of the product. The Final Price indicates the price that your customers will pay for the Product (non-inclusive of sales tax).
How do I use the AUTO_GENERATED_PRODUCT_PRICE_FINAL keyword?
Simply replace the Product's Final Price in your standard HTML template with the AUTO_GENERATED_PRODUCT_PRICE_FINAL keyword.
Example of Code from Standard Template:
<p>Price: <span class="dblue">$209.99</span></p>
Standard Code Modified for SearchFit Template:
<p>Price: <span class="dblue">AUTO_GENERATED_PRODUCT_PRICE_FINAL</span></p>
This Keyword automatically adds the correct URL that will allow your Product to be added to a customer's shopping cart. Clicking this link will present a small panel, notifying the customer that the desired item has been added to his/her shopping cart but will NOT direct the customer away from the page that is currently being viewed. That is, this URL adds the item to the shopping cart but does NOT redirect the customer to the shopping cart screen.
Please Note: This URL should be entered as the value of an onClick attribute, NOT an href attribute.
How do I use the AUTO_GENERATED_PRODUCT_URL_MOVE2CART keyword?
Simply add an onClick attribute to the link surrounding your Add to Cart button/text. The value of the onClick attribute should be the keyword AUTO_GENERATED_PRODUCT_URL_MOVE2CART. The value of your href attribute may be left empty, or it may be set to #.
Example of Code from Standard Template:
<a href="#"><img src="images_templ/btn_add2cart.gif" alt="" border="0"></a>
Standard Code Modified for SearchFit Template:
<a href="" onclick="AUTO_GENERATED_PRODUCT_URL_MOVE2CART"><img src="images_templ/btn_add2cart.gif" alt="" border="0"></a>
This Keyword automatically adds the correct URL that will allow your Product to be added to a customer's shopping cart while simultaneously redirecting the customer to the shopping cart screen. This URL is generally used to provide the possibility of immediate purchase and may be easier thought of as the Buy Now URL.
Please Note: This URL should be entered as the value of an onClick attribute, NOT an href attribute.
How do I use the AUTO_GENERATED_PRODUCT_URL_ADD2CART keyword?
Simply add an onClick attribute to the link surrounding your Buy Now button/text. The value of the onClick attribute should be the keyword AUTO_GENERATED_PRODUCT_URL_ADD2CART. The value of your href attribute may be left empty, or it may be set to #.
Example of Code from Standard Template:
<a href="#"><img src="images_templ/btn_buynow.gif" alt="" border="0"></a>
Standard Code Modified for SearchFit Template:
<a href="" onclick="AUTO_GENERATED_PRODUCT_URL_ADD2CART"><img src="images_templ/btn_buynow.gif" alt="" border="0"></a>
View an Example Brief Product Template in List View written in standard HTML with no special SearchFit markup.
Download a zip file of files used in the Sample Brief Product Template including HTML, CSS & images.
View an Example SearchFit Brief Product Template in List View in action.
Download a zip file of files used in the Brief Product Template including HTML, CSS & images.
At this point, you should have all the files needed for your SearchFit Brief Product Template. The next step is to add all these files to your SearchFit Control Panel and publish your site.
Hint: Once you have finished Step 3, you will be able to view your SearchFit Brief Product Template as applied on your website. In order for this to be possible, you will need to have at least one of each of the following already set up for your store: Category Type, Category, Product. If you don't have Products, you won't be able to view your new display.
Your Brief Product Template is the modified brief_product_template.html file you created in Step 2 of this guide. The below instructions will guide you through copying your Brief Product Template from your hard drive to the Brief Product Template section of the SearchFit Control Panel.
) to the right of the Template Storage icon ( ). The New Template Panel will appear. ). You will be transferred to the Product Template Control Panel. ) at the bottom of the page. You will be transferred to the Product Templates table.Upload your images to the images_templ folder using the Website File Storage screen. Note that SearchFit does not allow you to use standard FTP to upload your images. You must use the File Storage screen.
) to the right of the Website File Storage icon ( 
). The New File Panel will appear. ). You will be transferred to the Website File Storage table.
) to add it to the Website File Storage. The Control Panel will automatically decompress the .zip file and add all images to the Website File Storage. You will be transferred back to the Website File Storage main table.Your Product styles file is the product_styles.css file you created in Step 1 of this guide. The below instructions will guide you through copying your Product styles CSS from your hard drive to the CSS Main screen of the SearchFit Control Panel.
.
). You will be transferred to the Main CSS screen.
).You must assign your Brief Product Template to your website pages using the Configuration Per User screen.
) to the right of the Per User icon ( 
). An Edit User Settings Control Panel will appear. ). You will be transferred to the Configuration Per User Control Panel. ) at the bottom of the page to successfully complete the addition of your new Brief Product Template.
To Generate your website means to instruct SearchFit to prepare and publish your website. You must Generate your website to see any changes (as listed above) take effect. You must have popup blockers disabled in order to Generate.
). It's located on the SearchFit Control Panel beneath the SearchFit logo on the upper left (it's the third button from the left). You will be transferred to the Generate screen.
). A prompt will appear asking "Start New Generation?". Click the OK button.