LearnWebDesignOnline.com is proudly hosted by Hostmonster.com

1. Here we have already setup an tee-shirt product with a base price of $14.99...

If you want to learn more about how to setup product, see our tutorial on setting up products.
2. Now we want to add product attribute options such as size with values of "small", "medium", and "large" as in ...

3. In Zen Cart admin, go to "Catalog -> Option Name Manager" and insert size of type dropdown. If you are planning on having multiple attributes (such as color in addition to size), you can specify a number for the order field to control the order in which the attributes are displayed with lower numbers displayed first.

4. Now we want to enter the three values of "small", "medium", and "large" for the size.
5. Go to "Catalog -> Option Name Manager". Select option name size and enter small for the option value. Since we want to list this option first, enter "1" for the order. Click insert.

6. Do similarly to insert the values "medium" and "large" until you have ...

Note the order number of each item.
7. Now we want to assign these attributes to our product. Go to "Catalog -> Product Price Manager"

Select the product, click display, and click "Attribute Controller" button.
8. Now you come to a screen filled with complex controls. Many of these have to do with advanced topics that are irrelevant in our scenario. So just look only at the controls pointed out in the following diagram....

Highlight "size" in the option name, highlight "medium" in the option value and click "insert". It doesn't matter which attribute option we add first. We happen to be adding "medium" first.
9. We see that size of medium has been added successfully. Now we add size of "large". Although price of tee-shirts are usually priced the same regardless of size, for the purpose of this tutorial, we want to charge $1 extra when people order the large size. So we add the value 1 in the price field after selecting "size" and "large" ...

Click insert.
10. See how it now shows that the large size cost $1 more in addition to the base price of the product ...

We can also give a discount for selection of certain attributes. In the picture above, we give a discount of $1 for the small sizes by putting a minus sign in the price prefix field and "1" for the price. After selecting size of small, we click insert as usual.
11. Now that we have our three attribute values in place, we click "update sort" to put them in the correct order based on the order number that we had specified for "small", "medium", and "large" earlier.

12. This way we are sure to have the droplist list show the values in the order of "small", "medium", and "large"...

13. Note that the price does not automatically update when you select priced attributes such as small or large. Although it does shows "starting at:" in front of the price, and the price does update after you click "Add to cart".
If you would like the price to change dynamically upon selection of the droplist of various prices, consider installing the Dynamic Price Updater mod as listed in the "ZenCart Useful Mods".
