Store Home Code Sample

Here is some example code and CSS to build the home page for the store. This is, of course, 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 store home content template. 

<h1>Pins & Needles Store</h1>
{if #categoryCount > 0}
  <ul class="store-categories">
    {loop items="#categories" value="category"}     
      <li>
        <span> 
          {if #category.image}
            <a href="{#category.url}">
              <img alt="{#category.categoryName}" src="{#category.image.srcValue}" />
            </a> 
          {/if}
        </span>
        <a class="item-name" href="{#category.url}">{#category.categoryName}</a>
      </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 {background: url(/layout/images/photo-container.png); height: 151px; width: 151px; display: block; padding: 13px; margin: 0 auto;}
.store-categories li span a {display: block; width: 151px; height: 151px; overflow: hidden;}