Product Detail Code Sample

Here is some example code and CSS to build a product 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.  

Product Detail

HTML:

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

<div class="images">
  {if #product.primaryImages.medium}
    <div id="product-img">
      {if #product.primaryImages.large}
        <a href="{#product.primaryImages.large.srcValue}" rel="lightbox[slides]" title="{#product.productName}">
          {#product.primaryImages.medium.tag}
        </a>
        <div id="product-img-zoom">
          <a href="{#product.primaryImages.large.srcValue}" rel="lightbox" title="{#product.productName}">
            Click to view larger
          </a>
        </div>
      {else}
        {#product.primaryImages.medium.tag}
      {/if}
    </div>
    <div class="additional-images">
      {loop items="#product.additionalImages" value="images"}
        <a href="{#images.imageSet.largeImage.srcValue}" rel="lightbox[slides]" title="{#product.productName}">
          <img src="{#images.imageSet.smallImage.srcValue}" />
        </a>
      {/loop}
    </div>
  {/if}
</div>
<div id="product-details">
    <h1>{#product.productName}</h1>
    <p>{#product.subcaption}</p>
    {#product.orderForm.tag.open}
      <div id="product-price">
        {if #product.orderingOptionsChangePrice}Starting at {/if}
        {#product.currentPrice.value}
        {if #product.pricePerUnit exists && #product.pricePerUnit != "None"} / {#product.pricePerUnit}{/if}
      </div>
      {#product.orderForm.fields.quantity.tag}
      {#product.orderForm.fields.partialQuantity.tag}
      <input type="submit" name="submit" value="Add to Cart" />
    {#product.orderForm.tag.close}
    {#product.description}
    <b>SKU: {#product.sku}</b>
</div>

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.

.images {width:310px;float:left;}
#product-img {border: 1px solid #ccc; padding: 3px; float: left; margin-top: 20px;}
#product-img img {max-width:300px!important;height:auto;}
#product-img-zoom {text-align: center; margin-top: 3px;}
#product-img-zoom a {color: #333; text-decoration: none; padding-left: 20px; background: url(../images/zoom-in.png) no-repeat left center; font-size: 90%;}
#product-img-zoom a:hover {text-decoration: underline;}
#product-details {margin-left: 325px; margin-top: 20px;}
#product-details h1 {margin-top: 0;}
#product-details #quantity {width: 20px;}
#product-price {font-weight: bold;}