Contact sales now: info@ecommercetemplates.com
Ecommerce Templates > General Help > 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.
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...
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...
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.
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.
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.
