Customize your online shop look and feel

Updated on 20-October-2016 at 10:16 AM

This tutorial will guide you through customizing your online shop look and feel. The tutorial covers product, catalog, shopping cart, registration and receipt page layouts.

All online shop layouts can be found in the admin console under Site Manager > Module Template > Online Shop layouts:


The best approach is to customize your layouts sequentially in the below order:

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.


There are 3 main elements to the Overall Layout.

  1. The header which consists of Catalog Breadcrumbs  and  Shopping Cart Summary  modules
  2. The list of subcatalogs in the current catalog
  3. 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.

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:

  • To change the button text simply change the tag {tag_addtocart} to {tag_addtocart,Your Text} (replacing "your text" with your custom message.
  • 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.

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

Also take a look at Customizing the shopping cart article for more tips on how to customize and enhance the Shopping Cart.


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.

Also take a look at Customizing the shopping cart summary article for more tips on how to customize and enhance the shopping cart summary.

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.

You would use the following code:

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

Removing

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:

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

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 go to the Registration - Buy layout and click on the HTML view ( <> ) at the bottom of the editor. Locate the below code:

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

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

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