Sophisticated interface, yet easy to use...

This page describes both the "front-end" and the "back-end" of this template -- the catalog pages that your viewers will use, and the administrative interface that you'll use to edit categories and products.

You may wish to open the Administrative Area while you read this page so that you can refer to the different pages. Log in using "admin" and "password." You will not be able to make changes to the information, but you can view all the pages. Also please note that you must have cookies enabled to be able to log in and use the Administrative Area.

Keyword Search

This template features a sophisticated keyword search. Advanced searching techniques are described on the Help page.

The keyword search looks at the Product Name, Product Short Description, and Product Long Description. Be sure that any search terms your customer might look for are in one of these fields. (See below for more info about editing product information.)

FAQ: Can I add more fields to the keyword search?
If you are comfortable with VBScript, ASP, and HTML, you may modify the code for the searching mechanism. If you are not comfortable with coding, however, you will most likely not be able to modify the keyword search feature.

Product Categories

Every page has a horizontal menu area which displays the product categories. The Product Categories are pulled from the database, which means that you can specify your OWN product categories. There are "normal" categories (Candy, Flowers, Gifts...) and "special occasion" categories (Birthdays, Christmas...). Each of these categories can be turned "off and on" as the season requires -- for example, we have a "Halloween" category that is not being displayed, but can be easily added to the menu bar by making it active in the administrative area. The screenshot to the right shows the table of categories, whether or not they are active, and the "type" of category. As you can see, "Halloween" exists in the database, but is set to be "inactive" so that it doesn't display in the menu bar.

When you click on a menu item, you are sent to the Catalog Page. There is one catalog page (catalog.asp) which will display a description of the category, products in that category, and the two featured products for that category. (We'll tell you more about the catalog page below.)

The picture, description, category name, and featured products can be modified in the Administrative Area...

Product Categories Admin Area

The Administrative Area allows you to Edit or Delete existing categories and to create new categories. In the screenshots below, you can see the interfaces for editing category information. You may edit the name of the category, set the category to be active or inactive, set the "type" of the category to "Normal" or "Special Occasion," change the description of the category, and select which products to feature.

Switch between editing in "Normal" view and "HTML" view. We advise that you don't change fonts or font size - use the "Style" dropdown instead - to remain consistent with the design of this template.

Home Page "Featured Products"

The Home Page has a "Featured Products" area. This is also generated from the database. You may have up to five featured products, specified in the Administrative Area (see right). Note - the actual product information is drawn from the Product Table, which we'll discuss below.

Catalog Page

After clicking on a category or performing a search, the user is brought to "catalog.asp," which dynamically displays the results. The user may then sort the results by name, price, or newest first, and choose how many results to display on the page. The user may use the search box area to perform a new keyword search or click on the Categories to browse more products.

The displayed results pull information from the Product Table. A small thumbnail is shown, along with the product name and price. If the product is less than 31 days old, a red "New!" notice will be printed. If the product is on sale, a notice will be displayed, along with the original price.

The number of days to be considered new may be changed. See the Getting Started page, 4b. You may also change how many products are displayed on the page by default. See 4a on Getting Started. The product name, price, sale price, image, and other details are pulled from the database, and may be modified using the Administrative Area -- we'll discuss this below.

Product Detail Page

When a user clicks on a product thumbnail, they are brought to the product detail page (details.asp). This page dynamically displays the product details - the product's name, a longer description (featured products use a shorter description), the product's price and sale price if applicable, the product's ID number, and a larger image of the product.

New in Version 2: We have added functionality for dropdown select boxes. Note that products can still only have one price; the select boxes are for options like size, color, or style, not for different prices.

There is also a PayPal "Add to Basket" button which is dynamically generated to provide the relevant information to PayPal. (This means you don't need to add individual buttons yourself -- the database does it all!)

The product information is all pulled from the Product Admin area....

Products Admin Area

The Administrative Area allows you to add more product, delete existing products, or change product information. In the screenshots, you can see the interface used for editing products. You may specify if the product is active or not, specify if the product is on sale or not, edit the product's name, price, sale price, short description, and long description, specify the file names of the "small" and "large" images, and finally specify which categories this product is part of.

A full list of your products can be viewed, with the ability to delete products, edit them, or preview them as they will display in the catalog. You may specify how many records to show on the page - see 4g on Getting Started. You may search and sort your products as well!

(And note that the rows "highlight" as you mouse over them so that you don't get lost!)

Adding products is as easy as 1) importing your "small" and "large" picture into your FrontPage web's catalog images folder and 2) adding product information via the Admin interface.

Note - the Long Description area allows you to put text describing your product. It's also suited for additional product details, like weight, size, or color. We've also used it to specify "keywords" for the product that may not be found within the description to help the keywords earch.

Username and Password

The Administrative Area is password protected. You will access the admin area by typing "http://www.myweb.com/admin", where "myweb.com" is the location of your web site. You will then come to a log in screen. Type your user name and password to access the rest of the administrative area. (In this example, log in using "admin" and "password.")

One of the first things you should do is to change the password used to access your administrative. The "Change Password" page allows you to easily do this.

Other Notes

Be sure to read the instructions on Getting Started for changing the global variables for your PayPal email address, category and catalog image locations (if necessary), width and height of catalog images, and more.
We've included a Photoshop tutorial page with notes about using Photoshop to edit your images.
Troubleshooting (new in v2): We've added a new page called test.asp. If you pull this page up in a browser (once you have published your site), several outputs will be written to the page helping you and us to know at what point the database is having problems.
If you want want to change "special occasions" to something else, follow these instructions:
- Create a new graphic to replace the "special occasions" graphic. It will be easiest if you keep it the same dimensions and filename (106x22, specialoccasions.gif). We've included the Photoshop file for this graphic. Import this into your web's "images" folder and replace the existing graphic.
- Now, just create your categories as if "Special Occasions" were your new type of category.
If you want to completely get rid of "special occasions" and only have one type of category, follow these instructions:
- Open the "includes" folder in your FrontPage web.
- Look for "specials.asp." Rename it to "specials_old.asp."
- Look for "nospecials.asp." Rename it to "specials.asp." The "nospecials.asp" page provides the purple row area without the specials text.
- Now, delete the categories you don't want, and be sure to keep all your categories as the "Normal" type.
If a user "browses all" or doesn't specify a category in a search, a default "category picture" will be used. This image is "images/categoryimages/categorypic-default.jpg." You may replace this image by importing your own file with the same dimensions and name. A Photoshop file is included.