Home > General
Help > Product and category layouts
Product and category layouts
There are various layout possibilities
for the categories, products and product detail pages. These can
be set up by modifying or adding to the parameters in the file
vsadmin/includes.asp or includes.php. There are also tweaks that
can be made through
the CSS file for fine tuning the presentation and these are outlined
in the css help page.
The category layouts
It is possible to show the categories in multiple columns.
The parameter you would need to use here would be
ASP version -> categorycolumns=1
PHP version -> $categorycolumns=1;
...where "1" is the number of columns that will appear on
categories.asp / categories.php
Here is an example of the setting categorycolumns=3
Example taken from our demo
store.
If you are using a multiple column category layout then
you will probably want the category name and description below
the category image as in the example above. To achieve this look
you will need the following setting in vsadmin/includes.asp or
includes.php
ASP version -> usecategoryformat=3
PHP version -> $usecategoryformat=3;
If you want the category image to the right of the category
name and description then you will need to set...
ASP version -> usecategoryformat=2
PHP version -> $usecategoryformat=2;
Example taken from our demo
store.
The final option is to show the image to the right of the
category name with the text below
For this layout you will need the following
setting
ASP version -> usecategoryformat=1
PHP version -> $usecategoryformat=1;
Example taken from our demo
store.
The product layouts
As with the category page it is also possible to put the
products into multiple columns on the products page. To achieve
this layout you will need the following in vsadmin/includes.asp
or includes.php
ASP version -> productcolumns=2
PHP version -> $productcolumns=2;
Example taken from our demo
store.
In the example above the product name, description, options
and price are displayed below the product image. This is achieved
by the following setting
ASP version -> useproductbodyformat=2
ASP version -> usesearchbodyformat=2
PHP version -> $useproductbodyformat=2;
PHP version -> $usesearchbodyformat=2;
This lends itself to multiple column layouts as it provides
more space on the page. Note the use of searchbodyformat as the
results on the search page can be tweaked in the same way.
The following CSS was used to achieve the formatting above
...for the price
span.price, .detailprice, .prodprice {
color: #44BA04;
padding-top: 4px;
font-weight:bold;
text-align: center;
}
...for the alternative currency
div.prodcurrency {
font-size: 10px;
font-family : Verdana,Arial,sans-serif;
color: #666;
text-align: center;
width: 100%;
}
...for the border around the product information (in includes.asp
/ .php make sure that innertablespacing is set to above zero eg 3)
td.product {
border: 1px dotted #3B4754;
background-color: #FFF;
}
It is
also possible change the layout to have the product picture to
the left of the name and description. 
Example taken from our demo
store.
The setting for the layout above would be
ASP version -> useproductbodyformat=1
ASP version -> usesearchbodyformat=1
PHP version -> $useproductbodyformat=1;
PHP version -> $usesearchbodyformat=1;
Please note that with the useproductbodyformat set to 1
the productcolumns setting will be ignored.
The following CSS was used to achieve the formatting above
...for the price
span.price, .detailprice, .prodprice {
color: #44BA04;
padding-top: 4px;
font-weight:bold;
text-align: center;
}
...for the alternative currency
div.prodcurrency {
font-size: 10px;
font-family : Verdana,Arial,sans-serif;
color: #666;
text-align: center;
width: 100%;
}
...to top align the product picture
.prodimage {
vertical-align : top;
}
There is one more radically different layout option for
the products page and this is in a table format.
Example taken from our demo
store.
It is possible to choose which columns to display so you
can show as much or as little information as you require. The various
column options are outlined here for the ASP
version and here for
the PHP
version.
To specify the table layout, the following will need to
be set in vsadmin/includes.asp or includes.php
ASP version -> useproductbodyformat=3
PHP version -> $useproductbodyformat=3;
The following CSS was used to achieve the formatting above
...for the darker blue cell border lines
.cpd {
background : #29ADFF;
}
...for the light blue background cells
.cpdll {
background : #F1F9FC;
color: #333;
}
...for the column header cells
.cpdhl {
background : #FFF;
color: #333;
font-weight: bold;
} Please note there are more special CSS
classes that correspond
to this particular layout.
The product detail layout
If you want to place a buy button at the top of the product
detail page then you will need version 5.6.0 and the following
setting
ASP version -> proddetailtopbuybutton=TRUE
PHP version -> $proddetailtopbuybutton=TRUE;
There are three possible product detail layouts. If you
want the product picture to the left of the product name and description,
then you will need the following
ASP version -> usedetailbodyformat=2
PHP version -> $usedetailbodyformat=2;
Example taken from our demo
store.
The following CSS was used to achieve the formatting above
...for the price
span.price, .detailprice, .prodprice {
color: #44BA04;
padding-top: 4px;
font-weight:bold;
text-align: center;
}
...for the alternative currency
div.prodcurrency {
font-size: 10px;
font-family : Verdana,Arial,sans-serif;
color: #666;
text-align: center;
width: 100%;
}
...to top align the product picture
.detailimage {
vertical-align : top;
} If you want the product picture above the product name and
description then you will require the following in vsadmin/includes.asp
or includes.php
ASP version -> usedetailbodyformat=1
PHP version -> $usedetailbodyformat=1;
Example taken from our demo
store.
The following CSS was used to achieve the formatting above
...for the price
span.price, .detailprice, .prodprice {
color: #44BA04;
padding-top: 4px;
font-weight:bold;
text-align: center;
}
...for the alternative currency
div.prodcurrency {
font-size: 10px;
font-family : Verdana,Arial,sans-serif;
color: #666;
text-align: center;
width: 100%;
}
If you want the product picture to the left of the product
name and the description below the rest of the content, you will
require the following in vsadmin/includes.asp or includes.php
ASP version -> usedetailbodyformat=3
PHP version -> $usedetailbodyformat=3; 
Example taken from our demo
store.
Version 5.8 or above required.
Tips and tweaks
Many of the tweaks made to the layouts can be achieved through
the CSS file and we have outlined all the CSS classes in our CSS
reference page.
It is possible to experiment with those classes to get the
look you are after. For example if you want to place a thin border
around the products as in the example here
... you would add the follow to your css file (in includes.asp
/ .php make sure that innertablespacing is set to above zero eg
3)
td.product {
border: 1px dotted #3B4754;
background-color: #FFF;
}
As you can see on our demo
store, we have used various layout
options on the same store. This is achieved by setting the pages
up as static
pages, which means we can edit the pages individually. As an example,
you can see that we have set this
page up to use the table layout
for products. To do this for the ASP version we used the following
code
<%
useproductbodyformat=3
explicitid=13
%>
<!--#include file="vsadmin/inc/incproducts.asp"-->
For the PHP version that would be
<?php
$useproductbodyformat=3;
$explicitid=13;
?>
<?php include "vsadmin/inc/incproducts.php"?>
|
