Publishing your product catalog online is important to keep your customers up-to-date of your latest products and prices. One of the most useful modules in Comdev Web Builder 2.0 is the Product Catalog tool. The Product Catalog tool lets you upload unlimited products by filling in the details and image files in form format. You can add multiple product categories as well.
This tutorial will teach you the basic to add, view, edit and delete your product information in the website as well as creating product categories.
|
Adding Product Category
|
1. In your Comdev Web Builder 2.0 administration area, click on the Product icon on your left menu. Then, click on Category. (Figure 1a & Figure 1)
|

Figure 1a Welcome to Comdev Web Builder 2.0
|
|

Figure 1 Let's get Started
|
2. To create a new product category, fill in the Category Name and choose its Parent Category. The default parent category is Top, which means the category that you are creating is a main category. You can leave Description and Thumbnail Picture blank if you wish. (Figure 2)
3. Click on the Add button. The page reloads and you will find the new created category highlighted in the category list below. (Figure 3)
4. If you choose a parent category which is other than Top, the created category will become the sub category of the parent.
5. Please note that you have to create at least one category before you can add any product.
|

Figure 2 Adding a category
|
|

Figure 3 A list of categories
|
|
Update or Delete a Product Category
|
1. The category list below the page shows the entire category you have in your product catalog. (Figure 4)
2. Click on the icon to view the category details. (Figure 4)
3. Re-enter the category details and click on Update if you wish. (Figure 5)
|

Figure 4 Selecting a category from the list
|
|

Figure 5 Change category details
|
4. Click on the Delete button to delete the category. All the sub categories will automatically become main categories. The products under the deleted category will be assigned to its parent. (Figure 6)
|

Figure 6 Removing a category
|
|

Figure 7 Removed category is no longer listed
|
|
Adding a Product
|
1. To add a product, click on the Add Product tab. (Figure 8)
|
2. You will see a form for you to fill in to enter your product details. Enter the fields accordingly. Below are the explanation of each field.
| Fields |
Description |
| Category |
Choose the product category that you have created for this product. |
| Product Code |
Enter an unique product code if any. |
| Name |
Enter the product name. |
| Description |
Enter the brief description of your product. Brief description is displayed in thumbnail catalogs. |
| More Description |
Enter the more detail description. This will be shown in the Product Detail page. |
| Thumbnail Picture |
Browse the image file (JPG or GIF). Recommended 140W x 110H to 160W x 118H in pixels. |
| Larger Picture |
Browse the larger image file. Recommended 300W x 220H to 350W x 260H. |
| Price |
Enter the prices of the product. If left blank, it will become N/A by default. |
| New Item |
Check if the product is a new item. A icon will appear beside the product name. |
| Shopping Cart |
Check if you want to enable picking product into shopping cart. |
| Stock Available |
Check by default. Uncheck will show Out of Stock status. |
| Colour Option |
Enter if your product is available in multiple colour choices. |
| Size Option |
Enter if your product is available in multiple sizes. |
|
3. After filling all the product details, click on the Add button. (Figure 9)
|

Figure 8 Add product page
|
|

Figure 9 Your first product
|
4. Go to your website and browse for the specific product category. You will be amazed how easy that you have added your new product in your website. (Figure 10a & Figure 10)
|

Figure 10a Going to your website
|
|

Figure 10 Browsing catalog
|
|
Product List
|
1. Click on View Product. You will find a list of products that are in your online product catalog. (Figure 11)
2. The list shows Code, Name and Category. You may sort the list by clicking the icon. (Figure 12)
|

Figure 11 A list of products
|
|

Figure 12 Sorting the list
|
3. Click on to view the product details or click on to delete the product at instant. (Figure 13a & Figure 13)
|

Figure 13a Pick a product
|
|

Figure 13 Delete a product instantly
|
|
Updating Product Details
|
1. Updating product details is similar to the Add Product procedure.
2. After you click on the icon in the product list, you will see the similar form as adding a product but with all the product details filled. (Figure 14)
3. Re-enter the information as you wish, browse for new image files, update new prices, etc. and click on the Update button below the page. (Figure 14)
4. Once again, click on Delete if you wish to delete the product. If you do not want to do anything, just click on Cancel. (Figure 15)
|

Figure 14 Update details
|
|

Figure 15 Removing a product
|
Conclusion
The Product Catalog tool is useful for you to maintain your online product catalog in your website by your staff or even you can do it yourself. It is an efficient and cost saving method for you to distribute your products information to all your customers and business prospects. We hope this tutorial can be much helpful to your business.
For more Tips and Tutorials that are related to this topic, please read:
|