eCommerce sites

Ubercart‎ is the number one eCommerce module for Drupal.  By default it handles:

  • Images
  • Categories
  • Product options such as colour/size
  • Navigation
  • Shopping basket
  • Order and report view
  • Plus many payment providers and other add on modules

We're going to set up a shop with a category overview page showing images, category sub-pages with product thumbnails, a navigation that only appears on shop pages and a shopping basket that appears in the sidebar on all pages.

Product images

Ubercart creates a new product type called 'Product' and depends on Drupal to handle images so the first thing we need to do is set up images for your products.

  1. Go to: Content management > Content types > Edit Product
  2. Click on the 'Manage fields' tab
  3. Add a new field called 'Image' (or whatever you want), type 'File' and widget 'Image'
  4. You can just save the settings but may be worth having a browse through especially if you want a specific image to appear if you don't upload one
  5. Click on the 'Edit' tab
  6. Under 'Ubercart product settings' select the image field you just created
  7. If you want to have a zoomable image then you can install the ‎Lightbox2‎ module then set it up in 'Store administration' > 'Configuration' > 'Product settings' > 'Edit' > 'Product settings'


Categories are handled using Drupal taxonomy.  Different types of categories called vocabularies can be created on your site so first let's create a vocabulary for your shop categories:

  1. Go to: Content management > Taxonomy > Add vocabulary
  2. Call it something like 'Shop categories'
  3. Select the 'Product' content type

If you'll be regularly creating new categories it may be useful for for you to select 'Tags' in 'settings' and if you want products to appear in more than one category select 'Multiple select'.  You can always come back and change these settings later on if you wish.