Layout Designs for 3rd Party Designers
Nomad was built on Bootstrap 2.3.2 and has several customizable page elements. These elements are the Page Header, User Menu, Left Rail/Right Rail, Footer. You can also write your custom content inside the Page Body, such as the homepage and other content pages.
We ask that you review the following code samples so that you, as a designer understand what elements are available for you to design. We will also provide a test site for you to review the pages mentioned below. Once you have reviewed the Nomad standard template and layout, you can begin designing your mockups. We ask that you design the Homepage, Category Listing, Product Listing, Product Details, and Custom Page (ie. About, Contact, Terms and Conditions). In order to be efficient, we ask that you start with the homepage design and submit it to us to be reviewed by a project manager or designer. This will help ensure that no time is wasted in the design phase.
We can give you examples of our current client designs to get an idea of our general layout.
The standard template CSS/LESS site.less can be found in the Assets Manager under /site/css. The link to the Asset Manager can be found under the "Design" navigation in the NOPS header. The Assets manager also has directories for /docs, /img, and /js. You can upload your customer documents, images, and JavaScript to these directories.
Here is the standard layout for each page:
<div id="wrapper">
<div id="wrapper-inner">
<div id="page-header">
<div id="page-header-inner">
...
</div>
</div>
<div id="page-body">
<div id="page-body-inner">
...
</div>
</div>
<footer id="page-footer">
<div id="page-footer-inner">
...
</div>
</footer>
</div>
</div>
The inner HTML on the page body varies depending on the style page you choose. There are 4 options of page styles: 1 Column, 2 Column Rail on Left, 2 Column Rail on Right, 3 Column.
1 Column:
<div id="page-body">
<div id="page-body-inner">
<div class="row layout-1-column">
<div id="main" class="span13">
<div class="breadcrumbs">...</div>
<div id="title-header"><h1>Page Title</h1></div>
<div id="system-page-html" class="page-html">
CUSTOM CODE GOES HERE
</div>
</div>
</div>
</div>
</div>
2 Column Rail on Left:
<div id="page-body">
<div id="page-body-inner">
<div class="row layout-2-column layout-2-column-left-rail">
<div id="rail-left" class="rail span3">
... LEFT RAIL CONTENT
</div>
<div id="main" class="span10">
<div class="breadcrumbs">...</div>
<div id="title-header"><h1>Page Title</h1></div>
<div id="system-page-html" class="page-html">
CUSTOM CODE GOES HERE
</div>
</div>
</div>
</div>
</div>
2 Column Rail on Right:
<div id="page-body">
<div id="page-body-inner">
<div class="row layout-2-column layout-2-column-right-rail">
<div id="main" class="span10">
<div class="breadcrumbs">...</div>
<div id="title-header"><h1>Page Title</h1></div>
<div id="system-page-html" class="page-html">
CUSTOM CODE GOES HERE
</div>
</div>
<div id="rail-right" class="rail span3">
... RIGHT RAIL CONTENT
</div>
</div>
</div>
</div>
3 Column Rail on Left, Rail on Right:
<div id="page-body">
<div id="page-body-inner">
<div class="row layout-2-column layout-2-column-right-rail">
<div id="rail-left" class="rail span3">
... LEFT RAIL CONTENT
</div>
<div id="main" class="span7">
<div class="breadcrumbs">...</div>
<div id="title-header"><h1>Page Title</h1></div>
<div id="system-page-html" class="page-html">
CUSTOM CODE GOES HERE
</div>
</div>
<div id="rail-right" class="rail span3">
... RIGHT RAIL CONTENT
</div>
</div>
</div>
</div>
The following pages are system pages that are templated but can be modified with CSS/LESS: Category Page/Product Listing page, Product Page, Cart Page, Checkout Page, Account Page.
CATEGORY PAGE LAYOUT
The following templated HTML will be generated inside the <div id="main"></div> element on the Category Page.
<div id="main" class="span7">
<div class="breadcrumbs">...</div>
<div id="title-header"><h1>Category Name</h1></div>
<div id="subcategories" class="clearfix">
<ul class="thumbnails">
<li class="thumbnail">
<a href="/category-name">
<img class="img-polaroid" src="//amazon.aws.path/category-name.jpg" alt="category name">
<span>Category Name</span>
</a>
</li>
<li class="thumbnail">
<a href="/category-name-2">
<img class="img-polaroid" src="//amazon.aws.path/category-name-2.jpg" alt="category name 2">
<span>Category Name 2</span>
</a>
</li>
<li class="thumbnail">
... REPEATING LOOP
</li>
</ul>
</div>
</div>
You will be able to modify the category loop using CSS/LESS in the site.less file.
PRODUCT LISTING LAYOUT
The following templated HTML will be generated inside the <div id="main"></div> element on the Category Page/Product Listing Page.
<div id="main" class="span10">
<div class="breadcrumbs">...</div>
<div id="title-header">
<h1>Page Title</h1>
</div>
<div id="product-list">
<!-- TEMPLATED SORT, PAGE SIZE, FILTERS -->
<div class="product-list-header clearfix">
<div id="product-sort" class="btn-group">
<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-list"></i> Sort By <span class="caret"></span> </a>
<ul id="sort-menu" class="dropdown-menu">
<li><a href="/category-name?s=name">Sort by Name</a></li>
<li><a href="/category-name?s=priceasc">Sort by Low Price</a></li>
<li><a href="/category-name?s=pricedesc">Sort by High Price</a></li>
</ul>
</div>
<div class="btn-page-size btn-group">
<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"> 44 items, 20 per page <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a href="/category-name?ps=20">Default: 20</a></li>
<li class="divider"></li>
<li><a href="/category-name?ps=25">Items Per Page: 25</a></li>
<li><a href="/category-name?ps=50">Items Per Page: 50</a></li>
<li><a href="/category-name?ps=75">Items Per Page: 75</a></li>
<li><a href="/category-name?ps=100">Items Per Page: 100</a></li>
</ul>
</div>
<div id="product-filters" class="btn-group">
<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-filter"></i> Filter <span class="caret"></span> </a>
<div id="filters-menu" class="dropdown-menu">
<form action="/category-name" method="get" novalidate>
<div class="product-tag-filter-set">
<h5>Product Tag Set 1</h5>
<div class="product-tag-filters">
<label class="checkbox tag-result">
<input type="checkbox" name="product-tag-set-1" value="tag-value-1" class="tag-filter">
<span class="tag-result">tag-value-1</span> <span class="tag-result-count">(5)</span>
</label>
<label class="checkbox tag-result">
<input type="checkbox" name="product-tag-set-1" value="tag-value-2" class="tag-filter">
<span class="tag-result">tag-value-2</span> <span class="tag-result-count">(7)</span>
</label>
</div>
</div>
<div class="product-tag-filter-set">
<h5>Product Tag Set 2</h5>
<div class="product-tag-filters">
<label class="checkbox tag-result">
<input type="checkbox" name="product-tag-set-2" value="tag-value-1" class="tag-filter">
<span class="tag-result">tag-value-1</span> <span class="tag-result-count">(13)</span>
</label>
<label class="checkbox tag-result">
<input type="checkbox" name="product-tag-set-2" value="tag-value-2" class="tag-filter">
<span class="tag-result">tag-value-2</span> <span class="tag-result-count">(24)</span>
</label>
</div>
</div>
<input id="s" name="s" type="hidden" value="">
</form>
</div>
</div>
</div>
<!-- PRODUCT LISTING -->
<div id="products" class="clearfix">
<!-- PRODUCT PAGINATION -->
<div class="pagination pagination-head">
<div class="summary">Page 1 of 3 ( 44 items )</div>
<ul>
<li class="disabled"><a class="" href="">«</a></li>
<li class="active"><a class="" href="/category-listing">1</a></li>
<li><a class="" href="/category-listing?p=2">2</a></li>
<li><a class="" href="/category-listing?p=3">3</a></li>
<li><a class="" href="/category-listing?p=3">»</a></li>
</ul>
</div>
<!-- PRODUCT LOOP -->
<div class="rows">
<div class="row product-summary mono-item-product">
<div class="product-image span2">
<a href="/product-name" title="Product Name">
<img class="img-polaroid" src="//amazon.aws.path/category-name.jpg" alt="Product Name">
</a>
</div>
<div class="product-details span6">
<h5><a class="product-details-link" href="/product-name">Product Name</a></h5>
<p class="part-number"> <strong>p/n:</strong> 11111 </p>
<p class="product-description preserve-whitespace">Product Description</p>
</div>
<div class="product-purchase span2">
<div class="price-regular"> $10.99/EA </div>
<form action="/cart/add" method="post" novalidate>
<div class="product-quantity">
<div class="arrows">
<input type="text" name="quantity" value="1" class="span1" data-val="true" data-val-number="Must be numeric" data-val-quantity="" data-val-quantity-max="" data-val-quantity-min="1" data-val-quantity-inc="1">
<span><i class="up"></i><i class="dn"></i></span> </div>
<span class="field-validation-valid" data-valmsg-for="quantity" data-valmsg-replace="true"></span> </div>
<input type="submit" value="Buy" class="btn btn-primary">
<input type="hidden" name="pid" value="5f732e10-d69c-439a-b078-472ecb98b044">
</form>
</div>
</div>
<div class="row product-summary multi-item-product">
<div class="product-image span2">
<a href="/product-name" title="Product Name">
<img class="img-polaroid" src="//amazon.aws.path/category-name.jpg" alt="Product Name">
</a>
</div>
<div class="product-details span6">
<h5><a href="/product-name">Product Name</a></h5>
<p class="product-description preserve-whitespace">Product Description</p>
</div>
<div class="product-purchase span2">
<div class="price-range">From $23.45/EA</div>
<a class="btn btn-primary" href="/product-name">View</a>
</div>
</div>
</div>
<!-- PRODUCT PAGINATION -->
<div class="pagination pagination-foot">
<div class="summary">Page 1 of 3 ( 44 items )</div>
<ul>
<li class="disabled"><a class="" href="">«</a></li>
<li class="active"><a class="" href="/category-listing">1</a></li>
<li><a class="" href="/category-listing?p=2">2</a></li>
<li><a class="" href="/category-listing?p=3">3</a></li>
<li><a class="" href="/category-listing?p=3">»</a></li>
</ul>
</div>
</div>
</div>
</div>
You will be able to modify the product loop, product list header buttons, and pagination using CSS/LESS in the site.less file.
PRODUCT PAGE LAYOUT - Mono-Item-Product
The following templated HTML will be generated inside the <div id="main"></div> element on the Product Page.
<div id="main" class="span10">
<div class="breadcrumbs">...</div>
<div class="row mono-item-product" id="product" itemscope="" itemtype="http://schema.org/Product">
<div id="product-inner" class="span10">
<h1> <span itemprop="name">Product Name</span> </h1>
<div class="row">
<div id="product-rail" class="span3">
<div class="gallery">
<div class="primary">
<a title="Product Name" href="//amazon.aws.path/product-name-large.jpg" class="open-modal">
<img class="img-polaroid" src="//amazon.aws.path/product-name.jpg" alt="Product Name">
<span><i class="icon-zoom-in"></i> Click to view a larger image</span>
</a>
</div>
</div>
</div>
<div id="product-main" class="span7">
<div class="well product-purchase">
<form action="/cart/add" class="form-horizontal" method="post" novalidate>
<dl class="product-options dl-horizontal">
<dt class="part-number-label">Part Number:</dt>
<dd class="part-number-value" itemprop="sku">11111</dd>
<dt class="tag-label primary-tag-label material-tag-label">Material:</dt>
<dd class="tag-value primary-tag-value">Material Tag Value</dd>
<dt class="price-label"> Price: </dt>
<dd class="price-value" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer" data-value="15.700000">
<div class="price-regular" itemprop="price"> $15.70/EA </div>
</dd>
</dl>
<div class="control-group product-quantity">
<label class="control-label">Quantity:</label>
<div class="controls">
<div class="product-quantity">
<div class="arrows">
<input type="text" name="quantity" value="1" class="span1" data-val="true" data-val-number="Must be numeric" data-val-quantity="" data-val-quantity-max="" data-val-quantity-min="1" data-val-quantity-inc="1">
<span><i class="up"></i><i class="dn"></i></span> </div>
<span class="field-validation-valid" data-valmsg-for="quantity" data-valmsg-replace="true"></span> </div>
</div>
</div>
<div class="form-actions"> <span class="hide" itemscope="" itemtype="http://schema.org/Offer">
<link itemprop="availability" href="http://schema.org/InStock">
In Stock </span>
<input type="submit" value="Add to Cart" class="btn btn-primary">
<div class="btn-group btn-save-to-list" data-target="Add">
<button class="btn dropdown-toggle" data-toggle="dropdown"> Save to List <span class="caret"></span> </button>
<ul class="dropdown-menu">
<li> <a class="add-to-shopping-list" href="/lists/edit">Add to a new Shopping List</a> </li>
</ul>
</div>
</div>
</form>
</div>
<div id="product-tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#overview" data-toggle="tab">Overview</a></li>
</ul>
<div id="product-tab-content" class="tab-content">
<div class="tab-pane active" id="overview" itemprop="description">
<div id="full-description">
<p>Product Description ...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div id="related-product-sets">
<section id="related-product-set-alsopurchased" class="related-product-set">
<header> <strong>Customers Also Purchased</strong> </header>
<div class="body">
<div class="related-product" itemprop="isSimilarTo" itemscope="" itemtype="http://schema.org/Product">
<div class="related-product-image">
<a href="/related-product-link" title="Related Product Name">
<img class="img-polaroid" src="//amazon.aws.path/related-product-name.jpg" alt="Related Product Name">
</a>
</div>
<h5><a class="related-product-link" href="/related-product-link" itemprop="url"><span itemprop="name">Related Product Name</span></a></h5>
<div class="related-product-price"> <span class="price-regular"> $1,401.65/EA </span> </div>
</div>
</div>
</section>
<section id="related-product-set-suggested" class="related-product-set">
<header> <strong>Suggested Items</strong>
<div class="pagination pagination-small">
<ul>
<li class="disabled"> <span><</span> </li>
<li><span>Page 1 of 2</span></li>
<li> <a data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#related-product-set-suggested" href="">></a> </li>
</ul>
</div>
</header>
<div class="body">
<div class="related-product" itemprop="isSimilarTo" itemscope="" itemtype="http://schema.org/Product">
<div class="related-product-image">
<a href="/suggested-item-link" title="Suggested Item name">
<img class="img-polaroid" src="//amazon.aws.path/related-product-name.jpg" alt="Suggested Item name">
</a>
</div>
<h5><a class="related-product-link" href="/suggested-item-link" itemprop="url"><span itemprop="name">Suggested/Related Item Name</span></a></h5>
<div class="related-product-price"> <span class="price-regular"> $535.35/EA </span> </div>
</div>
<div class="related-product" itemprop="isSimilarTo" itemscope="" itemtype="http://schema.org/Product">
<div class="related-product-image">
<a href="/suggested-item-link" title="Suggested Item name">
<img class="img-polaroid" src="//amazon.aws.path/related-product-name.jpg" alt="Suggested Item name">
</a>
</div>
<h5><a class="related-product-link" href="/suggested-item-link" itemprop="url"><span itemprop="name">Suggested/Related Item Name</span></a></h5>
<div class="related-product-price"> <span class="price-regular"> $535.35/EA </span> </div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
You will be able to modify the product details page using CSS/LESS in the site.less file.
PRODUCT PAGE LAYOUT - Mono-Item-Product
The following templated HTML will be generated inside the <div id="main"></div> element on the Product Page.
<div id="main" class="span10">
<div class="breadcrumbs">...</div>
<div class="row multi-item-product" id="product" itemscope="" itemtype="http://schema.org/Product">
<div class="span10">
<h1> <span itemprop="name">Product Name</span> </h1>
<div class="row">
<div id="product-rail" class="span3">
<div class="gallery">
<div class="primary">
<a title="Product Name" href="//amazon.aws.path/product-name-large.jpg" class="open-modal">
<img class="img-polaroid" src="//amazon.aws.path/product-name.jpg" alt="Product Name">
<span><i class="icon-zoom-in"></i> Click to view a larger image</span>
</a>
</div>
</div>
</div>
<div id="product-main" class="span7">
<div id="full-description" itemprop="description">
<p>Product Description ...</p>
</div>
</div>
<div id="product-items-wrapper">
<div id="product-items-header" class="product-list-header clearfix">
<div id="product-filters" class="btn-group">
<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-filter"></i> Filter <span class="caret"></span> </a>
<div id="filters-menu" class="dropdown-menu">
<form action="" method="get" novalidate>
<div class="product-tag-filter-set">
<h5>Product Tag Filter 1</h5>
<div class="product-tag-filters">
<label class="checkbox tag-result">
<input type="checkbox" name="product-tag-filter-1" value="product-tag-filter-1" class="tag-filter">
<span class="tag-result">Some Value</span> <span class="tag-result-count">(2)</span> </label>
</div>
</div>
<div class="product-tag-filter-set">
<h5>Product Tag Filter 2</h5>
<div class="product-tag-filters">
<label class="checkbox tag-result">
<input type="checkbox" name="product-tag-filter-2" value="product-tag-filter-2" class="tag-filter">
<span class="tag-result">Some Value 2</span> <span class="tag-result-count">(2)</span> </label>
</div>
</div>
<div class="product-tag-filter-set">
<h5>Product Tag Filter 3</h5>
<div class="product-tag-filters">
<label class="checkbox tag-result">
<input type="checkbox" name="product-tag-filter-1" value="product-tag-filter-3" class="tag-filter">
<span class="tag-result">Some Value 3</span> <span class="tag-result-count">(2)</span> </label>
</div>
</div>
<input id="s" name="s" type="hidden" value="">
</form>
</div>
</div>
</div>
<table id="product-items" class="table table-striped table-bordered product-items">
<thead>
<tr>
<th><input type="checkbox" class="select-all"></th>
<th>Option</th>
<th class="tag-label primary-tag-label tag-value-1-tag-label"> Tag Value 1 </th>
<th class="tag-label primary-tag-label tag-value-2-tag-label"> Tag Value 2 </th>
<th class="tag-label primary-tag-label tag-value-3-tag-label"> Tag Value 3 </th>
<th>Unit</th>
<th>Purchase</th>
</tr>
</thead>
<tbody>
<tr class="product-item" itemscope="" itemtype="http://schema.org/Offer">
<td><input type="checkbox" class="select-item" value="true"></td>
<td><div class="product-item-name" itemprop="name">
<span>Multi-Item Product Name</span>
<a class="product-item-info btn btn-primary btn-mini popover-toggle" data-content="#tooltip-649b760f-351a-470b-bedc-35fc492d07a3" data-placement="top" data-trigger="hover" data-html="true" data-original-title="" title=""> <i class="icon-white icon-info-sign"></i> </a>
<div id="tooltip-649b760f-351a-470b-bedc-35fc492d07a3" class="hide">
<div class="product-item-description"> Multi-Item Product Name Tool Tip </div>
</div>
</div>
<div class="product-item-part-number" itemprop="sku">11111</div></td>
<td class="tag-value primary-tag-value"> Some Tag Value </td>
<td class="tag-value primary-tag-value"> Some Tag Value</td>
<td class="tag-value primary-tag-value"> Some Tag Value </td>
<td><div class="price-regular" itemprop="price"> $3.45/EA </div></td>
<td class="purchase"><form action="/cart/add" class="form-horizontal" method="post" novalidate>
<input type="hidden" name="pid" value="">
<input name="__RequestVerificationToken" type="hidden" value="">
<div class="product-quantity">
<div class="arrows">
<input type="text" name="quantity" value="1" class="span1" data-val="true" data-val-number="Must be numeric" data-val-quantity="" data-val-quantity-max="" data-val-quantity-min="1" data-val-quantity-inc="1">
<span><i class="up"></i><i class="dn"></i></span> </div>
<span class="field-validation-valid" data-valmsg-for="quantity" data-valmsg-replace="true"></span> </div>
<input type="submit" value="Buy" class="btn btn-primary btn-mini">
<span class="hide" itemscope="" itemtype="http://schema.org/Offer">
<link itemprop="availability" href="http://schema.org/InStock">
In Stock </span>
</form></td>
</tr>
<tr class="product-item" itemscope="" itemtype="http://schema.org/Offer">
<td><input type="checkbox" class="select-item" value="true"></td>
<td><div class="product-item-name" itemprop="name">
<span>Multi-Item Product Name</span>
<a class="product-item-info btn btn-primary btn-mini popover-toggle" data-content="#tooltip-649b760f-351a-470b-bedc-35fc492d07a3" data-placement="top" data-trigger="hover" data-html="true" data-original-title="" title=""> <i class="icon-white icon-info-sign"></i> </a>
<div id="tooltip-649b760f-351a-470b-bedc-35fc492d07a3" class="hide">
<div class="product-item-description"> Multi-Item Product Name Tool Tip </div>
</div>
</div>
<div class="product-item-part-number" itemprop="sku">11111</div></td>
<td class="tag-value primary-tag-value"> Some Tag Value </td>
<td class="tag-value primary-tag-value"> Some Tag Value</td>
<td class="tag-value primary-tag-value"> Some Tag Value </td>
<td><div class="price-regular" itemprop="price"> $3.45/EA </div></td>
<td class="purchase"><form action="/cart/add" class="form-horizontal" method="post" novalidate>
<input type="hidden" name="pid" value="">
<input name="__RequestVerificationToken" type="hidden" value="">
<div class="product-quantity">
<div class="arrows">
<input type="text" name="quantity" value="1" class="span1" data-val="true" data-val-number="Must be numeric" data-val-quantity="" data-val-quantity-max="" data-val-quantity-min="1" data-val-quantity-inc="1">
<span><i class="up"></i><i class="dn"></i></span> </div>
<span class="field-validation-valid" data-valmsg-for="quantity" data-valmsg-replace="true"></span> </div>
<input type="submit" value="Buy" class="btn btn-primary btn-mini">
<span class="out-of-stock">Out of Stock</span>
<span class="hide" itemscope="" itemtype="http://schema.org/Offer">
<link itemprop="availability" href="http://schema.org/InStock">
In Stock </span>
</form></td>
</tr>
</tbody>
</table>
<hr>
<div id="product-multi">
<h5>With Selected Items: </h5>
<div id="add-many-error" class="alert hide"></div>
<form action="/cart/addmany" method="post" novalidate>
<input type="hidden" id="add-many-payload" name="payload">
<button type="button" id="btn-add-many-to-cart" class="btn btn-primary">Add to Cart</button>
<div class="btn-group btn-save-to-list" data-target="AddMany">
<button class="btn dropdown-toggle" data-toggle="dropdown"> Save to List <span class="caret"></span> </button>
<ul class="dropdown-menu">
<li> <a class="add-to-shopping-list" href="/lists/edit">Add to a new Shopping List</a> </li>
</ul>
</div>
</form>
</div>
</div>
</div>
<hr>
<div id="related-product-sets">
<section id="related-product-set-alsopurchased" class="related-product-set">
<header> <strong>Customers Also Purchased</strong> </header>
<div class="body">
<div class="related-product" itemprop="isSimilarTo" itemscope="" itemtype="http://schema.org/Product">
<div class="related-product-image">
<a href="/related-product-link" title="Related Product Name">
<img class="img-polaroid" src="//amazon.aws.path/related-product-name.jpg" alt="Related Product Name">
</a>
</div>
<h5><a class="related-product-link" href="/related-product-link" itemprop="url"><span itemprop="name">Related Product Name</span></a></h5>
<div class="related-product-price"> <span class="price-regular"> $1,401.65/EA </span> </div>
</div>
</div>
</section>
<section id="related-product-set-suggested" class="related-product-set">
<header> <strong>Suggested Items</strong>
<div class="pagination pagination-small">
<ul>
<li class="disabled"> <span><</span> </li>
<li><span>Page 1 of 2</span></li>
<li> <a data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#related-product-set-suggested" href="">></a> </li>
</ul>
</div>
</header>
<div class="body">
<div class="related-product" itemprop="isSimilarTo" itemscope="" itemtype="http://schema.org/Product">
<div class="related-product-image">
<a href="/suggested-item-link" title="Suggested Item name">
<img class="img-polaroid" src="//amazon.aws.path/related-product-name.jpg" alt="Suggested Item name">
</a>
</div>
<h5><a class="related-product-link" href="/suggested-item-link" itemprop="url"><span itemprop="name">Suggested/Related Item Name</span></a></h5>
<div class="related-product-price"> <span class="price-regular"> $535.35/EA </span> </div>
</div>
<div class="related-product" itemprop="isSimilarTo" itemscope="" itemtype="http://schema.org/Product">
<div class="related-product-image">
<a href="/suggested-item-link" title="Suggested Item name">
<img class="img-polaroid" src="//amazon.aws.path/related-product-name.jpg" alt="Suggested Item name">
</a>
</div>
<h5><a class="related-product-link" href="/suggested-item-link" itemprop="url"><span itemprop="name">Suggested/Related Item Name</span></a></h5>
<div class="related-product-price"> <span class="price-regular"> $535.35/EA </span> </div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
You will be able to modify the product details page using CSS/LESS in the site.less file.