Skip to main content

Product Detail V2

On the product detail page you can display detailed information about a specific product. Product images work with key information such as an overview, ingredients, warnings, product uses, ratings, reviews, and related products, to help educate your site visitors about your brand’s products.

Prominently placed features such as a Where to Buy (via online Retailer) and Find in Store (via local Retailer) drive the purchase process as appropriate for the product.

When To Use This Page

Every product on your website will have a Product Detail Page.

 

Default Template Components

The following components are default, fixed elements within this page template:

Breadcrumb

A series of clickable links that display the navigational path to the current page

Product Hero Image

This is the default product image, which can be examined via a zoom feature if the user hovers the cursor on this image.

Product Information Accordions 

Expand and collapse detailed product information.

Social Share (Where Applicable)

The ability for users to share content with their friends and followers on supported social networks

Ratings & Reviews (Where Applicable)

Displays user-submitted product ratings and reviews where applicable

 

Customization Options

Two Default Touts

Two 50% touts stacked below the product image.

Additional Product Field Accordions

A feature that expands and collapses detailed information related to pre-determined product fields.

Where to Buy Section

A prominent feature that allows users to find online Retailers and nearby Stores that carry certain products. There are two patterns available. 1) Choose 1, 2, or 3 primary retailers to be featured.  2) List all retailers equally.

Multiple Product Hero Images with Thumbnails 

Users can view additional product images by selecting from several thumbnail images that display to the left of the product hero image.

 

Additional Optional Template Components

Related Content Component 

Display related content teasers in a carousel-like format.

Any Allowed Tout Combination 

Use any supported combination of touts that adds up to 100% of the content width.

Embedded Video

A video player that can be placed in-line throughout page copy.

Embedded Poll

A poll that can be placed anywhere a tout can be placed.

Price Information

This feature lists the specific price per provider, and is slated for a future release.

 

Design Details

These helpful diagrams highlight key components across the three Canvas viewports. Components are either required or optional; some can be adjusted, while others must remain as-is. 

Template PSDs

Access the PSD files for your Product Detail Page v2 Template.

 

Template PSDs

Access the PSD files for your Product Detail Page v2 Template.

Responsive Design

CANVAS sites fluidly respond across three key breakpoints.

See examples of page layouts, features and functionality in CANVAS.

Our demo provides a glimpse of the flexibility of CANVAS and its templates.