Custom template div tags

[nguidry]

I've spent hours trying to get the custom template to work and am almost
there.
However, i have a few tweaks I would like to do but can't figure out. The
url is:
http://prejeans.net/store/-.html.  The page Template is using a
table. I would like to be able to put the products in a 3 column format and
use div tags instead of a table so i can format my css stylesheet to
accommodate the div tags and change the background colors. I would also like
to have the product name, sku, and price each on a separate line. I tried
using <br /> tags but can't seem to get this to work either. Can i possibly
look at a template or can you give some assistance?
Thanks

[ShopSite Lauren]

In your page template, you will want to have the loop tags without the column tags and without the table cell options. Something very simplified like:

[-- IF PAGE.NumProducts "0" --]
[-- ELSE --]
[-- LOOP PRODUCTS --]
[-- PRODUCT --]
[-- END_LOOP PRODUCTS --]
[-- END_IF --]

In your product template, within the DEFINE PRODUCT section, you will want to have something basic as well, similar to:

<div class="product-loop">
[-- IF PRODUCT.DisplayMoreInformationPage --]
[-- IF PRODUCT.Graphic --]<a href="[-- PRODUCT.MoreInfoURL --]">[-- PRODUCT.Graphic --]</a>[-- END_IF --]
<a href="[-- PRODUCT.MoreInfoURL --]">[-- PRODUCT.Name --]</a>
[-- ELSE --]
[-- IF PRODUCT.Graphic --]<span>[-- PRODUCT.Graphic --]</span>[-- END_IF --]
<span>[-- PRODUCT.Name --]</span>
[-- END_IF --]
[-- END_IF --]
[-- IF PRODUCT.Sku --]
<span>[-- PRODUCT.Sku --]</span>
[-- END_IF --]
<span>
[-- IF PRODUCT.SaleAmount --]
<strike>[-- PRODUCT.Price --]</strike> [-- PRODUCT.SaleAmount --]
[-- ELSE --]
[-- PRODUCT.Price --]
[-- END_IF --]
</span>
</div>

Next, for the columns. Are all your product DIVs going to be exactly the same height? If so, then you can just set the height and the width and let the divs wrap. Your CSS would be similar to the following:

<style type="text/css">
div.product-loop {
height: 300px;
width: 33%;
float: left;
clear: none;
padding: 0px;
margin: 0px;
}
div.product-loop a, div.product-loop span {
display: block;
text-align: center;
}
</style>

If your product information/divs is/are not all the same height (some might have longer names, some might have longer descriptions, etc), then you will want to add some VAR tags in so that you create your own row rather than just let the divs fit where they fit. If this is the case, add a little code to your CSS,
.clear {clear: both;}

and add some var tags to your page template loop section so that after every 3rd product, a div that clears the row will be added:

[-- IF PAGE.NumProducts "0" --]
[-- ELSE --]
[-- VAR.ProductCounter "0" --]
[-- LOOP PRODUCTS --]
[-- PRODUCT --][-- VAR.ProductCounter INC --]
[-- IF VAR.ProductCounter "3" --]<div class="clear"></div>[-- VAR.ProductCounter "0" --][-- END_IF --]
[-- END_LOOP PRODUCTS --]
[-- END_IF --]

[nguidry]

I saw your name as one of the certified shop site designers. I will give this a try as i'm pressed for time and the customer wants to get the online store up and going. I also do freelance design and this is my first attempt at shop site. I will let you know how this works out. Thanks very much for the reply.