Designing Product Page

This renders a detailed page for an individual product. It mainly includes product details, a form that visitors use to select a variant, its quantity and add it to the cart. ms.product widget is used to fetch the complete details of the product.

Example

Example 1

Example 2

Data Elements

• Breadcrumb
• Product Images
• Zoom on product image
• Product Name
• Product SKU
• Product Brand
• Product Seller Details
• Product Price
• Product Discount
• Product Options (product options)
• Product Quantity
• Add to Cart and Buy Now Section
• Add to Wishlist
• Product Features
• Product Availability (In stock or out of stock )
• Product based shipping charges
• Check Product COD availability using Pincode
• Product Social Sharing
• Product Rating and Reviews
• Product Description
• Product Specifications
• Other Sellers of this product or Linked Product's
• Related or Similar Products 

Breadcrumb

Breadcrumb gives links to category and it's parent categories to which the product belongs. If a product lies under two or more categories then it provides the link to the last category to which it belongs.

<ol class="breadcrumb">
<li><a href="/">Home</a></li>
<li ng-if="product.category.parent.name"><a href="/browse/{{product.category.parent.alias}}">{{product.category.parent.name}}</a></li>
<li ng-if="product.category"><a href="/browse/{{product.category.alias}}">{{product.category}}</a></li>
<li class="active">{{product.name}}</li> </ol>  

Product Images

A product can have single or multiple images. These can be accessed by using product.images variable of product object, returned by ms.product widget. You can specify different product images for different product options using StoreHippo admin console. You can check details here, how to design product images section in themes.

Product Name

This specifies the title or name given to the product. 

<h1>{{product.name}}</h1>

Product SKU

This specifies the SKU (Stock Keeping Unit) of the product. All products and their variants have unique SKU codes.

{{product.sku}}

Product Brand

This specifies the name of the brand that product belongs to.

{{product.brand}}

Brand Detail

<div ms-widget="ms.entity" ms-data-entity="ms.brands" 
    ms-data-alias="brands" ms-data-filters='[{"field":"name","value":"{{product.brand}}"}]' >
   {{brands[0]}}  // provide brand details
</div>

Seller Details

This specifies the seller's title of the product.
{{product.seller}} return the unique id of seller 

By using ms.seller widget details of the seller can be fetched.

<div ms-widget="ms.seller" ms-data-id="product.seller" >
   {{seller}}  // provide seller details
</div>

Features

Use product.features to show the few highlights of the product to engage customers.

<div ng-repeat="feature in product.features">
    <span>{{feature}}</span>
</div>

Price

Use product.price to show the selling price of the product. Use ms.currency filter to format the amount in currency format.

<div>{{product.price|msCurrency}}</div>

Compare Price

Use product.compare_price to show the original price (MRP/MSP/RRP etc.)  of the product. Use ms.currency filter to format the amount in currency format.

<div>{{product.compare_price|msCurrency}}</div>

Discounts

Use product.discount_total and product.discount_percentage variables to show the product discount.

{{product.discount_total}}
{{product.discount_percentage}} %

Check COD Availablity 

This is used to check the product is available under Cash On Delivery on particular pin code or not.

Example: 

<div ms-widget="ms.checkcodAvailability">
<input type="text" ng-model="pincode">
<button ng-click="check()"> Check </button>
{{availability}}   // this will return availabilty result

Product Options

product.options return the product options. Following variables are available:

• product.options
• product.selected_options
• product.option_values

Inventory quantity for Product Options

• This will show inventory quantity for product variants available.

{{product.inventory_quantity}}

This will show on basis of some conditions.
When all conditions are satisfied, then the inventory quantity for selected variants will show respectively. 
These conditions are : 

• when allow out of stock is not check.
• When inventory management is selected as automatic.
• When inventory quantity for variants is greater than zero. 

Product Description

It is used to show the product description on site. 

{{product.description}}

product.description is available as HTML. So, we can show it by using ng-bind-html-unsafe binding.

Example:

<div ng-bind-html-unsafe="product.description">

Related Products or Similar Products

These are the products of the same category to which product belongs.
{{related_products}} returns the array of related products

Example:

<div ng-repeat="product in related_products> {{product}} </div>

Product Reviews

From this section, a visitor can give ratings to the product or add his reviews about the product. Click here for the details of product reviews section.

Related Widgets

ms.product
ms.responsiveImage
ms.reviews
ms.form.addReview