The settings in the catalog system are preset to standard defaults. Using any or all of the settings, you can change the basic look of the catalog system including turning various features on and off. For maximum customization (which will be covered later in this tutorial), we will be using the Custom Header and Custom Footer fields along with the Head Tag Code for linking to your style sheet.
If you do not intend to make many changes to these settings, at least take a few minutes to familiarize yourself with the settings that are available. This review will make it easier to make changes later on.
When you have the settings the way you want them, click the "Update Settings" button at the bottom of the screen.
Background Color
The Background Color field affects the look of all page backgrounds. This setting uses HTML hexadecimal color values as well as standard color names such as blue, black, white, etc.. If you are using background wallpaper, the color field will be ignored.
Logo Alignment
The Logo Alignment field allows you to select either left alignment or center alignment.
NOTE: If you are using a custom HTML header, your company logo will be automatically replaced with the header. Of course, it is a good idea to include your company logo in a custom HTML header. Remember, this is ecommerce.
Page Alignment
The Page Alignment field allows you to select either left alignment or center alignment for your pages. This means that the page content will be either aligned to the far left of the browser window or aligned in the center of the browser window.
Page Width (in pixels)
The Page Width field allows you to define the width of the content section of your site's catalog pages. 750 is a good starting point, but you may make the content area whatever width you like. If you choose to have a background wallpaper, your content will be surrounded by the wallpaper. If you choose to align the content to the left, then the wallpaper will be displayed to the right and below the content area.
Head Tag Code
If you are using a custom HTML header and you wish to include special external code such as a style sheet or a javascript file reference, you will want to place these references within the HEAD tags. Place any code that need inside the HEAD tags into the Head Tag Code field.
Show Custom Header
If you wish to display a custom HTML header, check the "Show Custom Header" checkbox and enter the full URL (beginning with http://) into the "Header URL" field. Using a custom HTML header is a good idea because you can include CSS (Cascading Style Sheet) Styles in that header which will allow you to customize the look of virtually every element on the page including text fonts, colors, & sizes, input field colors, titles, and so forth. For more information about CSS, see the code generator section of the Administrator.
Show Custom Footer
Similarly, if you wish to display a custom HTML footer, check the "Show Custom Footer" checkbox and enter the full URL (beginning with http://) in the the "Footer URL" field.
Show Search Form
If you want to allow your customers to use the built-in search facility, check this checkbox. The search system will search the following fields: Product Name, SKU, Short Description, Long Description, Keywords, and Category Name.
Show Navigation Trail
The Navigation Trail is a list of the categories starting with the home page of your site showing each level that the customer clicked through to reach the page. For example, a typical navigation trail might look similar to the following: "Home > Catalog Home > Dinnerware > Vietri > Bianco". Each level is a link which allows the customer to click back up the navigation trail to reach previous levels all the way back to the home page.
Show Multi-Page Links at Top of Pages
The "Show Multi-Page Links at Top of Pages" checkbox, if checked, will cause the page links (if you have more categories or items than will fit on the page based on the number of rows and columns that you have specified for the pages) to appear at the top of the page.
Show Multi-Page Links at Bottom of Pages
The same is true for the "Show Multi-Page Links at Bottom of Pages " except that it will also cause the links to appear at the bottom of each page.
Category Thumb Max Height
The thumbnails that are automatically generated when you upload a category main image are sized accodring to values you specify. By setting the maximum image height, the thumbnail will be sized so that the height is no more than the number of pixels you specify.
Category Thumb Max Width
The thumbnails that are automatically generated when you upload a category main image are sized accodring to values you specify. By setting the maximum image height, the thumbnail will be sized so that the width is no more than the number of pixels you specify.
--- Catalog Display Page Options Section ---
These options affect the catalog display pages which display the categories.
Rows of categories per page
Rows of categories per page affects the Catalog Display and Category Display pages and specifies how many rows of categories are visible on each page. If you have more categories than can fit in the number of rows you specify, the catalog will automatically create links at the top and bottom of the page to allow visitors to your site to navigate the various pages. In addition, a "View All" link will be available so that all categories can be displayed on a single page if the shopper wishes. (See Multi-Page Links above)
Columns of categories per page
Columns of categories per page affects the pages which display categories (and sub-categories) and specifies how many columns of categories are visible on the page.
Category Image/Thumb Border
This setting allows you to place an optional colored border around your category images (both thumbnails and main images) to help visually set them off from the background. To place a border around your category images, check this checkbox and enter a color into the Category Image/Thumb Border Color box below.
Category Image/Thumb Border Color
This setting uses HTML hexadecimal color values as well as standard color names such as blue, black, white, etc.
Show Menu
The Show Menu checkbox allows you to specifiy whether the main menu (containing all of the active top-level categories in a single list) is displayed on each catalog display page. The menu is displayed on the left side of each page.
Show Catalog Home link
This checkbox will add a "Home" link to the side menu if you have selected the side menu to be visible.
Show "New" category
On the Editing page, you may specify whether an item is "New". This might be an item that you have recently added. The Category Display Page can optionally include a "New" category which will contain all items which are marked as New. This category does not exist in your category tree, but is a virtual category. Use this option ONLY if you have items marked as New. If no items are marked as new, this category will be empty. To show the virtual New category in the main menu (list at the left of the page), check this checkbox.
--- Category Display Page Options ---
These options affect the Category Display Page which displays the items within a specific category.
Show Category Description Block
The Category Description Block is an optional section which includes the main category image, the category description, category name, and related categories list. This block can be oriented either vertically between the menu (if the menu is displayed) and the rows and columns of products in the category or horizontally across the top of the rows and columns.
Rows of product per page
This setting affects the pages which display items within a category and specifies how many rows of items are visible on the page. If you have more than can fit in the number of rows you specify, links will be automatically created at the top and/or bottom of the page (depending upon the Multi-Page Links setting above) to allow visitors to your site to navigate easily. In addition, a "View All" link will be available so that all items within the category can be displayed on a single page if the shopper wishes.
Columns of product per page
The Columns of product per page affects the pages which display items and specifies how many columns are visible.
Show "More Info" link
The "Show More Info link" causes a small graphic link labeled "More Info" next to each item on the category display page. Clicking this link will take the shopper to the specific product page. If the More Info link is not present, the shopper may still click on the image or name to visit the product page. It is recommended to use the "Show More Info" link as it is a more obvious navigation link.
Show Product SKU
If you wish to display your item SKU (Item ID) as part of the product link on the Category Display Page, check this check box.
Show Product Price
The "Show Product Price" checkbox allows you to specify whether you wish to display the price of each item on the category display page.
Show category short description
The "Show category short description" checkbox allows you to specify whether you wish to display the short description for each item on the category display page. If your short description is more than a couple of words, then it is recommended to leave this checkbox unchecked.
--- Product Display Page Options ---
These options affect the page which displays the information about a specific item.
Show Menu
The Show Menu checkbox allows you to specifiy whether the main menu (containing all of the active top-level categories in a single list) is displayed on each product display page.
Show Product Price
The "Show Product Price" checkbox allows you to display or suppress the price on the product display page. You would want to suppress this only if you are using the catalog to simply display your items with no cart system for purchasing or if you select the "Call for Pricing" status option for the product.
Show Quantity Field
The Show Quantity Field setting allows you to specify whether a quantity field is displayed as part of the shopping cart function if you are using CustomCart or one of our ecommerce suites. If no quantity field is used, the default quantity added to the cart when a customer clicks the "Add to Cart" button will be 1.
Show MSRP
If you want to show your customers that you offer a price lower than the retail price of an item, specify the Manufacturer's Suggested Retail Price on the product editing page and check this checkbox. Using CSS styles in your custom HTML Header, you can affect the look of the MSRP on the product page. For example, you might wish to have the MSRP in red with a strikethrough line like this: $99.00
Show Product Short Description
Although the Product Short Description is primarily used as the content for the description meta tag, you can also include it on the product display page by checking this checkbox. Normally, however, you will only use the short description for search engine optimization purposes.
Show "Email a Friend" Link
One of the most useful features of any catalog is the ability for shoppers on your site to send an email to their friends or family about a specific item. The "Email a Friend" system is built for this purpose. When this link is available on a page and a shopper clicks it, a new window will open containing a mailer form which allows them to send an email which contains a thumbnail image of the product, its description, and a link to the product page.
--- Product Image Options ---
These settings allow you to customize the look of your item images and thumbnails.
Product Image/Thumb Border
This setting allows you to place an optional colored border around your product images (both thumbnails and main images) to help visually set them off from your catalog background. To place a border around your product images, check this checkbox and enter a color into the Product Image/Thumb Border Color box below.
Product Image/Thumb Border Color
This setting uses HTML hexadecimal color values as well as standard color names such as blue, black, white, etc.
Product Thumb Max Height (in pixels)
When you add an item to your catalog, you will generally include an image for that item. This image can be as large as you like. The system will automatically generate a thumbnail of the image for use on the Category Display Pages. By setting the maximum image height, the thumbnail will be sized so that the height is no more than the number you specify. 130 pixels is a good starting point although you may wish to set it larger or smaller depending upon your catalog layout. It is also a good idea to upload images which are square (both height and width the same). This helps make the layout of your catalog more even and visually pleasing.
Product Thumb Max Width (in pixels)
The maximum width of the generated thumbnail (just like the maximum height above) is set by this field. Again, 130 pixels is a good starting point. It is also a good idea to upload images which are square (both height and width the same). This helps make the layout of your catalog more even and visually pleasing.
When you have the settings the way you want them, click the "Update Settings" button at the bottom of the screen.
