Product List
- Other product list styles
  - .basket
  - .favourites
  - .enquiry
  - .remove

Product List

Product lists all use similar markup with plenty of hooks to achieve very different designs.

The outer BOX of product lists has the class name .product-list so it is easy to define a site wide product list style eg. in favourites, special products or the order pad.

An example of a product list:

  <ol>
    <li class="odd c one">
      <h3><a href="...">Some Clothing <span class="pid">CLTH9</span></a></h3>
      <a href="..."><img alt="#" src="..." width="100" height="100" class="image" /></a>
      <div class="body">
         This is a really nice piece of clothing...
      </div>
      <p class="stock"><span>3</span> in stock</p>
      <p class="price-box"><span class="price">£20.00</span></p>
      <div class="options">
        <form method="post" action="..." class="small enquiry">
          <fieldset>
            <input type="submit" value="Add to Enquiry" />
          </fieldset>
        </form>
        <form method="post" action="..." class="small basket">
          <fieldset>
            <input type="submit" value="Add to Basket" />
          </fieldset>
        </form>
        <form method="post" action="..." class="small favourites">
          <fieldset>
            <input type="submit" value="Add to Favourites" />
          </fieldset>
        </form>
      </div>
    </li>
    <li class="even a two">
      <h3><a href="...">Some More Clothing <span class="pid">CLTH10</span></a></h3>
      <a href="..."><img alt="#" src="..." width="100" height="100" class="image" /></a>
      <div class="body">
         This is a really nice piece of clothing...
      </div>
      <p class="stock"><span>0</span> in stock</p>
      <p><span class="price">£20.00</span></p>
      <div class="options">
        <form method="post" action="..." class="small enquiry">
          <fieldset>
            <input type="submit" value="Add to Enquiry" />
          </fieldset>
        </form>
        <form method="post" action="..." class="small basket">
          <fieldset>
            <input type="submit" value="Add to Basket" />
          </fieldset>
        </form>
        <form method="post" action="..." class="small favourites">
          <fieldset>
            <input type="submit" value="Add to Favourites" />
          </fieldset>
        </form>
      </div>
    </li>
  </ol>

As you can see there are plenty CSS hooks available. From the top:

<li class=“odd c one”>
You won't need to use all of these selectors, typically just one type
- .odd / .even these classes are applied alternately to the list items to allow 2 column lists or row striping
- .a / .b / .c these classes are applied every 3 list items, see the pattern forming?
- .one / .two / .three /.four these classes are applied every four list items
<h3><a href=”…”>Some Clothing <span class=“pid”>CLTH1</span></a></h3>
The only unusual part is the <span> containing the product code. The class name .pid is used on every element containing a product id, incase you want to alter it typographically or hide it altogether.
<a href=”…”><img src=”…” alt=”…” class=“image” /></a>
probably worth getting rid of the .image class
<div class=“body”>…</div>
This is a container with a short excerpt from the body text of the product detail. You can hide it altogether if desired using .product-list li .body { display: none; }
<p class=“stock”><span>3</span> in stock</p>
You can style the stock amount listing if has been enabled in site admin by unchecking 'allow zero stock orders'
<p class=“price-box”><span class=“price”>£23.00</span></p>
The class .price is used throughout the freestyle template, can be used to make price tags look consistent across the board. Other text in the <p> element will be phrases like 'from', 'inc VAT', 'per pack' so you might want to alter the paragraph text styling here.
<div class=“options”>
There is an '.options' <div> around every set of buttons on freestyle. Useful for positioning or adding a background.
<form action=”…” class=“small basket”>
These mini forms are small forms so you only need to style the one input within them. There are a couple of class names that can be associated with small forms in product lists and elsewhere, find out here.

Product List

Other product list styles

.basket

.favourites

.enquiry

.remove