Objects and Arrays best practice

//object constructor// 
//I think you're trying to create a closure but in this case the data is being manipulated, simply assigned, so I would just
     //use an object literal and skip this part 
function productEntry (imgSource, productName, productInfo, priceEach,  priceGroup ){
    this.imgSource      = imgSource;
    this.productName    = productName;
    this.productInfo    = productInfo;
    this.priceEach      = priceEach;
    this.priceGroup     = priceGroup;
}

//Using an object literal instead of the above function:
var product1 = {
    imgSource: "img/some-image1.jpeg",
    productName: "Wood Pencil",
    productInfo: "It is a wooden pencil",
    priceEach: 54,
    priceGroup: 765
};

var product2 = {
    //same format as above
};

//create array//
//var productArray =  new Array (); <--while it works, it's verbose...
var productArry = [];  //shorthand syntax that does the same thing

// use the object constructor to build array
//
//productArray[0] = new productEntry( "img/some-image1.jpeg", "Wood Pencil", "It is a wooden pencil", 54, 765);
//productArray[1] = new productEntry("img/some-image2.jpeg", "Biro Pen", "Good if you need a biro pen", 87, 578);
//productArray[2] = new productEntry( "img/some-image3.jpeg", "Felt Tip", "It's a felt tip Pen", 43 ,578 );
//productArray[3] = new productEntry( "img/some-image4.jpeg", "Crayon", "It's a crayon... nice", 52, 456 );
//productArray[4] = new productEntry( "img/img/some-image5.jpeg", "Permanent Marker", "Good for grafitti", 43 ,2345 //);

//Since all you *really* doing is just assigning stuff to the end of the array, we can simplify, by doing:
productArray.push(product1, product2, product3);

//down the road, you added another product, all we have to type to add is..
productArray.push(product4);

// use for to loop throught the array and append to the page//
//if you have 2,000 items, creating a length variable outside of the loop optimizes since you're only creating the variable once and
//  not everytime it iterates. Also note the syntactic sugar of replacing i = i +1 with i++ (does the same thing).
var productLength = productArray.length
for ( var i = 0; i<productLength, i++{
    var imgPrint = productArray[i].imgSource;
    var namePrint = productArray[i].productName;
    var infoPrint = productArray[i].productInfo;
    var priceEachPrint  = productArray[i].priceEach;
    var priceGroupPrint = productArray[i].priceGroup;

  //When using jQuery and appending many elements to the screen, document fragments are your friend!
  //Instead of below, which adds each element, one by one to the DOM..
                '<div class="product-template product-pens" id="product001">' + 
                '<div class="product-img">' +
                '<img src=" ' + imgPrint + ' " alt="product-img">' +
                '</div>' +
                '<div class="product-info">' +
                '<h3>' + namePrint +'</h3> ' +
                '<p>' + infoPrint + '</p>' +
                '</div>' +
                '<div class="product-price">' +
                '<p>Price Each &sect;' + priceEachPrint +'</p>' +
                '<p>Price Group &sect;' + priceGroupPrint  +  '</p>' + 
                '<p>Any special offer</p>' +
                '<div class="button add">ADD TO BASKET</div>' +   
                '</div>'
  //It can be written as:
//create a container
   var documentFragment = $(document.createDocumentFragment());
//loop as usual
    for(var i=0; i < productLength; i++) {
       var imgPrint = productArray[i].imgSource;
        var namePrint = productArray[i].productName;
        var infoPrint = productArray[i].productInfo;
        var priceEachPrint  = productArray[i].priceEach;
        var priceGroupPrint = productArray[i].priceGroup;

//add everything to the fragment by creating a 'productSheet' variable
    var productSheet = $('<div class="product-template product-pens" id="product001">' + 
                '<div class="product-img">' +
                '<img src=" ' + imgPrint + ' " alt="product-img">' +
                '</div>' +
                '<div class="product-info">' +
                '<h3>' + namePrint +'</h3> ' +
                '<p>' + infoPrint + '</p>' +
                '</div>' +
                '<div class="product-price">' +
                '<p>Price Each &sect;' + priceEachPrint +'</p>' +
                '<p>Price Group &sect;' + priceGroupPrint  +  '</p>' + 
                '<p>Any special offer</p>' +
                '<div class="button add">ADD TO BASKET</div>' +   
                '</div>');
//All the stuff in the product sheet is wrapped nicely in a variable and only appended once
     documentFragment.append(productSheet);
   }//End for-loop
//Now when we touch the DOM by appending items, we're only adding one item (filled with all the stuff as before)
    $('.product-container').append(documentFragment);