1-718-887-7598 
0141 416 3414
Ecommerce Templates > General Help > CSS layouts
CSS layouts for category, product and detail pages
In Version 6.2 we introduced the ability to lay out the category, product and product detail pages without the use of tables. These pages can now be 100% css based giving greater flexibility over the styling and formatting of these pages.
To turn on this feature you will need to be running a minimum of Version 6.2 and add the following to vsadmin/includes.asp
usecsslayout=TRUE
or vsadmin/includes.php
$usecsslayout=TRUE;
We have outlined the various classes available below. If you would like to start with a full css file as used on our demo store, it is available from our downloads page.
- The category page
- The product page
- The product detail page
- Changing the order of elements on the product detail page
- CSS layout FAQ
The category page
These are the classes available on the category page with some notes on their use:
div.categorymessage
This is the class for the top category text, by default that is "Please click on a category to view products."
div.allcatdiscounts
This class applies to both the discounts apply text and the discount itself
div.catdiscounts
This class only applies to the discount text
div.catnavigation
This is the top breadcrumb links eg. Categories >> All products
div.navdesc
This is the introductory text, typically "View all products in all categories."
div.categories
This is the main container for the category layout
div.category
This is the container for each category. If you want multiple columns, set a width and float left.
div.catimage
This is the image used for each of the categories
div.catname
This is the name of the category
div.catdesc
This is the category description
Click on the screenshots below to view a schematic representation of the categories page and its css classes.
The product page
These are the classes available on the products page with some notes on their use:
div.catheader
This is the class for the optional category header available at the top of each products page.
div.prodnavigation
This is the top breadcrumb links eg. Categories >> All products
div.checkoutbutton
This is the the checkout button at the top of the listing
div.prodfilterbar
This is the product filter bar container which contains further classes, div.prodfilter, div.filtertext, select.prodfilter
div.allproddiscounts
This class applies to both the discounts apply text and the discount itself
div.proddiscounts
This class only applies to the discount text
div.products
This is the main container for the product page layout
div.product
This is the container for each product. If you want multiple columns, set a width and float left.
div.prodid
This is the product id styling
div.prodmanufacturer
This is the manufacturer label styling
div.prodsku
This is the sku label styling
div.prodimage
This is the container for the image used for each of the products
div.prodname
This is the name of the product
div.prodrating
This is the product rating display on the products page
div.prodinstock
This is the number of items in stock labeling
div.proddescription
This is the short product description container
div.prodoptions
This is the container for the product options display
div.optiontext
The container of the options text
span.prodoption
The text preceding the option choices
div.option
The container for the menu options
select.prodoption
The menu options
div.multioptiontext
The text in the multiple purchase product option feature
div.listprice
The list price properties
div.prodprice
The main price properties
div.prodcurrency
The alternative currency properties
div.quantitydiv
The quantity box on the product page
div.addtocart
The container for the add to cart button
div.notifystock
The formatting of the notify in stock container
div.configbutton
The container for the configure button
div.outofstock
The container for the out of stock message
div.pagenums
The pagination numbers for multiple product pages
Click on the screenshots below to view a schematic representation of the products page and its css classes.
The product detail page
These are the classes available on the product detail page with some notes on their use:
div.proddetail
This is the main container for the product detail page layout
div.prodnavigation
This is the top breadcrumb links eg. Categories >> Category name
div.detailcheckoutbutton
This is the the checkout button at the top of the page
div.detailimage
This is the container for the product image on the detail page
div.detailid
This is the product id styling on the detail page.
div.detailmanufacturer
This is the manufacturer label styling
div.detailsku
This is the sku label styling
div.detailname
This is the name of the product
span.detaildiscountsapply
The formatting of the text "discounts apply!"
div.detailsdiscounts
The formatting of the discount text
div.detailinstock
This is the number of items in stock labeling
div.detaildescription
This is the long product description container
div.detaillistprice
The list price properties
div.detailprice
The main price properties
div.detailcurrency
The alternative currency properties
div.detailoptions
The container for the product options on the product detail page
div.multioptiontable
The container for the multiple purchase product options
div.detailmultioptiontext
The formatting for the multiple purchase product options
div.detailoptiontext
The formatting of the options text
div.detailoption
The container for the drop down options
div.detailquantity
The container for the quantity box and text
div.detailquantitytext
The quantity box introductory text
div.detailquantityinput
The quantity box formatting
div.detailaddtocart
The formatting of the add to cart container
div.detailnotifystock
The formatting of the notify in stock container
div.detailoutofstock
The container for the out of stock message
div.previousnext
The pagination links at the bottom of the detail page
div.emailfriend
The container for the email a friend / ask a question feature
div.review
The container for the product review section
Click on the screenshots below to view a schematic representation of the product detail page and its css classes.
Change the order of elements on the product detail page
If you want to be able to order the elements on the product detail page, add the following to vsadmin/includes.asp, setting the order of your choice...
detailpagelayout="navigation,checkoutbutton,productimage,productid,manufacturer,sku,productname,discounts, instock,description,listprice,price,quantity,currency,options,addtocart,previousnext,emailfriend,reviews"
..or to vsadmin/includes.php
$detailpagelayout='navigation,checkoutbutton,productimage,productid,manufacturer,sku,productname,discounts, instock,description,listprice,price,quantity,currency,options,addtocart,previousnext,emailfriend,reviews';
Please note that a minimum version of 6.2.6 is required.
CSS layout FAQ
These are some answers to some of the most commonly asked questions regarding the css layouts for the category, product and details pages.
- Do I still need to add layout options in my includes files for things like prodbodyformat, categorycolumns etc?
- How can I tweak the layout without my customers seeing my test edits?
- Can I combine CSS classes that share the same formatting?
- Is this a definitive list of all the css classes used on my store?
Do I still need to add layout options in my includes files for things like prodbodyformat, categorycolumns etc?
No, if you choose to use the css layouts these settings will be ignored. To set multiple columns on the product page for example set the width of the container div.product to something like 360 pixels and float left. This will cause the columns to repeat, fitting into the width of the main container.
How can I tweak the layout without my customers seeing my test edits?
The best way we have found is to use the Developer Toolbar for Firefox. We have a video tutorial available here on the subject.
Can I combine CSS classes that share the same formatting?
Yes, you can. There are elements that appear across the category, product and detail pages that you may want to style in the same way. For example the class optiontext is used on the product and detail pages. If the formatting is the same, you only need to use this class and not redefine it for the detail page. Similarly there may be elements that need the same formatting such as the location of the buy button, out of stock message and notify me button. Rather than identifying the classes separately, you can group them like this
div.addtocart, div.outofstock, div,notifystock{
text-align:center;
float:left;
width:350px;
}
Is this a definitive list of all the css classes used on my store?
This is the list of CSS classes used for formatting the elements on the category, product and detail pages. There are many more classes for styling elements available on our main css help page.
