Categories

Before you put products on the shelf, you should set up and organize product Categories for your store. Once your categories are configured, you’ll have a much easier time keeping track of your inventory, and customers will have an easier time finding the products they want to buy.

Contents

Getting Started

There are many different ways to configure categories within Volusion, as well as some additional uses for the categories feature. Follow this guide to learn the different methods for creating categories and sub categories, and a few special tips and alternate uses for categories.

Part I – How to Access the Categories Page

To get started, go to Inventory > Categories in your Admin Area. 

You’ll see the Categories page, showing the menus in your template and the categories within these menus. 

Click on the arrow icon in front of a category name to expand it and show the subcategories it contains. Click the arrow again to hide the subcategories.

From this page you can Add, Edit, or Delete categories; view a list of all categories; and edit the menu titles. You can also rearrange categories by dragging and dropping them into place within the same menu or into another menu.

Adding a Category

To add a category, click Add. This will display the Category page as described in Part II, below.

Editing a Category

To edit an existing category, hover over the category row and click Edit. This will display the Category page as described in Part II, below.

Adding a Subcategory

To add a subcategory to an existing category, click Add Subcategory in that category's Actions column. This will open the Category page as described in Part II, with the Subcategory Of field populated.

Note: It is advised that you restrict the number of subcategories within a single category to 100 or fewer. Having larger numbers of subcategories may result in your pages timing out.

Deleting a Category

To delete a category, hover over the category row and click Delete. You will be asked whether you want to Delete This Category Only or Delete This Category And Its Subcategories.

Viewing a Category

To view a category as your customers will see it, click View in Store in that category's Actions column. This will open the store category page in a new browser window.

Moving a Category

You can drag and drop categories within and between menus. When you move the cursor over a category or category row in a menu, click-and-hold on the category name with your cursor and drag it to the required position.

You can turn a category into a subcategory by dragging it after and slightly to the right of a category (or subcategory), and a subcategory to a category by dragging it to the left.

Note that since this feature is JavaScript based, the drag and drop function will stop working once the Update Categories & Subcategories page becomes too full, and the Inventory > Categories page will default to the View List view.

The number of categories at which the drag and drop will stop working depends on the HTML customization and image / description information in each of your categories. If your categories have intense customization and large images, your drag and drop feature may stop working sooner than if you have only basic information for each category.

Editing Menu Titles

Click Edit Menu Title to open a pop-up window where you can edit the menu title.

Listing All Categories

Clicking View List will display all categories set up in your store. From here you can add and edit categories or access category settings (that is, those that apply to all rather than individual categories) by clicking Settings.

Part II – How to Create and Edit Categories

To create a new category:

  1. Go to Inventory > Categories.
  2. Press Add New Menu Item

To edit an existing category:

  1. Go to Inventory > Categories.
  2. Hover over the category of your choice.
  3. Click the pencil icon in the corresponding row. 

Alternatively, you can click View List and click the appropriate category ID number on the following page.

The Basic Category Info section displays by default.

Basic Settings

ID

The automatically created Category ID number. This cannot be edited.

Category Name

Enter the name of the category as it should be displayed on your storefront.

Subcategory of

You can add your category as a subcategory of an existing category, if needed. Otherwise skip this field.

Locate the category or subcategory to add it to from this list. If you have a large number of categories you may need to scroll to the bottom of the list and click More to display the next group. To return to a previous group, scroll to the top of the group and click Previous.

Select the radio button for the category you want to designate as the parent.

To search for a category, enter any part of its name in the Search Categories field. To clear the searched value, click the blue X icon at the right of the field.

Hide Category

Select Hide Category if you don’t want it displayed on your storefront.

Show in Menu

If this is a category, select the menu in which it is to be displayed from this drop-down menu. If this category was set as a subcategory in Subcategory Of, then this menu will be disabled.

When you’re finished configuring your category settings, click Save. Congratulations; you’ve created a category! Once you’ve set up your categories, you can add images to make them stand out.

Inside a Category Management page, the Category Images tab contains the following fields:

Category Images

The Category Images tab is where you set up images for this category. For detailed information about category and subcategory images, see How to Use Images to Enhance Category Pages.

Banner Image

The category image displays on the category page when a customer selects this category.

Click Add Image (or Replace Image if one is already shown) to display the Add / Edit Banner Image dialog box. Here you can select an image to be displayed for this category.

Click the Advanced Options link if you want to specify a maximum size (height, width, or both) for this image. You can also specify that you want to remember this setting to use for all categories. Click here for tips on banner sizing.

Subcategory Image

You can display subcategory images on on a parent category page according to the parent category's settings.

Click Add Image (or Replace Image) to display the Add / Edit Subcategory Image dialog box and select an image.

Click the Advanced Options link if you want to specify a maximum size (height, width, or both) for this image. You can also specify to use this setting for all categories.

Advanced Settings

If you want to further control the look and behavior of categories, there are additional features under Advanced Info.

Please refer to Category Settings for a full list of the variables that can be configured here.

Part III – Tips and Special Settings

How to Create Drop-Down Menus

The Rollover Colors Popout menu type enables sub menu items to pop out from main menu items when moused over, like a drop-down menu. Additionally, this menu type lets you assign text colors, background colors, and on-hover colors to menu items.

To create drop-down menus for your categories, go to Design > Navigation Menu and select the Rollover Colors Popout menu type for your navigation menu.

The width of the menu popouts can be adjusted, as well as the number of levels (between 1 and 3) the popout system is allowed to go when mousing over elements.

How to Post to Facebook and Twitter From a Category Page

You can post to your Facebook and / or Twitter pages directly from a category page by clicking the Share button.

You’ll see the Share dialog box with the URL for the category page (in shortened bit.ly format) in the message window. Simply sign in to Facebook and / or Twitter, enter a comments into the message window, and click Share.

For further information, see Posting to Facebook and Twitter From Within Your Store.

How to Configure Additional Navigational Menus

Volusion allows the creation and display of product categories up to 8 navigational levels deep. These navigational levels are represented on your storefront in a number of ways, depending on the template you’re using, but are typically shown in vertical, left-hand menus on the storefront. Each menu will be delineated in some fashion, again depending on the template in use.

By default only the first and second navigational menu levels are active. Any categories configured to nav menus 3-8 will not display on the storefront until you adjust your settings in the Admin Area.

To enable additional navigational menus within your store:

  1. Go to Design > File Editor.
  2. Under Shortcuts on the right-hand side of the page, click template_xx.html, where "xx" is the number corresponding to the active template within your store.  The code you see is the main HTML template code that controls display elements of your storefront. Create a backup of this code before making modifications to the template in case you need to restore the template to its original state.
  3. Search the template code for the following string of text: "display_menu_1". There will be a large block of HTML code surrounding this text. This is the HTML code that creates each individual navigational menu level. Navigational menus 1 and 2 are already enabled by default. You may find that the template already has further menus set up but hidden by <!-- and --> tags. Removing these will make the menu code active.
  4. Click Save to finish.
  5. If the additional menus are not set up this way, you will need to copy and paste the block of code that generates each navigational menu to create additional levels. The HTML code to copy and paste will look like this:
<div
id="display_promotions_20">Display_Promotions</div>
<table width="155" border="0" cellspacing="0"
cellpadding="0">
<tr> <td width="155" height="22" align="right"
class="navtitle colors_menutitletext"
bgcolor="Menu1_Title_BgColor"> Menu2_Title<img
src="vspfiles/templates/55/images/clear1x1.gif" width="5"
height="1"></td>
</tr>
<tr> <td width="155"> <div
id="display_menu_1">Display_Menu 1</div>
</td>
</tr>
</table>
  1. Copy the HTML from the template file – equivalent to the sample above – and paste it below the last line of the code corresponding to the last navigational level that has been set up within the store template.
  2. Change the numeral in the text "display_menu_1" to reflect the navigation menu that is being configured (3-8).
  3. Once you’ve made this modification, click Save Changes to update the template file.
  4. On the Categories page, check View All Menus to show the new menus.

The first step to creating additional navigational menu levels is now complete. Once the site has been published (or immediately after clicking Save Changes if your store if configured to auto-publish), the additional nav menu levels will appear on your storefront.

Depending on the template you’re using, you may find that the style properties of the new menu levels don’t match those of nav menus 1 or 2 due to CSS code that must be implemented for each menu.

If this is the case, you need to reconfigure the navigational CSS to correct this problem:

  1. Go to Design > File Editor.
  2. Use the drop-down menu to navigate to the following path: wwwroot/v/vspfiles/templates/nn/css/Navigation.css ("nn" is the template number). The CSS file will open in the file editor and you’ll see a series of one-line CSS code definitions (you may need to scroll down to find them). Each of these lines of code should begin with "#display_menu_x.nav", where "x" represents the menu level.
  3. Highlight and copy each line of CSS code that pertains to one level of the navigational menu (that is, all lines of CSS that pertain to nav menu 1).
  4. Paste this code below the last line of code on the page.
  5. Rename the "#display_menu_x" within each line that was just pasted to refer to the nav menu level that was just created in the steps above.
  6. Repeat this process for any additional nav menu levels that were created.
  7. Click Save and publish the site, if neccessary. The new nav menu levels will be configured to have the same CSS styles as the pre-existing nav menus within your storefront.
  8. To implement style attributes in the additional nav menu levels different from the pre-existing nav level 1 or 2, edit the CSS values for each nav menu that are contained within the Navigation.css file.

You can now use the Edit Menu Styles button to edit the look and style of the menu. See the Navigation Menu user guide for information on creating and styling navigation menus.

We highly recommend that you copy the original HTML code within the File Editor and create a backup of the template before making any modifications. Remember that modifications to this file directly affect the display of your storefront.

How to Create Custom Pages Using Categories

Categories and sub-categories do not necessarily have to be used to display a list of products. You can use the Category Descriptions fields to create articles instead.

Example

You need to let your customers know some specific shipping information pertaining to custom freight shipping rates. You want to provide a link to this information on every page of your store. One way to do this is to use a category to provide a link in the navigation menu to the shipping information.

To configure a link as presented in this example:

  1. Go to Inventory > Categories.
  2. Click Add New.
  3. Name the new category "Freight Shipping Information".
  4. From the Show in Menu drop-down menu, select the menu you want the category to appear in.
  5. Under Advanced Settings, on the SEO tab, configure SEO settings for the category so that the category and its information can be properly indexed by search engines.
  6. On the Category Descriptions tab, in the Category Description field, enter the text or HTML you want customers to see when they click the link. You can use the HTML Editor to display a table full of data or even an HTML image link to display an image or PDF file.
  7. When you’re finished editing the category, click Save.

The newly created category will now be a clickable link within the selected menu. Clicking on the link will take visitors to the category page which will display the custom text, images, or HTML that was created in the above steps.

How to Link to External Sites Using Categories

In some cases, you may want to redirect customers to an entirely different page site.

Example

You want to provide links to your blog on every page of your store. To do this while maintaining the overall look and design of your store, use the Alternate URL field within a category. Here's how:

  1. Go to Inventory > Categories.
  2. Click Add New.
  3. Name the new category "Visit Our Blog".
  4. From the Show in Menu drop-down menu, select the menu you want the category to appear in.
  5. In the Advanced Settings section, on the SEO tab, configure the SEO settings for the category so that the category and its information can be properly indexed by search engines.
  6. On the Misc tab, enter the URL of your blog (for example, "http://www.myvolusionstoreblog.com") in the Alternate URL field.
  7. Click Save to finish configuring the category.

Once this is complete, a link labeled Visit Our Blog will appear in the selected menu that, when clicked, will take customers to your blog.

Summary

Setting up categories is essential to selling online and Volusion provides a comprehensive set of controls for you to better organize, control, and present your products to customers. The category system is also helpful in conveying information to customers in a manner that is quick and easy to configure and maintain.

Watch the Categories video series