How to Use Images to Enhance Category Pages

Most merchants are already familiar with category pages, and use them to organize products so shoppers can easily find what they're looking for. You can also take advantage of category page settings to make your site look more professional, cohesive, and engaging.

You may have noticed that most bricks-and-mortar stores have signs that hang over their various product departments. You can use category graphics to introduce your product offerings in a similar way, while at the same time adding extra polish and professionalism to your site.

The following tips will help you present each category page like a product showcase, whether adding an introductory banner graphic, clickable subcategory images that link to your subcategory pages, or both.

Uploading a Category Banner Image

A category's banner image is a graphic that displays at the top of a category page. You'll notice that most major online stores use these banner-style graphics, which typically include the name of the category or collection and are often accompanied by relevant imagery.

To upload a category banner image:

  1. In your Admin Area, go to Inventory > Categories.
  2. Find the category you want to add a graphic for and click Edit.
  3. On the category editing page, scroll down to the Category Images section and click to expand the area.
  4. Under the Banner Image heading, click Add (or Replace, if an image is already in place) to display the Add/Replace Banner Image dialog box.
  5. Browse your computer's files to select an image that will display for this category.
  6. Click Advanced Options in the pop-up window if you want to specify a maximum size (height, width, or both) for this image to resize to. You can also specify that you want to remember this setting to use for all categories.
  7. Click Upload.
  8. Once uploaded, the image you chose will appear under the Banner Image heading (note that the image may appear distorted in this view).
  9. Click View Live in the upper right corner of the page to see how your graphic looks on the storefront.

If you're not happy with the way your category graphic looks at first, you can adjust the image's size or resolution and upload a replacement image. To upload a replacement image, return to the category editing page and click Replace under the Banner Image heading.

Banner Image Position

Depending on whether or not you're displaying subcategories, you may want to change the position of a category's banner image on the category page.

To change the banner image position for a specific category:

  1. Go to Inventory > Categories and click Edit next to the relevant category.
  2. Expand the Advanced Info section and select the Category Display tab.
  3. Select one of the following options from the Category Graphic Placement menu:
    Absolute Top: Places the image at the very top of the page, above the breadcrumb trail and the subcategory listings.
    Top:
    Places the image below the breadcrumb trail and above the subcategory listings.
    Below:
    Places the image below the breadcrumb trail and subcategory list, but above the category's product listings.
  4. Click Save.

Tip on Banner Sizes

You may need to experiment before finding the right size for your category graphics, particularly if you have a left navigation menu. The width of your category graphic should be slightly less than the width of your template's content area in order to fit neatly above your products.

If you're unable to determine the width of your template's content area from looking at the template.html and template.css files (Design > File Editor), you can usually download an add-on for your web browser to assist with determining measurements.

Subcategory Images

There are a number of ways you can display the links to Subcategories on a main category page. Subcategory Display Mode 1 lets you display links to your subcategories in a table at the top or left side of a category page. You can learn more about this display mode in our Category Settings article.

The Subcategory Display Mode 2 setting helps create a richer visual experience for your shoppers by displaying subcategories as clickable images. 

Enabling Subcategory Display Mode 2

First, you'll need to make sure the parent category is set to display subcategory images, rather than links. If you have a category with multiple subcategories (e.g. 'Jewelry' as the main category, 'Earrings' and 'Necklaces' as subcategories), you should enable this setting in the parent category ('Jewelry').

  1. Go to Inventory > Categories and click Edit next to the parent category.
  2. Expand the Advanced Info section and select the Subcategory Display tab.
  3. Make sure the Subcategory Display Mode 1 menu is set to NONE (Hide) so that your subcategories don't display as links on the category page.
  4. Select one of the following options from the Subcategory Display Mode 2 drop-down:
    Thumbnails: Display each subcategory's image, name, and description.
    Category Graphics:
    Display each subcategory's image only.
    Responsive Thumbnails: Display each subcategory's image, name, and description responsively. See responsive templates for more information.
  5. Click Save.

Uploading A Subcategory Image

A subcategory image is the clickable graphic that represents a subcategory when using the Thumbnails, Category Graphics, or Responsive Thumbnails display mode. The subcategory image should be added within each subcategory ("Earrings," "Necklaces"), rather than the parent category ("Jewelry").

To upload a subcategory image:

  1. Go to Inventory > Categories and click the arrow next to a category name to expose its subcategories.
  2. Click Edit next to the subcategory you need to upload an image for.
  3. On the category editing page, click to expand the Category Images section.
  4. Under the Subcategory Image heading, click Add (or Replace, if an image is already in place) to display the Add/Replace Subcategory Image dialog box.
  5. Browse your computer's files to select a subcategory image that will display for this category.
  6. Click Advanced Options in the pop-up window if you want to specify a maximum size (height, width, or both) for this image to resize to.* You can also specify that you want to remember this setting to use for all categories.
  7. Click Upload.
  8. Once uploaded, the image you chose will appear under the Subcategory Image heading (Note that it may appear condensed in this view).

To view the new image, visit your storefront and click into the parent category for which you enabled Subcategory Display Mode 2. Note that you may need to include a subcategory's name as part of the graphic if you're using Category Graphics as the display mode. If you're using either Thumbnails or Responsive Thumbnails as the display mode, a title link will already display for each subcategory in addition to the subcategory graphic.

* If you're using the Responsive Thumbnails display mode with a responsive template, it's best to upload your images at a larger size. That way, the images will appear at the correct resolution regardless of the end user's device size.

Subcategory Display Columns

To set the number of columns for your subcategory image display, go to the editing page for the parent category and expand the Advanced Info section. Click the Subcategory Display tab and enter a value in the Subcategory Display Columns field. Entering a '3' in this field will cause your subcategory images to display in three columns.

If you choose to display multiple columns of subcategory images, your graphics will need to be small enough to fit side by side. If you display your subcategory images in one column, the graphics can be as wide as a category banner image would be.

Summary

When creating category banner images and subcategory graphics, remember that there are a variety of ways to present your products visually. Some merchants use lifestyle images, such as action pictures of the product in use, while others use isolated shots of products against a solid background. Still others choose something abstract, such as a background texture of grass to represent an "Outdoor" category, or a pile of scarves to represent an "Accessories" category.

If you're not familiar with graphic design software or would prefer to have your category graphics created professionally, you may want to consider hiring Volusion's design team or another provider to create them for you. Visit our design team's add-on graphics page for pricing and more information about the service.

Once your category and subcategory graphics are in place, there are a number of additional settings you can use to customize the look of your category pages. For more information, see Category Settings.