Contact sales now: info@ecommercetemplates.com
Ecommerce Templates > General Help > Home page product display
It is possible to show featured or best selling products on your home page and display them with a different layout from your main product pages. The method is quite simple as it uses the built-in cross selling feature in the ASP and PHP version of the software. ECT Wordpress users can use the Cross Sell Shortcode to interface the Cross Sell plugin.
ASP Version
We have an example of using recommended products on our demo store. You can see that it is responsive so looks great on tablets and smart phones too.
To get started add the following lines where you want the products to appear on your home page
<%
crosssellaction="recommended"
%>
<!--#include file="vsadmin/inc/inccrosssell.asp"-->
...and then in your product admin page, check the recommended products checkbox for the products you want to show here. You can use the Quick Entry feature in the product admin to quickly select multiple products.
Add the following to includes.asp to give your recommended products the title you want
csrecommendedtitle="Our Recommended Products"
PHP Version
You will need to add the following where you want the products to appear and again select the products in your store control panel
<?php
$crosssellaction='recommended';?>
<?php include "vsadmin/inc/inccrosssell.php" ?>
Add the following to includes.asp to give your recommended products the title you want
$csrecommendedtitle="Our Recommended Products";
Example
This example uses the following css
div.csproduct{
float:left;
width:23%;
margin:4px;
border: 1px solid #ccc;
border-radius:4px;
height:220px;
}
div.csproduct:hover{
border: 1px solid #F6B142;
}
div.quantitydiv, div.csprodid, div.csprodinstock, div.csprodrating, div.csproddateadded,div.csprodmanufacturer{
display:none;
}
div.csprodimage, div.csprodname, div.csprodprice{
width:100%;
text-align:center;
}
and to display the products on the ASP page
<%
crosssellaction="recommended"
csnoshowdiscounts=TRUE
csnoproductoptions=TRUE
csnobuyorcheckout=TRUE
%>
<!--#include file="vsadmin/inc/inccrosssell.asp"-->
or on the PHP page
<?php
$crosssellaction='recommended';
$csnoshowdiscounts=TRUE;
$csnoproductoptions=TRUE;
$csnobuyorcheckout=TRUE;
?>
<?php include "vsadmin/inc/inccrosssell.php" ?>
ASP Version
Add the following lines where you want the products to appear on your home page
<%
crosssellaction="bestsellers"
%>
<!--#include file="vsadmin/inc/inccrosssell.asp"-->
You can set a date range for the best sellers to be chosen from with the following addition to vsadmin/includes.asp
bestsellerlimit=180
... where 180 is the number of days in the range.
Add the following to includes.asp to give your best selling products the title you want
csbestsellerstitle="Our Best Sellers"
PHP Version
You will need to add the following where you want the best selling products to appear
<?php
$crosssellaction='bestsellers';?>
<?php include "vsadmin/inc/inccrosssell.php" ?>
You can set a date range for the best sellers to be chosen from with the following addition to vsadmin/includes.php
$bestsellerlimit=180;
... where 180 is the number of days in the range
Add the following to includes.asp to give your recommended products the title you want
$csbestsellerstitle="Our Best Sellers";
Example
This example uses the following css
div.csproduct{
float:left;
width:48%;
margin:4px;
border: 1px solid #ccc;
border-radius:4px;
height:320px;
}
div.csproduct:hover{
border: 1px solid #F6B142;
}
div.quantitydiv, div.csprodid, div.csprodinstock, div.csprodrating, div.csproddateadded,div.csprodmanufacturer{
display:none;
}
div.csprodimage, div.addtocart, div.csprodname, div.csprodprice{
width:100%;
text-align:center;
}
and to display the products on the ASP page
<%
crosssellaction="bestsellers"
csnoshowdiscounts=TRUE
csnoproductoptions=TRUE
%>
<!--#include file="vsadmin/inc/inccrosssell.asp"-->
or on the PHP page
<?php
$crosssellaction='bestsellers';
$csnoshowdiscounts=TRUE;
$csnoproductoptions=TRUE;
?>
<?php include "vsadmin/inc/inccrosssell.php" ?>
The first thing you will need to do is to allow the products to be styled independently from your main product listing. To do this you can add a prefix that will only apply to these cross selling items.
For the ASP version add the following to vsadmin/includes.asp
csstyleprefix="cs"
or for the PHP version add this to vsadmin/includes.php
$csstyleprefix="cs";
Now you can prefix all the css classes you want to target in the home page display without it affecting the main products page.
The first thing you will probably want to do is decide on how many columns of products you want to display. This is defined in the css file and is based on the percentage of the screen width each product should occupy.
For example the following css would give you four columns of products
div.csproduct{
float:left;
width:24%:
margin:2px;
}
Note we use 24% rather than 25% there to allow for the margin between products.
If you wanted 3 columns you would set the width to something like 32%, for columns you'd use 48% and just one column 100%.
You can now choose which elements you want to show in the product display. It may be for example that in your main products listing you choose to display the product id, sku, manufacturer etc but prefer not to on the home page. This can be done through the includes and css file so for example open includes.asp and use the following
Open the files includes.asp and add the parameters below depending on the display you require...
csnobuyorcheckout=TRUE 'This will remove the buy and checkout buttons from the display
csnoshowdiscounts=TRUE 'This will remove the red discount text from the display
csnoproductoptions=TRUE 'This will remove the product options from the display
For the PHP version that would be
$csnobuyorcheckout=TRUE; //This will remove the buy and checkout buttons from the display
$csnoshowdiscounts=TRUE; //This will remove the red discount text from the display
$csnoproductoptions=TRUE; //This will remove the product options from the display
You can also use the "display:none" element in the css file so to remove the product id from your listing add the following to your css file
div.csprodid{
display:none;
}
If you want to remove multiple elements the css would look like this with classes separated by a comma
div.csprodid, div.csprodprice, div.csprodname{
display:none;
}
It is possible to display different formatting for the recommended and best selling products even if they are being shown on the same page. As an example, on our demo store we have recommended products in the center of the page and best selling products in the right hand sidebar.
To do this we simply use different prefixes for the csstyleprefix defined in includes .asp / includes.php. For the recommended products we used
<%
crosssellaction="recommended"
csstyleprefix="xcs"
%>
<!--#include file="vsadmin/inc/inccrosssell.asp"-->
...and for the best sellers
<%
crosssellaction="bestsellers"
csstyleprefix="bcs"
%>
<!--#include file="vsadmin/inc/inccrosssell.asp"-->
The syntax for the PHP versions would be
<?php
$crosssellaction='recommended';
$csstyleprefix='xcs';?>
<?php include "vsadmin/inc/inccrosssell.php" ?>
and
<?php
$crosssellaction='bestsellers';
$csstyleprefix='bcs';?>
<?php include "vsadmin/inc/inccrosssell.php" ?>
This means we can now target the individual elements as they will now have their own css classes, prefixed by xcs for recommended products and bcs for best selling products.
In version 6.7 you can choose which elements to display in the cross selling with the following in vsadmin/includes.asp
csproductpagelayout="productimage,productname,options,price,addtocart"
or in includes.php
$csproductpagelayout='productimage,productname,options,price,addtocart';
..where you can choose any of the elements from the product page layout to add to the list.
In Version 6.6 we added the possibility of adding a Quick Buy button to the product page layout - this is also available for the cross selling display.
If you want to add the Quick Buy button you will need to follow the instructions on our CSS Product Layout page.
It is also possible to only show the Quick Buy button on the home page display if you prefer not to show it on the products page too.
To do this you will need to add an extra line to your display code like this for the ASP Version
<%
crosssellaction="recommended"
productpagelayout="productimage,productname,price,detaillink,quickbuy"
%>
<!--#include file="vsadmin/inc/inccrosssell.asp"-->
...or like this for the PHP Version
<?php
$crosssellaction='recommended';
$productpagelayout='productimage,productname,price,detaillink,quickbuy'; ?>
<?php include "vsadmin/inc/inccrosssell.php" ?>
You will need to be using the css layout for your products and you will also need to format the quick buy pop-up window but we have full details on how to do that on the CSS Product Page Layout help page.
From ECT version 7.0.4 it is possible to dynamically display categories on the home page. First you will need to go the category admin page of the control panel, list categories and in the Quick Entry drop down menu, check the box for "Recommended" for each category you want to display.
Now you want to add the following lines on your home page where you want them to appear
ASP Version
<%
recommendedcategories=TRUE
%>
<!--#include file="vsadmin/inc/inccategories.asp"-->
PHP Version
<?php
$recommendedcategories=TRUE;
include 'vsadmin/inc/inccategories.php';
?>
To style the display we recommend adding them inside a named div like this
<div class="hc">
<%
recommendedcategories=TRUE
%>
<!--#include file="vsadmin/inc/inccategories.asp"-->
</div>
or
<div class="hc">
<?php
$recommendedcategories=TRUE;
include 'vsadmin/inc/inccategories.php';
?>
</div>
and then you can style the home page categories differently from your main categories page eg
div.hc .category{
width:25%;
height:230px;
padding:0px
}
div.hc .catname{
width:100%;
background:#999;
text-align:center;
clear:both
}
div.hc .catname a{color:#fff}
div.hc .catdesc{
display:none
}
That will give you a display something like this
It is possible to show best sellers by category.
Browse to search.php or search.asp, view the page source in the browser.
Look for <option value=""> just below that will be the section id's. Make note of these as we will be using them next to define which category to display for best sellers.
If you are using the vsadmin/includes for best sellers add the parameter there.
For the PHP Version
$crosssellsection="284";
For the ASP Version
crosssellsection=284
If you define the best sellers directly on your home page you would add the parameter on the PHP page like this
<?php
$crosssellaction='bestsellers';
$crosssellsection="284";
$csnobuyorcheckout=TRUE;
$csnoshowdiscounts=TRUE;
$csnoproductoptions=TRUE;
?>
<?php include "vsadmin/inc/inccrosssell.php" ?>
Or for the ASP Version like this
<%
crosssellaction="bestsellers"
crosssellsection=284
%>
<!--#include file="vsadmin/inc/inccrosssell.asp"-->
Its possible to display more than one section by separating them with a comma 15,20,30 you can also have different multiple sections on the home page for best sellers.
From Version 6.6 it is possible to define how many recommended products you want to display regardless of the number of products checked in the product admin page and to randomize the products shown if required. For example to randomize the products and display nine items you would use the following for the ASP Version
orsortby=13
crosssellsectionmax=9
or for the PHP Version
$orsortby=13;
$crosssellsectionmax=9;
Please Note
From Version 6.7 the product description will be shown in the cross selling display if it is included in the quickbuy and productpagelayout settings
