Tutorial 2.4: Customize my ecommerce look and feel

From Online Business Wiki

Previous topic: Tutorial 2.3: Configure my payment gateways

Next topic: Tutorial 2.5: Advanced ecommerce options

This tutorial will guide you customizing your online shop. It will cover the product list and detail layouts, catalogue layout, shopping cart layout, registration form, receipts and invoice.

Detailed Tutorial

The place to start customizing your online shop is Admin -> More Customization Options -> Online Shop Layouts.

The Overall Layout is used when displaying catalogs and products to customers. This layout effectively handles the layout of catalogs and products on the page. You can configure the number of products per row, per page and so forth.The complete list of tags for that layout and their explanations can be found HERE.

Imagine your Cream catalog to have a number of sub-catalogs, e.g. 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 site-wide template.

Any sub-catalogs are displayed in the white-boxes below. You can customize individual catalogs and limit the number of catalogs per row. See {tag_cataloguelist} in tags article

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

There are 3 main elements to the Overall Layout.

The header which consists of Catalog Breadcrumbs and Shopping Cart Summary modules
The list of sub-catalogs in the current catalog
The list of products in the current catalog

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

Other important elements on this page include the Shopping Cart Summary module, previous and next links and so forth.

Catalogue Layout

This layout allows you to customize the appearance of an individual catalog. For example, when viewing the Books 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 cab 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 are used in this layout. For the complete list please 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:

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

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. And hence see all the related products.

Below is an active example of related products where Warranty is being recommended to the customer at the time when they add a Plasma TV to their shopping cart.

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

For more details on this tag please go HERE.

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. Its 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, costs 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 please go HERE.

Registration (Buy)

Registration form is the final step of the checkout process and it comes after the customer clicks on "checkout button" in the shopping cart. 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 form that has been placed onto the Registration layout in Admin -> More Customization Options -> Online Shop Layouts -> Registration (Buy). The form that's made into registration form by default is Online Shop Purchase Form in Modules -> Web forms but you can also build your own.

Adding additional fields to the registration form

If you wish to add an additional field to the registration form you need to go to Modules -> Web forms and find Online Shop Purchase Form which is a default checkout form. If you have built another form or renamed the default form you need to click on that form.

You then need to choose which field you want add to the form. First see is that field is one of the system fields. If it is add that field by ticking it and clicking on Save. If it's not one of the system fields, click on Add custom fields to Web Form and create your 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 to Admin -> More Customization Options -> Online Shop Layouts -> Registration (Buy) and delete the old form from that layout and re-insert the newly updated form. Th best way to delete the old form is to go to HTML view by clicking <> on the bottom of the editor window and deleting everything between <form> tags. then use the Module Manager to insert the new form. Module Manager can be accessed by a click on a white plus sign in the blue circle on the editor toolbar. In the Module Manager you click on Web Forms -> choose Online Shop Purchase Form and insert it. Please note that this is the only form that can not be inserted into the layout 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 ' like 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.

You would use the following code:

<input id="PaymentMethodType" type="radio" name="PaymentMethodType" value="8"/>Direct Debit

Removing

To remove the certain payment options from the registration form all you have to do do is go to Admin -> More Customization Options -> Online Shop Layouts -> Registration (Buy) and go into the HTML view. There you need to find the radio button code that looks like this -

<input class="PaymentMethodType" type="radio" onclick="ShowCCFields(this.value);" value="7" name="PaymentMethodType"/>
Credit Card (Hosted) (remove if not required)

You just need to delete the options you do not need there and save the layout.

Removing countries from the form

All you need to do here is you need to go to Admin -> More Customization Options -> Online Shop Layouts -> Registration (Buy) and click on the HTML view ( <> )on the bottom of the editor window and find the following code, e.g.:

<select id="ShippingCountry" class="cat_dropdown" name="ShippingCountry">
<option> -- Select Country -- </option>
<option value="AF"> AFGHANISTAN </option>
<option value="AX"> ALAND ISLANDS </option>
<option value="AL"> ALBANIA </option>
<option value="DZ"> ALGERIA </option>
<option value="AS"> AMERICAN SAMOA </option>
<option value="AD"> ANDORRA </option>
<option value="AO"> ANGOLA </option>

Then 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 add a campaign list to your registration web form. To do this go to Modules -> Web Forms -> select the correct form (by default it's Online Shop Purchase Form) then Add system fields to the web form. This is where you add one or more campaign list to a form and Save changes.

You now need to reinsert the form into a Registration layout.

To do this, you go to Admin -> More Customization Options -> Online Shop Layouts then click Registration Buy.

Now simply delete the old form and insert the new form using the Module manager.

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 "purchase 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 it you need go to Admin -> More Customization Options -> Online Shop Layouts then click Receipt (Buy).

The default receipt page look something like this:

Click here for the list of available tags for this layout.

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 get generated either when your customer purchase from your online shop or when you create them manually via the admin interface.

To customize:

Log in into the admin of your site
Select Admin -> More Customization Options -> System Emails
Select Invoice
Use the Tag Manager option on the editor's toolbar for a complete list of tags that you can use in this layout. The full list of tags is also available [[|Tags#Invoice_Email_LayoutHERE]].

Useful hint: 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{
Height:100px;
}

Quote layout