Setting up and Customizing Products

This article covers setting up and configuring the way products will display on your site. For details on managing and creating products within the admin, see Managing Products

In order to display Product attributes, you will need to add the relevant tag to your large product layout. This can be accessed via the Admin > More Customization Options > Online Shop Layouts > Individual Product - Large screen.

Using the Tag Insert drop-down, you can select and insert the {tag_attributes} which will render the attributes of a product when being viewed.

For details on how to set attributes for products, see Managing Products.

Setting up Product grouping

In order to display Product grouping, you will need to add the relevant tag to your product layouts. These layouts can be accessed via the Admin > More Customization Options > Online Shop Layouts > Individual Product - Large a Individual Product - Small screen.

Using the Tag Insert drop-down, you can select and insert one of the below tags:

• {tag_grouping} - displays grouped products in the dropdown menu
• {tag_groupinglist} - displays groped products as a list

For details on grouping products together, see Managing Products

Setting up Related Products (Cross-Selling and Up-selling)

Related Products can only be displayed on the large product layout. In order to display related Products, you will need to add the relevant tag to your large product layout. This layout can be accessed via the Admin > More Customization Options > Online Shop Layouts > Individual Product - Large screen.

Using the Tag Insert drop-down, you can select and insert one of the below tags:

• {tag_relatedproducts} - displays grouped products in the dropdown menu
• {tag_relatedproductslist,8} - used to only display the product image without any text
\
• {tag_relatedproductslist,7} - used to display grouped products as radio fields

If you require customers to see the related list before adding a product to the list then you may remove the Add to Cart and Buy Now options from the small product layout so customers are forced to click on a product and see its details. And hence see all the related products.

For details on how to add related products, see Managing Products.

Setting up Recurring Products

In order to configure recurring Products, you will need to ensure you have setup a Payment Gateway that is compatible with recurring billing.

For details on creating a recurring product, see Managing Products

For details on reucrring billing and invoicing, see Understanding Recurring Billing

Setting up Product Poplets

In order to display Product poplets, you will need to add the relevant tag to your product layouts. These layouts can be accessed via the Admin > More Customization Options > Online Shop Layouts > Individual Product - Large screen.

Using the Tag Insert drop-down, you can select and insert the below tag:

{tag_poplets,rowlength,width,height}

• rowLength - Specifies the number of poplet images per line.
• width,height - Specifies the dimensions of the thumbnail images; this system automatically creates the thumbnail images based on the original sized image data and the width and height specified.

Here's an example of the actual tag you could add to the Online Shop layout:

{tag_poplets,3,300,200} - This tag will display a Poplet gallery with thumbnails in 3 rows; each thumbnail will be generated with a width of 300 pixels and a height of 200 pixels.

For details on adding poplets to Products, see Managing Products

Setting up a Product browse panel

When you add {tag_browsepanel} to the main layout of your Online Shop, your customers will see a side-panel breaking down all products in the current catalogue by price and a break-down of all products in sub-catalogues

{tag_browsepanel} must be added in an Online Shop Layouts. The Overall Layout is a logical place for it.

Options include: {tag_browsepanel, hideOnSale, hidePriceBrackets, hideSubCatalogues}

Hide the On Sale: {tag_browsepanel, true}

Customizing Product Layouts

Small product layout (used to display list)

When a catalogue is being browsed and a list of products being displayed, each product uses the Small Product layout.

Product's name and the image are automatically set to link to the detailed (large) view of the product.

Here we describe some of the tags that can are used in this layout. For the complete list please see Tags - Quick reference.

{tag_addtocart} and {tag_addtocartinputfield}

These two tags render out the Add to Cart button and the quantity box respectively. When a user clicks on the Add to Cart button, the number of items specified in the quantity box will be added to the cart. A standard confirmation message is shown after the user has added items to the cart.

You can customize the Add to Cart tag in order to display a different text on the button or even use an image:

• To change the button text simply change the tag {tag_addtocart} to {tag_addtocart,Your Text}.
• If you want to use an image instead change the tag {tag_addtocart} to{tag_addtocart,<img src="YourImage.gif" />}. Replace the src="YourImage.gif" to a valid image path.
• If you want to force the user to view the details of a product before adding it to the car then only add the tag {tag_addtocart} to the Individual Product Layout (Large) only.

{tag_buynow}

This tag renders a Buy Now button. This button can be customized in a similar fashion to the Add to Cart button. The main difference between this button and the Add to Cart button is that after the user adds an item to the cart, they are redirected to the Shopping Cart page where they can see the summary of their cart and checkout.

{tag_totalprice} and {tag_totaldiscountprice}

When adding a price for products its possible to add retail and a sale price. The retail price is only used for display purposes. Use this price to indicate to the customer that the retail price was X but now they can get the product for Y. Y being the sale price.

There are two tags that you can use to display the selling price of a product.

• {tag_totalprice} - is the sell price of a product inclusive of any tax.
• {tag_totaldiscountprice} - if you are using the customer loyalty features of the system, then you can provide each customer with their own discounts. If you add this tag to the page then any customer who has been given catalogue discount will see a discounted price instead. If no customer is currently logged in or discounts do not apply, then they will see the same value used for {tag_totalprice}.

Large product layout (used to display individual product)

This layout is used for detailed (large) view of the product and is accessed from the small(list) of the product. You can also link directly to this view of the product.

This layout supports almost all of the tags the small layout supports plus some additional tags. For the complete list of tags see Tags - Quick reference. Below are some of the tags that were not explained in the section above.

{tag_grouping} and {tag_groupinglist}

There are two grouping tags that may be used to display grouped products. The most common is {tag_grouping}. In the example below you will see different tub sizes for each type of Cream being grouped together.

{tag_relatedproducts} and {tag_relatedproductslist}

The related list may only be displayed on this layout. All you have to do is place {tag_relatedproducts} inside this layout wherever you want the related products to be displayed. If you require customers to see the related list before adding a product to the list then you may remove the Add to Cart and Buy Now options from the small product layout so customers are forced to click on a product and see its details. And hence see all the related products.

Displaying product price as on sale (crossed out)

Sometimes you may want to show the RRP price crossed out to emphasize your sale price. To do this, firstly you will need to ensure you have checked the 'on-sale' box for the product as mentioned above. The next step is to ensure you have set the prices for the RRP and Sale price for the product. Next, you will need to add the tag {tag_retailprice} (this is the price that will be crossed out) and the {tag_saleprice} to your Product Layouts.

This will display as below: