Enhancing Drupal Ubercart Product Listings - dummies

Enhancing Drupal Ubercart Product Listings

By Lynn Beighley, Seamus Bellamy

The basic product listing from Drupal Ubercart includes a field for photos, which can enhance your listing. The product listings aren’t organized into catalogs, but should be. These are important features that will make your site more professional, and they are worth spending a few minutes to add.

Using images

Your products won’t sell if the product page doesn’t have any pictures displaying the product. To add images to your product listings, follow these steps:

  1. Choose Store→View Products.

  2. Click the product to which you want to add an image.

  3. Click the Edit tab.

  4. Scroll down to the Image section of the form and click Browse.

    This opens the File browser as shown.


    Keep the image a relatively small height and width if possible. A reasonably good size is 250 x 250.

  5. Click Save.

Follow the preceding steps for each additional image you want to include for the same product.

Adding a catalog

To add catalog pages and organize your products by type, follow these steps:

  1. Click Modules on the Dashboard menu bar.

  2. Under the Chaos Tools Suite section, select the Chaos Tools check box.

  3. Under the Views section, select the Views check box.

  4. Under the Ubercart – Optional section, select the Catalog check box.

  5. Click Save Configuration.

  6. Choose Structure→Taxonomy.

  7. Click Add Terms next to Catalog.

    This opens the Add Term form.


  8. Enter a product category in the Name field.

    For example, if you had an online pet store, you might use Dog Toys or Cat Food for a term name.

  9. Click the Browse button to locate and upload a small image and add a description in the Description text box if you want.

  10. Click Save.

  11. Repeat Steps 7 through 10 until you’ve created all the categories you need.

Now you’re ready to add products to your catalog. You see a box on your Add Content→Product forms with all of the product categories you just created. Choose the appropriate one for the product you’re adding. You can also put a product into more than one category by pressing the Ctrl or cmd key while selecting categories.

To see your catalog, browse to /catalog on your site. For example, http://yourdrupalsitehere.com/catalog. The example is shown.


You can add a description to your catalog by choosing Structure→Taxonomy. Click Edit Vocabulary next to Catalog. Enter a description in the Description field. You can also change the name of your catalog by changing the Vocabulary name on this form. For example, you might want to call it Our Products.

You can create a primary navigation link so shoppers can find your product catalog. Follow these steps:

  1. If you haven’t done so, move your Main links to a block on your site by choosing Structure→Blocks.

  2. Move your Main links to the region of your choice.

    The region chosen in the example was the Header region.

  3. Click Save Blocks.

  4. Choose Structure→Menus.

  5. Click Add Link next to Main menu.

  6. In the Path text box, enter catalog.

  7. In the Menu Link Title text box, enter Catalog.

  8. Click Save.