Category Detail Code Sample

Here is some example code and CSS to build a category detail page for the store. This is just an example and you have the flexibility to lay out the page to suit your own design.

Below is a screenshot of the layout that this code will build.  

HTML:

Below is the HTML / Branch code that would go in the Template field for the Category Detail content template. 

<h1>{#category.categoryName}</h1>
{#category.description}
{if #category.subCategoryCount > 0}
  <ul class="clearfix" id="store-categories">
    {loop items="#category.subCategories" value="subcategory"}
      <li>
        <span>
          {if #subcategory.image}
            <a href="{#subcategory.url}" title="{#subcategory.categoryName}">
            <img alt="{#subcategory.categoryName}"
                 src="{#subcategory.image.srcValue}" />
            </a>
          {/if}
        </span>
        <a class="item-name" href="{#subcategory.url}">{#subcategory.categoryName}</a>
      </li>
    {/loop}
  </ul>
{/if}
{if #category.productCount > 0}
  {if #category.subCategoryCount > 0}
    <h2>{#category.categoryName} Products</h2>
  {/if}
  <ul class="clearfix" id="store-items">
    {loop items="#category.products" value="product"}
      <li>
        <span>
          {if #product.primaryImages.small}
            <a href="{#product.url}"
               title="{#product.productName}">
              <img alt="{#product.productName}"
                   src="{#product.primaryImages.small.srcValue}" />
            </a>
          {/if}
        </span>
        <a class="item-name" href="{#product.url}">
          {#product.productName}
        </a>
        {if #product.orderForm.fields.options}
          <strong>Starting at {#product.currentPrice.value}
            {if #product.pricePerUnit exists && #product.pricePerUnit != "None"} / {#product.pricePerUnit}{/if}
          </strong>
        {else}
          {#product.orderForm.tag.open}
            <strong>
              {#product.currentPrice.value}
              {if #product.pricePerUnit exists && #product.pricePerUnit != "None"} / {#product.pricePerUnit}{/if}
            </strong>
            <input type="text" name="{#product.orderForm.fields.quantity.name}" value="{#product.orderForm.fields.quantity.value}" class="quantity" />
          {#product.orderForm.fields.partialQuantity.tag}
            <input type="submit" name="submit" value="Add to cart" />
          {#product.orderForm.tag.close}
        {/if}
      </li>
    {/loop}
  </ul>
{/if}

CSS:

Ideally this CSS would go in your CSS file, however, you could also put it in the Inline CSS textbox for the content template.

#store-categories {margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 15px;}
#store-categories li {width: 181px; height: 215px; text-align: center; float: left; margin: 0 8px 8px 0;}
#store-categories li span {height: 151px; width: 151px; display: block; padding: 13px; margin: 0 auto;}
#store-categories li span a {display: block; width: 151px; height: 151px; overflow: hidden;}