You are reading this tutorial because you have a website powered by the Joomla! content management system. Congratulations!  Joomla! is one of the best ways to run a website. It is dynamic and expandable, with a huge community of developers and users (see http://www.joomla.org for more info.)

Click here to download this tutorial. 

This tutorial assumes that you have installed the Virtuemart shopping cart component for Joomla! It is available free for downloading at http://www.virtuemart.net/.

Virtuemart the e-commerce system for Joomla! websites is a great way to run an on-line store. In this tutorial, we look at how to add products and images of products to Virtuemart. This tutorial assumes that you know how to login to the back end of your Joomla! website. If not please see the tutorial "How To Log In To the Back End" and "A Tour Of The Joomla! Back End." These are available at http://www.floatingworld.ca/.

We start our tutorial on the home page of the administrator back end of your website. On the administrator navigation bar select "Components", then click "Virtuemart":

This will take you to the Virtuemart administration area:

The Virtuemart Administration area has a list of icons to help you get to often-used areas of Virtuemart, as well as a horizontal navigation bar that allows access to all areas of the Virtuemart component.

Hover over "Products" on the navigation bar and click on "List Products":

This will take you to the product list for your store:

Since we are creating a new product, we will click "New" at the top right of the screen (see above image).

Now we are in the "New Product" area:

In order to successfully create a new product, we must enter at least the SKU, name, and product price, and assign the product to at least on category (you can create more categories by pressing "Product">"Add Category" from the Virtuemart navigation bar.)

The SKU can be anything. It will be the code that it is used to identify each unique product type.

For this example, we created a new product called "Bonsai Trees."

Notice that we selected the "Trees" category. You must select a category for your product. If you haven't created the category yet, you must go back to the main Virtuemart administration area and create a new category.

Next, we added short and long product descriptions for the product:

You don't need to fill out the product descriptions, but it is useful to add this information.

Now we proceed to the next tab called "Product Status":

Here we add the amount of product in stock (optional) and the different attributes. Since our bonsai tree comes with a choice of blue or red pot, we must add a "pot color" attribute. We add a new attribute by first stating the attribute, followed by the choices that correspond to that attribute. Since there are two choices of pot color, we typed in: Pot Color, Red, Blue; it's important that there is a semicolon after the last color choice. If we want to add another set of attributes, we would simply add it after the first set of attributes.

Next, we select the "Product Dimensions and Weight" tab. We enter the length, width, and height, weight, and units of measure:

When we have entered this info, we proceed to the "Product Images". To add an image of the product we select the browse button beside the "Full Image" input box:

Clicking the "browse" button will bring up a pop up window. Use this window to navigate to the desired image on your computers hard drive. Important: The file size of the image is important! Do not upload any picture with a file size of more than 80-100 K. This is because large image files will take a long time to download when someone visits your website.

When you have found the desired picture, click "Open" to select the image.

Make sure that the "Auto-Create Thumbnail" button is selected. This will create a small image that will appear on the front end of your website.

To enter all this information onto the website, we must click the "Save" button on the top right corner.

Once saved, a "Product Add Results" screen will appear. If this screen does not appear, your product has not been successfully saved.

The "Product Add Results" screen will display all the information you have entered about you product.

We have now successfully added a new product.

This concludes out tutorial on how to add products to the Virtuemart component of a Joomla! website. We hope it is useful to you. Should you have any questions, please don't hesitate to call or email Floating World Web Development.