Overview
Default theme implementation selects between the following template variations in order to render product details view:
| Template variation | Condition | Notes |
|---|---|---|
| product | When product is selected (no specific SKU) | This is usually used by single SKU products. Custom template for product can be set on product type template variation. |
| sku | When specific SKU is selected | This is usually used by multi SKU products. Custom template for category search can be set product type search template variation. |
Product details page
Annotations
| Element | Template | Configurations1 | Content include2 | Description |
|---|---|---|---|---|
| C.1 Product images | Image view | Product or SKU image "IMAGE0", "IMAGE1" ... "IMAGEn". Category level image size attributes are "PRODUCT_IMAGE_WIDTH" and "PRODUCT_IMAGE_HEIGHT". Shop level image size attributes are "SHOP_PRODUCT_IMAGE_WIDTH" and "SHOP_PRODUCT_IMAGE_HEIGHT". Category level thumbnail size attributes are "PRODUCT_IMAGE_THUMB_WIDTH" and "PRODUCT_IMAGE_THUMB_HEIGHT". Shop level thumbnail size attributes are "SHOP_PRODUCT_IMAGE_THUMB_WIDTH" and "SHOP_PRODUCT_IMAGE_THUMB_HEIGHT". | Displays all images available for product or SKU. This view is responsive, so size settings for main image only influence the quality of the image. | |
| C.2 Product name and code | SKU central view | Shop level setting "PRODUCT_DISPLAY_MANUFACTURER_CODE_SHOP". | Displays product/SKU name and either manufacturer SKU code or SKU code depending on the flag. | |
| C.3 Quantity picker | Quantity picker panel | Shop level setting "CART_ADD_ENABLE_QTY_PICKER". | If enabled will render quantity picker widget that allows to view minimum, maximum and step order quantities and align this with current quantity in cart. (see PIM on min, max and step product quantity settings) | |
| C.4 Add to cart button | Automatically detects if product is available using inventory information and availability type. Will render either "Preorder" or "Add to cart" labels. For out of stock products the button is not visible. | |||
| C.5 Price view | Automatically determines the lowest list/sale price for single unit of SKU. For sale prices also displays percent discount rounded to whole number. For multi SKU products when no particular SKU is selected the default SKU (first one in order) is auto-selected. | |||
| C.6 Add to wish list | Link to add current product SKU to wish list. If customer is not logged in includes intermediate login step. | |||
| C.7 Social links | Social links are facilitated by "AddToAny" API and automatically resolve current page URL as the link to share. | |||
| C.8 Product details tabs | Product details tabs are automatically resolved depending on product data available. | |||
| C.8.1 Description | Localised description from product or SKU "DESCRIPTION" custom attribute. | |||
| C.8.2 Specification | Specification view is composed of product type attribute view groups and values available for the product/SKU. Groups' names are rendered as headings separating one or more custom attribute values within a group. All values are localisable via PIM. | |||
| C.8.4 Multi buy | This component automatically detects lowest prices in price list for available price tiers and renders a table of bulk discounts prices. Visible only if multi buy prices exist. | |||
| C.8.4 Recommendations | Recommendation tabs are generated from product associations. There are several tabs depending on the type of association that a product has. Visible only if associations exist. | |||
| C.9 Multi SKU selector | Automatically renders SKUs defined for given product in form of links with SKU names. Only rendered if there are more than one SKU. This template can be overwritten to render SKU thumbnails, or colour boxes or attribute names depending on business requirements. | |||
| F.1 Footer | Standard footer | This component is described in Home page documentation | ||
| H.1 Header | Standard header | This component is described in Home page documentation | ||
| M.1 Breadcrumbs | Breadcrumbs | Automatically resolves current breadcrumbs path depending on the URI | ||
| M.2 Category navigation | Top categories | Displays current menu depending on current category selected. For leaf category menu highlights its position, for categories with sub categories its menu is displayed. | ||
| P.1 Featured products | This component is described in Home page documentation | |||
| P.2 Product tabs | This component is described in Home page documentation |
1Configurations refer to shop and category custom attributes that define behaviour of components
2Content include refers to shop URI suffix for content. For example if shop has code "SHOP10" and content include is specified as "custom_content" then URI of the content include that will be rendered is "SHOP10_custom_content"