Displaying the Thumbnail Image to the Left of the Product and all its Options

[KB]

By default, the thumbnail image in the shopping cart will only appear next to the product line, and this can cause a gap to appear between a product line and its options.

To work around this, it is possible to edit the 'Cart Product Details' layout (within the 'Shopping Cart Product Details' tab in the library) to use CSS 'floats' to position the cart elements rather tidier.
To begin, open the 'Cart Product Details' layout and replace its entire contents with the code below:

<table width="100%" border="0">
<tr>
<Actinic:XMLTEMPLATE NAME="ProductLine">
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
   <td width="90">
      <Actinic:Variable Name="ProdRef"/>
   </td>
</actinic:block>
<Actinic:REMOVE TAG="ImageLine"><div class="cartbox"><img src="<actinic:variable name="Thumbnail" />" height="40" width="40" style="border:1px solid red;"/></div></Actinic:REMOVE>

<Actinic:Variable Name="ProductNameOnline"/>
<Actinic:REMOVE TAG="DuplicateLinks">
   <Actinic:Variable Name="DuplicateLinkCaption"/>
      <Actinic:XMLTEMPLATE NAME="DuplicateLinkLine">

         <Actinic:Variable Name="DuplicateLink"/>
      </Actinic:XMLTEMPLATE>
</Actinic:REMOVE>

<div style="float:right"><Actinic:Variable Name="Quantity"/></div><br>

</Actinic:XMLTEMPLATE>

<Actinic:XMLTEMPLATE NAME="InfoLine">

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
      <td width="90">
           &nbsp;
      </td>
</actinic:block>

         <br><Actinic:Variable Name="PromptLabel"/>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
      <td width="90">
         &nbsp;
      </td>
</actinic:block>

         <br><Actinic:Variable Name="PromptValue"/>


</Actinic:XMLTEMPLATE>

<Actinic:XMLTEMPLATE NAME="DateLine">


<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
      <td width="90">
         &nbsp;
      </td>
</actinic:block>
         <br><Actinic:Variable Name="PromptLabel"/>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
      <td width="90">
        &nbsp;
      </td>
</actinic:block>
         <br><Actinic:Variable Name="PromptValue"/>

</Actinic:XMLTEMPLATE></tr></table>

Then open the 'Actinic Stylesheet' layout and add in the following class definition:

.cartbox{
float:left;
margin-right:5px;
}

Disclaimer: This code was provided by an SellerDeck user via the SellerDeck Community (http://community.SellerDeck.com/) and so can't be supported by the SellerDeck Technical Support team.