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


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="/how-to-modify-the-product-group/kit-layout/table.aspx">How to Modify the Product Group/Kit Layout/Table.</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="/how-to-modify-the-product-group/kit-layout/table.aspx"><img src="/resize?po=%2fstore%2fimages%2fno-image.png&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 /how-to-modify-the-product-group/kit-layout/table.aspx, this will dynamically render the url for each product.

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

 

How helpful was this article?
Number of questions: 0