Client Resources

Online Help

Help Product Category Page Design

Product Category Page Design

Establishing the shop entrance to your Products

Shop product categories should be viewed as the spring board to launch all products. Some of the best print catalogues dedicate a small region on a category's introduction page to announce the products showcased within the category. The introduction is typically short, but it's job is to quickly engage its audience and to create excitement in the reader. Learn more about building effective product categories.

Text isn't the only important component on your shop category pages. Elements such as product image size, add to cart buttons, price, description, etc. all play a part in how your customers interact with your shop. Your customers can also control how the category page displays within their web browser, with Grid, List and Mini View options available. This section discusses those elements and how to apply them to your category pages.

On this page

  1. Product Category Display Settings
  2. Specify the display behaviour of Product Thumbnails


  1. Why can't I see the 'Wish List' or 'Star Ratings' elements in my Shop Category views?
  2. Why won't the 'Add to Cart' button appear in my Product Category views?

Screen illustrations

Clicking this icon will display an illustration relevant to the step being described:   Click this icon to view illustrations


Product Category Display Settings

Tip: Preview changes

From the Category Preview window provided on each Display Settings page you can view how changes will appear.

Each time you make an adjustment, press the Save Changes button before previewing your changes.

Your customers can choose their preferred method of browsing through your products, with Grid, List and Mini views provided (refer to the illustration below).

  1. Go to Dashboard > Design > Categories 
  2. Select either the Grid View,   List View or Mini View navigation tabs and set each preference as outlined below.
  3. After making any changes, press the Save Changes button before navigating to the next View navigation tab.

Display Settings: Grid View, List View & Mini View

  • Category Image :  Display the category image that represents the category.
  • Product Image:  Display product thumbnail images.
  • Product Title:  Display each product's title.
  • Price:  Display each product's price.
  • Recommended Price:  Display each product's recommended retail price. If a recommended price field has not been activated from Preferences,  the field will not appear regardless of the setting you choose here.
  • Breadcrumbs:  A “breadcrumb” refers to the URL path that displays at the very top of your category pages. Online shoppers use breadcrumbs as a reliable form of navigation. A typical breadcrumb will appear as:
    shop > category > subcategory > productname
  • Add to Wishlist:  If the Wishlist module has been activated on your website, this option provides an 'add to wishlist' icon similar to the 'add to cart' button.
  • Add to Cart:  Provide regular shoppers with the means to add products to their cart without first having to navigate into a product page.
  • Star Reviews:  Product ratings provided by customers and visitors alike can work towards establishing credibility to your business. When selected, this option displays the familiar "5-Star" rating icons beneath each product. We recommend that you activate this option once you have built a fair level of product ratings within your shop.
  1. Once you're satisfied with your changes, go to > Publish
  2. Press either the Preview or Publish buttons to have your  changes take effect.

Top of page

Specify the display behaviour of Product Thumbnails

This section allows you to set the size of your product thumbnail images as they're presented in each shop category View.

  1. Go to Dashboard > Design > Categories
  2. Select either the Grid View , List View or Mini View navigation tabs to set the product thumbnail preferences for each view.
  3. Each time you make an adjustment, press the Save Changes button before previewing your changes in the Category Preview window.
  4. Use the following guides to adjust your image settings:
  • Dimensions: Enter a numerical value in pixels for the preferred image dimensions of width and height. Leaving one field blank will prevent your product thumbnail images from being cropped 
  • Crop & Resize:
    • Cropped to Size: Recommended for most shops, this option will shrink the image and crop it down to the exact dimensions entered into the Dimensions numerical input fields for width and height.
    • Fixed Proportions: If the product's image aspect ratio is important, this option will shrink your product thumbnail so that it's no bigger than the specified dimensions.
    • Padded: Shrink the image so that it is no bigger than the given dimensions while retaining the same aspect ratio, and then pad the image so it exactly matches the requested dimensions.
  • Flags: Product Flags help further promote products by placing a visual promotion flag over the product's thumbnail image. For Product Flags to appear in each Display View, select the appropriate checkboxes.
  1. Once you're satisfied with your changes navigate to > Publish
  2. From the Publish page press the Publish button to make changes take effect or the Preview button to first preview changes before sending your website changes live to the Internet.

Top of page

Why can't I see the 'Wish List' or 'Star Ratings' elements in my shop category views?

Both features are optional and may not have been provided during your website build. If in doubt contact your sales consultant or a member of your support team (contact phone numbers are provided at the bottom of this page).

Why won't the 'Add to Cart' button appear in my Product Category views?

When a product is provided with compulsory Product Options such as size or colour, an option must first be selected before the product can be added to the customer's shopping cart. For this reason, the 'Add to cart' button is replaced with a 'View' button.

Top of page

For free technical support, please contact or call (02) 8904 7500