Customizing layouts to update the appearance of an online store

Customizing the shopping experience

One of the main benefits of this system is your ability to customize the shopping experience on a very fine-grained basis. Although the shopping experience is already customized and ready to be used, you may from time-to-time need to customize it further.

There are a number of templates that control the entire look and feel of this e-commerce system. Before you begin, you should understand the hierarchy of templates within the system as discussed below.

Catalog and product layout hierarchy

Just like all types of content, such as web pages, FAQs and Announcements that use a template, catalogs also use the same site templates. This ensures a consistent look and feel across your entire web site.

In order to give you complete freedom and granular customizability, templates use a number of other smaller templates to control:

  • How catalogs, products and the shopping cart summary are arranged on the same page
  • How many catalogs are displayed on each line
  • How each individual catalog looks. For example, displaying the catalog image above and the catalogue name below it vs. the catalog name at the top with the catalog image shown below
  • How many products are displayed on the each line and on each page
  • How each individual product appears. For example, the product image, then product code, then product price and then product name below it OR product name and then product image and then product price and then product code

Main catalog layout

The main catalog layout is used when displaying catalogs and products to customers. This template effectively handles the layout of catalogs and products on the page. You can configure the number of products per row, per page and really define how it will look.

This template is used for layout rather than aesthetic purposes. In order to ensure a consistent look and feel for your website, this layout is wrapped inside a template.

Imagine your skin care catalog has a number of sub-catalogs, such as facials and moisturizers. The skin care catalog also contains a handful of its own products. When a customer views the skin care catalog, the main catalog template is retrieved and placed inside the site-level template.

Any sub-catalogs are displayed in the white-boxes below. You can customize individual catalogs and limit the number of catalogs per row.

Any products in the skin care catalog 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 three main elements to the main catalog template.

  1. The header, which consists of catalog breadcrumbs and cart summary modules
  2. The list of sub-catalogs 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.

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

Individual catalog layout

This template allows you to customize the appearance of an individual catalog. For example when viewing the skin care catalog, you will see two sub-catalogs: facial and moisturizers. The appearance of each of these sub-catalogs is controlled by this layout.

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

Large image zoom feature

The following parameters for the large image tag inside a large product layout will allow you to create a zoom effect on a large product image.

{tag_largeimage,zoom,width,height}

You need to assign a larger image to the product large image and then in the {tag_largeimage} you have to specify the height and width of the zoom out size, so that the zooming will not affect the quality of the image.

For example:

You assign a large image to a product: 600px x 600px

Then, in the large product template you place a tag that looks like this: {tag_largeimage,zoom,300,300}

In the beginning the image will be rendering in 300px x 300px (like a thumbnail)

If you drag a zoom slide, you will be able to drag it until you get to 600px x 600px and the image quality will be preserved.

Small and large product layouts

These layouts control how individual products are displayed in your online shop. When a catalogue is being browsed and a list of products being displayed, each product uses the small product layout. When a customer selects a small product to view its details, the large product layout is used to display the details of the product.

These layouts provide very granular levels of customization as tags are used to display information about the different product attributes. Just like the Individual Catalogue layout, these tags can be placed anywhere on the page and use a CSS class of your choosing.

There are a number of tags that you can use to customize the look and feel of your product layouts. Below is a list of some of the tags with a detailed description.

{tag_addtocart}, {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 foce the user to view the details of a product before adding it to the car then only add the tag {tag_addtocart} to the Large product layout. This tag cannot appear more than once on the layout.

Similarly the {tag_addtocartinputfield} enables you to completely position and customize the quantity box. This field uses a CSS class called ProductTextInput. Ensure this class is included in one of your external or inline CSS files.

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

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

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 three 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 summary 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. Please review the list of tags that can be used to further customize this step.

Registration form - this step collects customer details including addresses, payment details and the payment method.

This registration form is completely customizable. To add new fields to this form simply use the web forms feature to create a new form with any number of fields and then re-insert the form into this step of the checkout process.

In the default checkout form you will notice 3 payment methods Credit Card, COD and PayPal. You can easily remove any payment method that you don't require. To remove COD for example, simply select it and click delete. If you are only using the credit card option you would delete COD and PayPal, ensure the Credit Card option is selected and present on your page. You can use CSS to hide this field, e.g. append style=display:none; to the Payment Method element.

NOTE: Credit Card details and Payment Method are not required for the Quote checkout form.

This is the receipt and confirmation page for the purchase or quote. This page is customizable and can include any number of transaction related information. Refer to available tags for this step.