Ecommerce Templates > General Help > Product and category layouts

Premium CSS Product and Category Layouts

The Premium CSS Layouts were previously only included in the Premium Responsive templates, but are now included as standard with updaters and all new designs.

There are various layout possibilities for the categories, products and product detail pages. These can be set up by selecting different style sheets provided with the template. There is also a simple include file which will allow the different layouts to be controlled via the vsadmin/includes.asp or includes.php file, including all the necessary references automatically. Please note that new templates are already set up to use the incectstyle.asp / incectstyle.php system.

The incectstyle file

By adding the incectstyle.asp / incectstyle.php include line all the necessary style sheets are included automatically for the category, product, product detail and quick buy layouts. There are a few important issues to bear in mind with regards to the placement of this include line...

  • The incectstyle include file should come after the includes.asp / includes.php file so that it can be controlled via entries in your includes.asp/php file.
  • You want to remove any existing ectcart.css and ectcart.js references as these will automatically be included by the new system.
  • You want the site style sheet to come last. This is so that you can add any tweaks to this file if you want to override the style.

Selecting different layouts

There are three different product pages layouts, three different detail page layouts as well as three different quick buy layouts to choose from. There are also styling set up for the category layout and you can select the number of columns for products and the category page.

To control these options you can use the following parameters in your includes.asp file...

ASP Version / includes.asp
PHP Version / includes.php

The ectproductstyle can be set to 1, 2 or 3. Style 1 has a product image to the left and product details to the right. Style 2 and 3 with the image above the details.

The ectdetailstyle can also be set to 1, 2 or 3 with style 1 having the image to the left. Style 2 having the image above the details and style 3 having the product name above the image.

The ectqbuystyle also has 3 different layout options with options 1 and 3 having the image to the left of the product details and layout 2 having the image above.

The number of category and product columns that are displayed can be set using the categorycolumns and categorycolumns parameters.

Setting product and detail page elements

You can set the elements (such as product name, image, stock level) and their order that are included in the product, detail and quick buy pages by setting the parameters...

productpagelayout / $productpagelayout
detailpagelayout / $detailpagelayout
quickbuylayout / $quickbuylayout

If you do not specify these in your includes.asp/php file then defaults will be used with the incectstyle page. These defaults can be seen by viewing the incectstyle.asp/php file in a text editor. You can if you wish specify whatever of the available layout elements you like by defining these parameters in your includes.asp/php file, however it is a good idea to start with the default and make your changes gradually tweaking the CSS if necessary. Remember you can always get help doing this on our support forum here.

Manually adding CSS files

If you prefer not to use the incectstyle include, the CSS and JavaScript files that need to be added to the cart for the premium layouts are as follows.

The core ectcart CSS and JS Files (necessary for all cart functions)...

<link href="css/ectcart.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ectcart.js">

The base Premium Layout file (necessary for using the premium layouts)...

<link href="css/ectstylebase.css" rel="stylesheet" type="text/css" />

The product, detail and quick buy layout files (1, 2 or 3)...

<link href="css/ectstyleproduct1.css" rel="stylesheet" type="text/css" />
<link href="css/ectstyledetails1.css" rel="stylesheet" type="text/css" />
<link href="css/ectstyleqbuy1.css" rel="stylesheet" type="text/css" />

If you don't use the incectstyle file then you will need to specify the productpagelayout, detailpagelayout and quickbuylayout parameters in your includes.asp/php file. There are more details about setting the order of elements using these parameters here.

Some Examples of Product Page Layouts

Back to top