A product card template used for displaying a single product.

Description

The product card view is used to present a product and its properties in a more detailed manner than on a product list. Usually the decision to purchase the product and add it to the shopping cart is made based on this page.

A good single product page should contain at least the following:

The same tags that can be used in a product card can also be used in the product lists' helper attribute. Therefore, product card functions (e.g. purchase buttons) can also be used in list elements.

Template properties

Template location
themes/shop/THEME/product.html
Template URL
/product/ID/tuotteen-nimi
Scope
tuote, tuotemerkki, tuoteryhmä

Useful tags

Default theme implementation

{Helper(file:'helpers/header')}
<div id="SidebarBg">
	<div id="Main" class="clearfix">
		{Helper(file:'helpers/sidebar-left')}
		<div id="Primary" class="Column">
			<div id="PageHeader">
				{Path}
				<h1>{PageTitle}</h1>
			</div>
			<div id="ProductBuy" class="BlockForm">
				<div id="ProductShortDesc">
					{ProductShortDesc}
					{ProductBundles}
				</div>
				{ProductPrices}
				{ProductAvailability}
				{ProductBuy(
					variations: 'radio'
				)}
				{AvailabilityNotificationForm(
					before:'
						<div id="AvailabilityNotifications">
							<h2>{%AvailabilityNotificationIntroTitle}</h2>
							<p>{%AvailabilityNotificationIntroText}</p>
							<a href="#AvailabilityNotificationModal" class="Button inlineColorbox">{%SubscribeAvailabilityNotification}</a>
							<div style="display: none;" id="AvailabilityNotificationModalWrapper">
								<div id="AvailabilityNotificationModal">
									<h2>{%AvailabilityNotificationModalTitle}</h2>',
					after: '
								</div>
						</div>
					</div>'
				)}
			</div>
			<div id="ProductImages">
				{ProductImages}
				{ShareButtons}
				<div id="ProductLikes" class="fb-like" data-send="true" data-width="276" data-show-faces="true" data-font="arial"></div>
			</div>
			<div id="ProductFullDesc">
				{ProductFullDesc}

			</div>
			{CrossSaleProducts(
				type: 'normal',
				limit: 12,
				before: '
					<h2 class="BoxHeader Center">{%CrossSalesForProduct}</h2>
					<div class="CrossSaleScroller">
						<div class="CrossSaleProducts">',
				after: '</div></div>',
				helper: 'helpers/listproduct'
			)}
		</div>
		{Helper(file:'helpers/sidebar-right-product')}
	</div>
</div>
{Helper(file:'helpers/footer')}