Overall Layout

The Overall Layout as the name suggests, handles the overall layout of catalogs and products on the page. You can configure the number
of products per row, per page and so forth. For a complete list of tags available for this layout and their explanations, see Tags - Quick Reference

Lets say you have a catalog for Cream, and you need a number of subcatalogs, Example: Facial and Moisturizers. The Cream catalog also contains
a handful of its own products. When a customer views the Cream catalog, the Overall Catalog Layout will be retrieved and placed inside
the page template.

Take a look at the image below, any subcatalogs are displayed in the white-boxes. You can customize individual catalogs and limit the number
of catalogs per row. See {tag_cataloguelist} in tags reference article.

Any products in the Cream catalog are displayed in the black boxes. You can customize individual products and limit the number of products
per row and per page.

By organizing and customizing the above elements and using your own CSS classes you can completely customize the entire online shopping
look and feel.

Catalog Layout

This layout allows you to customize the appearance of an individual catalog. For example, when you start a temporary site, you can see the
Books catalog. Within this catalog, you will see two sub-catalogs Biographies and Business. The appearance of
each of these sub-catalogs is controlled by this layout.

This template provides very granular customization as individual tags that can be found here are used to display information about the catalog. These can be placed anywhere on the page and use a CSS
class of your choosing.

Here are the classes that are rendered for this item:

.catalogueItem

.shop-catalogue

Product Layouts

These layouts control how individual products are displayed in your online shop. There are two product layouts per site. Individual Product
Layout (Small), which is used when the products are displayed in the list view and Individual Product Layout (Large), which is used to
display the detailed view of the individual product.

Individual Product Layout (Small)/List Layout

This layout is used when the individual product module is inserted onto the page and it is also used when the products are displayed in the
list view. 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 be used in this layout. For the complete list, see the tags article.

{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:

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 it's 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 catalog 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}.

Individual Product Layout (Large)

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 please go
here . 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.

The tag {tag_groupinglist} will instead display a list of the products within the group as shown below.

{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.

An example of related products is creating warranty as a related product when the customer adds a Plasma TV to their shopping cart.

Use {tag_relatedproductslist} to display checkboxes. Alternatively use {tag_relatedproductslist,7} to display radio fields instead.

Checkout Process Layouts

A number of layouts are used during the checkout process. You have complete access to these layouts and can customize them in detail.

The checkout process consists of 3 steps. It is important to note that the checkout steps for customers who wish to purchase vs. those wish
to get a quote is different. This approach allows you to customize each flow to suit your business needs.

Shopping Cart Layout

This layout details all the products in the cart including taxes, cost and total. This is where the customer chooses the relevant shipping
options and/or discount codes. Every field, color, layout and options on this page are completely customizable.For
a complete list of tags that are available for this layout. see Tags - Quick Reference.

Shopping Cart Summary

You can add links to the shopping cart by adding the shopping cart summary module. Customers can review their order or proceed to checkout.For
a complete list of tags that are available for this layout. see Tags - Quick Reference.

Registration (Buy)

Registration form is the final step of the checkout process and comes after the customer clicks the checkout button in the shopping cart.
This layout contains the registration form for the visitor. The Registration form collects customer's details such as name, email address,
shipping address, billing address, payment details and it can collect anything else you want to collect, because the registration form
is really just a standard web form that has been placed onto the Registration layout.

By default, the form that is used in the registration layout is the Online Shop Purchase Form. Web forms can be found in the Site
Manager > Web Forms section of the admin. You can create your own form and insert this into the registration layout, for details on
forms, see Create and insert a form .

Adding additional fields to the registration form

If you wish to add an additional field to the registration form you need to go to Site Manager > Web Forms and find the Online Shop Purchase Form which
is a default checkout form. If you have built another form or renamed the default form you need to select that form.

You then need to choose which field you want to add to the form. First determine if the field you require is a system field. If it
is, add that field by ticking it and clicking on Save. If it's not one of the system fields, use one of the custom fields at the bottom
of the form builder to create a field.

If, for example you wanted to add a field that will be a checkbox that will have "Have you read terms and conditions..." next to it you would
type in Terms and Conditions in the Field name field, for Field Type you would select
List(Checkbox List) and for the List Items the would type in "Have you read terms and conditions...". In this case you only have one item.

After you have done that you would need to go back to Site Manager > Module Templates > Online Shop Layouts > Registration - Buy.
Delete the old form from that layout and re-insert the newly updated form (The best way to delete the old form is to go to HTML view at
the bottom of the editor window and deleting everything between <form> tags. then use the Toolbox on the right to insert
the new form. In the Modules tab of the Toolbox menu, click Web Forms, select the form you have updated and then click insert.

Note:

Ensure that the Insert as module instead option is unchecked. This form can not be inserted as a module.

Adding and removing unwanted payment options

Adding

Sometimes you may need to add a payment method type to the registration form that is not there by default.

The following is the list of all payment method types that system will recognize:

CreditCard = 1

Cheque = 2

Cash = 3

EFT = 4

PayPal = 5

BPay = 6

HostedCreditCard = 7 (example Paypal)

DirectDebit = 8

GiftVoucher = 9

Example:

If you need a Direct Debit option in addition to COD, you will need to create a radio button with value 8 in the checkout form in Registration
Template.

To remove the certain payment options from the registration form all you have to do is go to the Registration - Buy layout and go into the
HTML view. There you need to find the radio button code that looks like this:

Simply remove the options you do not need. Do the same thing for the Billing Country.

Adding opt-in box to purchase form

Firstly, you need to add a campaign list to your registration web form. To do this go to Site Manager > Web Forms and select the correct
form (by default it's Online Shop Purchase Form). The next step is to add the campaign list field from the List tab of the form builder.

You now need to reinsert the form into a Registration layout. To do this, go back to Site Manager > Web Forms > Online shop Layouts then
click Registration Buy.

Now simply delete the old form and insert the new form using the Toolbox menu.

When you are deleting a form, the best way to do it is to delete everything between <form> tags including the <form> tags in HTML
view of the editor.

Registration (Quote)

This layout is very much similar to the Registration - Buy layout, explained in the previous section, except that it uses the different form.
By default it uses Online Shop Quote Form.

Receipt (Buy)

This is the receipt and confirmation page for the purchase made on eCommerce checkout. This page is customizable and can include any number
of transaction related information.

To customize this layout, go to Site Manager > Module Templates > Online Shop Layouts and then click Receipt (Buy).

Receipt (Quote)

This is the receipt and confirmation page for the quote. This page is customizable and can include any number of transaction related information.

Invoice layout

You can completely customize the appearance of your Invoice layout that gets generated either when your customers purchase from your online
shop or when you create them manually via the admin interface.

To customize:

Log in to the admin of your site and select Site Manager > System E-mails

Select Invoice

Use the Toolbox menu on the right of the editors toolbar for all available tags for this layout.

Tip:: If the customer purchases multiple products and they are not aligned properly, all you have to do is add the following
code to the CSS style in your invoice:

.productitemcell&#123; Height:100px; &#125;

Quote layout

You can completely customize the appearance of your Quote invoice layout that gets generated when your customer makes a quote on your online
shop.

To customize:

Log in to the admin of your site and select Site Manager > System E-mails

Select Quote

Use the Toolbox menu on the right of the editors toolbar for all available tags for this layout.