If you're and advanced HTML user and know how to connect to your store via FTP, you can customize your navigation menus by adding images. If you've already created your store's categories, follow the steps below to use images instead of text in your navigation menus.

Selecting Images for a Navigation Menu

To assign images to your store's navigation menus:

  1. Go to Design > Navigation Menu in your Admin Area.
  2. Change the Menu Type to Rollover Images.
  3. If your store's navigation menu is on the left or right side, set the Alignment to Vertical; if the navigation menu is at the top, set it to Horizontal.
  4. For each category, you need to create 2 graphics and name them in the following format: menu#_##.gif and menu#_##_over.gif, where # is the Navigation Menu Number (1, 2, 3, etc.) and ## is the (numeric) Category ID that the graphic is to be associated with. For example, if a category is to be assigned to Navigation Menu 1 and its category ID is 25, then the graphic file names would be: menu1_25.gif and menu1_25_over.gif
  5. Once your graphics are created and properly named, upload them to your store via FTP to the following location: templates/XX/images/template where XX is the name of the theme you're using (the same number shown after Theme on the Design > File Editor).

For example, if you're using the Essence theme, then the path would be: templates/Essence/images/template.

Editing the CSS Template

If your images do not show up, you may need to edit to the .css template. Before you do this, you should make a copy of your theme in case you need to revert to it.

1. Go to Design > File Editor.

2. Click on the Template xx.css link in the Shortcuts column (where "xx" is the theme ID).

3. Look for either of the following lines of code, depending on whether the navigation menu is along the top or down the left side of the page:

#top_nav td img

#left_nav td img

Note that if this code isn't in the template.css file you may find it in navigation.css.

4. Comment out the appropriate line by inserting /* in front of it and */ afterward.

/* #top_nav td img */

/* #left_nav td img */

Please be aware that doing this may cause bullets to display in other nav menu display types.

Repairing Broken Image Links

Once a menu type with images is set, broken image links contained within the navigation portion of your storefront may appear. To fix these broken links:

  1. Right-click on the broken image and view its properties to determine the image name and location within your store directories.
  2. Create your own custom images and rename them to match the names of the images being used on your storefront.
  3. Connect to your store via FTP to upload the images to the appropriate directory for the store theme.

Once this is done, these custom images will appear within your store's navigation menus as configured within the Navigation Menu page.

Summary

Navigation menus are an integral part of any website, and taking the time to customize yours can help you stand out from the competition. For more information, see the "Advanced Navigation Menu Customization" section of our article on customizing navigation menus.

Did this answer your question?