How to Modify the Product Group/Kit Layout/Table.

Follow

 

To modify the Product Group/Kit Layout, Go to Themes > Your Active Theme


From the menu, Go to  Pages > Product Details > HTML Editor


Here you will see the HTML for the Product Details page. The Product Group Layout is in a Visibilityarea called ProductGroupArea.


The Layout is divided into 3 main parts, the Table header, and the 2 alternating rows. Any changes made to one of these sections should also be reflected in the other 2 (such as adding a new column)

Example: Add a Column with a Link to the Kit product.

We'll add the new header the the Table Header section <th>Item Link</th>

Then we'll add the link to the 2 row sections <td><href="##ITEMURL##">##ITEMNAME##</a></td>

Example: Add the item thumbnails to the table for the child products

And here is the HTML

First we add an emtpy table header to make the table render properly <th></th>

Then we add the html for the thumbnail <td><href="##ITEMURL##"><img src="##IMAGERESIZER[path=##ITEMPHOTOURL##,bw=50,lr=t]##"></a></td>

As in the previous example we will add this to both rows.

First the link points its href to ##ITEMURL##, this will dynamically render the url for each product.

The ##IMAGERESIZER[]## url takes several paramerts. We will be giving the parameters path (image path), bw (bound width), and lr (lock ratio)

 

Have more questions? Submit a request

Comments