What is a Product Item
Any product you wish to sell or make purchasable in your store should be added as a Product Item.

Product Items are what distinguish your web-store from a web site. They contain the pricing information behind them that make the shopping basket functionality active.

You will notice an extra tab - the Item Pricing tab - becomes available when a Product Item is selected in the List View. It is on this tab that all pricing and product variable information is inserted for that particular Item.


Adding a Product Item

To add a Product Item to a page,
1. Ensure that the page you want to add the Item to is selected in the Tree View
2. Click the red 'Add Product Item' button.

This will add a Product Item onto the page and will be displayed in the List View with its relevant icon.


Giving the Product Item a name
To name the Item selected in the List View, insert a name in the 'Name' field.

The name you insert here will also be displayed in the List View.


Hiding the Product Item name
The name of your Product Item, unless otherwise specified, will always appear as part of the Product Item on the page.

You may wish to hide the name so that it is not visible on the page. To do this you will need to select (or build) a Product Item template that does not include the Item name.

Note: The Product name is important if you have an 'expanded view' for that product, as it is the name that becomes the default 'see expanded view' function.

The image also performs this function.

If you choose to hide the Product Item name you should consider inserting a 'More' Button so that your customers have an easy way to see the 'expanded view' of the product.

A 'More' Button can be added on the Product Item Template Builder, (though is available in a number of the pre-built templates too).


The difference between Normal View and Expanded View
Every Product Item you add to your store will by default be displayed on the page as the Normal View.

However you also have the option to expand on any Product Item in the store, providing more information and perhaps more detailed imagery. This is known as the Product's 'Expanded View'.

The Expanded View can only be accessed by clicking on a link in the Normal View of the product.

This link can be one of 3 things:
1) The Item name
2) The Item image
3) A 'More' button (this can be added in the Product Item Template Builder, though is available in a number of the pre-built templates too)

The Expanded View is not a separate EROL page. All of the information contained in the Expanded View will load with the Normal View when a user accesses the page. The Expanded View will, however, appear by itself on an apparently separate page.


Letting the customer purchase from the normal view only
To allow customers to purchase your product from the 'normal view' only, select (or build) a 'normal view' template that includes the Product Selectors (i.e. Qty field, Primary Options dropdown, Secondary Options dropdown etc.) as well as a 'Buy' button.


Letting the customer purchase from the normal view but also have an expanded view
To allow customers to purchase your product from the 'normal view' but also have an 'expanded view' select (or build) a 'normal view' template that includes the Product Selectors (i.e. Qty field, Primary Options dropdown, Secondary Options dropdown etc.) as well as a 'Buy' button.

You can, but do not need to, include a 'More' button in order to access the 'expanded view' as clicking on the item name or the image will reveal the expanded view.

You may wish to include the 'Buy' button and the Product Selectors in your expanded view as wel.


Letting the customer purchase from the expanded view only
To allow customers to purchase your product from the expanded view only select (or build) a normal view template that doesn't include any Product Selectors and then select (or build) an expanded view template that includes the Product Selectors as well as a 'Buy' button.


Letting the customer purchase from the normal view and the expanded view
To allow customers the option to purchase your product from the normal view as well as from the expanded view, select (or build) a 'normal view' template that includes the Product Selectors and a 'Buy' button then select (or build) an 'expanded view' template that includes the Product Selectors and a 'Buy' button.

The customer can then choose to buy from either the 'normal view' or from the 'expanded view'.


Adding 'Description' to a Product Item (Normal View)
The product 'Description' field provides an area to insert a short description for your product. There is no limit to the length of the description you can insert here, however it is recommended that you keep lengthy descriptions for the Expanded View.


Formatting Product Item 'Description' (Normal View)
To format text added to the 'Description' field or to add any further elements such as extra images, HTML tables, Flash animations etc. you will need to double-click the field or click on the '<…>' button to launch the EROL HTML Editor.

The HTML Editor will allow you to modify, or add to, your Product Item details.


Adding a Product Item image (Normal View)
Your product images are probably the most important visual element in your store.

To insert a product image:
1. Click 'Browse' and search for the image from the EROL images folder. If your image is outside of the EROL images folder, you can locate it and EROL will save it to the images folder.
2. Once selected the image will be added into the image preview field.

The image you add here will become a link to either your expanded view or indeed to add the product to the basket (if you don't have an expanded view).

If the image will be added to the basket, and your store has a Basket Frame, EROL will compress the dimensions of the image to produce the tiny product thumbnail image that gets placed in the Basket Frame.


Optimum size for a Product Image (Normal View)
It is advisable that your product images do not exceed 150 pixels in width. In order to maintain a neat appearance for your store, try and maintain a constant image width for all the product images.

Always modify the dimensions of an image using a graphics program and NOT by altering them using the image Width and Height fields in EROL as this will cause the image quality to degrade drastically.

In terms of file size, your Product Image (Normal View) should not exceed 10k in size. Anything over this will slow down your page loading time.


Adding a 'Description' to a Product Item (Expanded View)
Click the Expanded View sub-tab to access the input area for your product's Expanded View.

The product 'Description' field here provides an area to insert a longer, more detailed description for your product. There is no limit to the length of the description you can insert here.


Formatting the Product Item 'Description' (Expanded View)
To format text added to the 'Description' field for the product's expanded view, or to add any further elements such as extra images, HTML tables, Flash animations etc. you will need to double-click the field or click on the '<…>' button to launch the EROL HTML Editor.

The HTML Editor will allow you to modify, or add to, your Product Item expanded details.


Adding a Product Item image (Expanded View)
Just like the normal view, the image you place in your expanded view is very important as it allows the user to get a close up and detailed look at your product.

To add an expanded product image:
1. Click 'Browse' and search for the image from the EROL images folder. If your image is outside of the EROL images folder, you can locate it and EROL will save it to the images folder.
2. Once selected the image will be added into the image preview field.

Optimum size for a Product image (Expanded View)
It is advisable that your product images do not exceed around 300 pixels in width, although this can be exceeded if you feel it necessary.

Always modify the dimensions of an image using a graphics program and NOT by altering them using the image Width and Height fields in EROL as this will cause the image quality to degrade drastically.

In terms of file size, your Product Image (Expanded View) should not exceed 20k in size. Anything over this will slow down your page loading time.