Let's examine the product_detail_page.tmpl source file found in the shared/templates directory:

{{ define "pagecontent" }}
{{template "product_detail_content" . }}
{{end}}
{{template "layouts/webpage_layout" . }}

This is the page template for the product detail page. Its primary purpose is to render the contents of the product_detail_content template and place it inside of the web page layout.

Let's examine the product_detail_content.tmpl source file found in the shared/templates directory:

<div class="productDetailContainer">

  <div class="productDetailImageContainer">
    <img src="{{.Product.ImagePreviewURI}}">
  </div>

  <div class="productDetailHeading">
    <h1>{{.Product.Name}}</h1>
  </div>

  <div class="productDetailPrice">
    <span>${{.Product.Price}}</span>
  </div>

  <div class="productSummaryDetail">
    {{.Product.SummaryDetail}}
  </div>

  <div class="pure-controls">
    <button class="addToCartButton pure-button pure-button-primary" data-sku="{{.Product.SKU}}">Add To Cart</button>
  </div>

</div>

Inside this template, we defined the HTML markup required to render the product detail container for the product detail page. We render the product image along with the product name, product price, and a detailed summary of the product. Finally, we declared a button to add the product to the shopping cart.