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.

In the section about integrating ProductCart with your Web site design we talked about how to edit the graphical interface that surrounds the shopping cart code so that shopping cart pages blend seamlessly with the rest of your Web site. 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.

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.

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

• As a list (category names only)
• With category names and thumbnail images
• In a drop-down

Here is a graphical example of these three display types and of how a category page that contains sub-categories is organized.

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.

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 “pagestyle=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 “pagestyle=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.

  Technical note: on any page that shows products, you can force the page to display items in a list by passing the querystring “pagestyle=m”.

  This display option is not recommended if your products have required options or input fields as the quantity field is not displayed in those cases as the system needs additional user input (i.e. the customer needs to choose from the available product options) before the product can be added to the shopping cart. Specifically, the quantity field is not shown for products that:

  • have at least one required option
  • have at least one required input field
  • are out of stock and the store is tracking inventory, the product is not setup to Disregard Stock, and back-ordering is not allowed.

  • are Build To Order products

    In addition…

  • The Add to Cart button is not shown when all products on the page belong to any of the categories mentioned above.
  • The quantity field and Add to Cart button are hidden to retail customers if the store has been set up to only allow wholesale customers to shop.
  • The quantity field and Add to Cart button are hidden to all customers if the store has been set up to only work as a catalog.

Here are some graphical examples of how the various display settings affect the storefront.

You can then 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.

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

You have complete control over the order in which products are displayed within a category. You can set the exact order when you edit a category (for details, please refer to the corresponding section). When a specific order is not set, ProductCart will sort products based on this store-wide setting. You have 4 options:

• Sort products by part number (SKU)
• Sort products by name
• Sort products by price (high prices first)
• Sort products by price (low prices first)

You can also specify whether or not a drop-down menu allowing users to change the sorting criteria should be shown or not. This feature is normally turned on by store managers, but it makes sense to turn it off (hiding the drop-down) when you categories only contain a few products. In that case, check the option Don't let users sort products.

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

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). Here is a graphical example of how the different layout settings affect the same product page.

Technical Note: The product details page selects the style for the page in the following order of priority (the variable on the product details page - viewPrd.asp - is called “pcv_strViewPrdStyle”):

1. querystring (ViewPrdStyle=o) . The values are: o (for “one” column), l (for “left”: left-side picture) and c (for “classic” as this is the default display option and one often used on e-commerce stores). Try changing these settings on our demo stores. For example:
   1. http://www.earlyimpact.com/demos/standard/pc/viewPrd.asp?idproduct=8&viewprdstyle=o
   2. http://www.earlyimpact.com/demos/standard/pc/viewPrd.asp?idproduct=8&viewprdstyle=l
   3. http://www.earlyimpact.com/demos/standard/pc/viewPrd.asp?idproduct=8&viewprdstyle=c
2. product-specific setting
3. category-specific setting
4. storewide setting

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.). See the section that talks about the cascading style sheet that controls the storefront (pcStorefront.css) to learn more about this.