Store Display Settings

Display Settings

ProductCart gives you plenty of options to change the way products and categories are displayed. As always, changes made on this page are reflected in real-time in your storefront. So a good way to familiarize yourself with ProductCart's display settings – once you have added a few categories and products to your store – is to keep two browser windows open: change the Display Settings in one window and see how that affects the storefront in the other browser window.

This section talks about changes you can dynamically make to the shopping cart code that affect the way products and categories are displayed when users browse your store.

Take time to become familiar with the Display Setting section of the Control Panel. You will appreciate the kind of flexibility that ProductCart gives you in terms of defining the look of your store. Let's look at the different display settings that are made available to you.

Category Display Options

ProductCart supports unlimited categories and sub-categories, and an unlimited number of sub-category levels. You can change the way categories are displayed in the store, and the way their sub-categories are presented within them. First you will set some store-wide display settings that affect all categories in the store.

Then, you can choose to overwrite the store-wide settings for specific categories. That means that you might have categories that present their categories in a list, while other categories where the sub-categories are shown in a drop-down.

Three Category Display Settings

There are four ways in which categories and subcategories are displayed:

As a list
With category names and thumbnail images
Thumbnail images only
In a drop-down

Setting How Many Categories to Show

When categories are displayed using a drop-down, all of them are shown in the drop-down. But when they are displayed in a list or with images, you need to further specify how many of them should be shown on each row and how many rows per page. Therefore, the following settings apply when categories are not displayed in a drop-down:

Categories Per Row- How many categories should be shown on each row? This setting defines the number of columns that the page is organized in.
Rows Per Page- How many rows of categories should be shown on each page? This setting defines the number of rows included on the page. The two settings together define how many categories are shown on each page.

If a category contains more subcategories than the total number of categories per page resulting from the settings above, then ProductCart automatically adds a navigation area at the bottom of the page with clickable page numbers, and also adds Next and Previous page icons that can be edited using the Edit Store Icons feature.

The category display settings also affect how brands are shown in the Browse by Brand page. For more information, see the section about managing brands with ProductCart.

Brands Display Settings

These settings apply to top level brands. Additional display settings are available for second level brands (subBrands) and products displayed within a brand. Items per row and rows per page use the Category Display settings described above.

Show Brand on Product Details Page- The brand name is shown on the product details page and it links to a search results page that shows all products within the same brand.
Show Brand Logo on "Browse By Brand" Page- The brand logo is shown when browsing the store by brand using the page ”viewBrands.asp” in the ”pc” folder. Otherwise the brand names are shown.

Product Display Options

Four Ways to Display Products in a Category

There are fours ways in which products can be displayed on a page. The settings also apply to the home page ( home.asp), and to the Specials, View Best Sellers, View New Arrival pages, as well as the search results pages, unless you overwrite the store-wide settings with page-specific settings, where possible (e.g. using the Manage Home Page feature).

Display Items Horizontally, with Images- When this option is selected, items are displayed horizontally. The product thumbnail image is displayed too. Short product descriptions are not shown. For best results, make sure that your thumbnail images do not exceed 100 x 100 pixels. In addition, make sure that you choose a number of products per row that is compatible with the Table Width value. For example, if you set a table width of 500 pixels and plan to use thumbnail that are around 100 pixels wide, you should set the system to show 4 or less products per row.

Technical Note: On any page that shows products, you can force the page to display items this way by passing the querystring " pagesyle=h"

Display Items Vertically- When this option is selected, items are displayed vertically, in one column, together with their thumbnail image. When present, the short product description is displayed. The Products per row setting is ignored.

Technical Note: On any page that shows products, you can force the page to display items vertically by passing the querystring " pagesyle=p"

Display Items Vertically (List View)- When this option is selected, items are displayed vertically, in one column, but this time the thumbnail image is not displayed. When present, the short product description is displayed. The Products per row setting is ignored.

Technical Note: On any page that shows products, you can force the page to display items in a list by passing the querystring " pagestyle=l"

Display Items Vertically (List View) with the ability to add multiple items to the cart at the same time- This option lists products similarly to the display option described above, with the difference that the presence of a quantity input filed next to each product allows customers to add multiple products to the shopping cart in one step (all products for which the quantity is other than zero). When present, the short product description is displayed. The Products per row setting is ignored when this display option is chosen. The quantity field is NOT displayed if the Quick Buy feature is disabled.

Number of Products Per Page

You can use a combination of the following settings to set the number of products shown on the page.

Products per Row- This variable defines how many products will be shown on each row.
Rows per Page- This variable defines how many rows of products should be displayed on each page. By using these two variables together, you can specify the exact number of products that will be shown on each catalog page.

When the total number of products exceeds the total for the page, a navigation area appears automatically both at the top and at the bottom of the page. The Next and Previous page icons used in the navigation that can be edited using the Edit Store Icons feature.

List-Only Display Options

When products are displayed in a list, you can specify whether you want the product part number (SKU) and a small product thumbnail to be displayed or not.

Show the product part number (SKU)
Show the small product thumbnail

The product thumbnail used when products are shown in a list is the same file used when product thumbnails are displayed elsewhere, but a smaller version of it, as you have probably noticed. The size of the thumbnail is controlled by the pcStorefront.css cascading style sheet. Edit the “pcShowProductImageL” and “pcShowProductImageM” classes to change its size.

Product Details Page Display Options

Product Details Page Display Settings

You also have the ability to choose between three different display settings for your product details pages. In other words, you can change the way information is presented when customers click to see details on a product or service. The options are:

Two-column layout with the product image on the left
Two-column layout with the product image on the right
One-column layout with the image in the middle (ideal for products that have wide images, or for products that don't have any images).

If you choose the "Custom Layout" option, a custom layout must be selected (from the Product Detail page) for each product in the store.

Overriding the Store-Wide Settings

You can override the store-wide setting at the category level (i.e. all products within the same category), and even at the product level (i.e. product specific setting).

Fonts, Backgounds, etc.

Unlike in previous versions of ProductCart, the Control Panel no longer controls the type of font used on the store. This is because the application now supports Cascading Style Sheets, which give you much more control not only on the way text is shown on your store, but on many other interface elements (titles, backgrounds, images, links, etc.)