A Product Details Page, or PDP, is the web page on an ecommerce website that presents information on a particular product, including the product dimensions, color, price, reviews, shipping information, and other relevant details that shoppers may want to check before making a purchase.
The PDP is defined within the store.product
block in the Store Theme app, and is composed of a series of child blocks. The store.product
block accepts all blocks allowed by the store
and flex-layout
blocks as child dependencies, as well as the following blocks list:
List of blocks accepted by store.product
availability-subscriber
buy-button
blog-related-posts
breadcrumb
product-add-to-list-button
product-assembly-options
product-availability
product-brand
product-details
product-description
product-highlights
product-identifier
product-images
product-kit
product-name
product-price
product-rating-inline
product-rating-summary
product-reviews
product-teaser.product
product-quantity
product-questions-and-answers
product-separator
product-specifications
share
shipping-simulator
sku-selector
ℹ Check out the full and updated list here.
Before you start
To build a responsive PDP, the flex-layout
will be used. Hence, knowledge of how to use the flex-layout
block is strongly recommended. For more information, please refer to this guide.
Practical example
Consider the following example of a Product Details Page built with the store.product
and flex-layout
blocks:
Click here to see the code sample
{
"store.product": {
"children": [
"flex-layout.row#product-breadcrumb",
"flex-layout.row#product-main",
"shelf.relatedProducts"
]
},
"flex-layout.row#product-breadcrumb": {
"props": {
"marginTop": 4
},
"children": ["breadcrumb"]
},
"flex-layout.row#product-main": {
"props": {
"colGap": 7,
"rowGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
"paddingBottom": 7
},
"children": ["flex-layout.col#product-image", "flex-layout.col#right-col"]
},
"flex-layout.col#product-image": {
"props": {
"width": "60%",
"rowGap": 0
},
"children": ["product-images"]
},
"product-images": {
"props": {
"displayThumbnailsArrows": true
}
},
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0
},
"children": [
"product-name",
"product-rating-summary",
"product-price#product-details",
"product-separator",
"product-quantity",
"product-identifier.product",
"sku-selector",
"flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator",
"share#default"
]
},
"product-price#product-details": {
"props": {
"showInstallments": true,
"showSavings": true
}
},
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7
},
"children": ["buy-button"]
},
"share#default": {
"props": {
"social": {
"Facebook": true,
"WhatsApp": true,
"Twitter": false,
"Pinterest": true
}
}
}
}
From the code sample, notice that the store.product
child dependencies define five blocks, the first two being flex-layout.row
.
️ Keep in mind that the
flex-layout
block may suffer modifications if you are on mobile mode. Please refer to the Flex Layout document for more information.
Flex layout first row
In the first row of the flex-layout
block, the breadcrumb
block is rendered as in the following:
"flex-layout.row#product-breadcrumb": {
"props": {
"marginTop": 4
},
"children": ["breadcrumb"]
},
To customize the breadcrumb, we can then declare the breadcrumb
block and configure its properties according to our preferences. Consider the following example:
"breadcrumb": {
"props": {
"showOnMobile": true
}
}
Flex layout second row
The second row of the flex-layout
block is responsible for rendering the main information about the product.
In the left column, it renders the product image (flex-layout.col#product-image
), while in the right column (flex-layout.col#right-col
), it renders the name, price, SKU selector, and buy button:
"flex-layout.row#product-main": {
"props": {
"colGap": 7,
"rowGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
"paddingBottom": 7
},
"children": ["flex-layout.col#product-image", "flex-layout.col#right-col"]
},
To customize the flex-layout.col#product-image
and flex-layout.col#right-col
sections, we can declare these blocks and configure their properties according to our preferences as in the following:
"flex-layout.col#product-image": {
"props": {
"width": "60%",
"rowGap": 0
},
"children": ["product-images"]
},
"product-images": {
"props": {
"displayThumbnailsArrows": true
}
},
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0
},
"children": [
"product-name",
"product-price#product-details",
"product-separator",
"product-quantity",
"product-identifier.product",
"sku-selector",
"flex-layout.row#buy-button",
"shipping-simulator",
"share#default"
]
},
Left column
The left column of the second row contains the product-images
block since this was the first flex-layout.col
block to be declared.
.
Right column
The right column of the second row presents the price, buy button, and other relevant product details. It is, in practice, composed of the following blocks:
product-name
: displays the product name, along with its SKU name, if desired.product-price
: displays a properly formatted selling price. You can set it to show the list price (if it's different), installments, etc. Check out below an example of a Product Price displaying both the sale and the list price:product-separator
: renders a line separator.product-quantity
: displays a quantity selector that allows shoppers to choose how many items they want to add to the cart.product-identifier
: displays the product identification number. It accepts different props, such as the label to display before/in front of the identifier.sku-selector
: allows the user to choose his desired SKU, automatically hiding impossible combinations or indicating combinations that are currently unavailable.buy-button
: adds an item to the cart. You can customize it to show a successful message, redirect users to the cart page, etc.shipping-simulator
: allows users to fill in their postal code to then display the available shipping options and their respective prices for that cart.share
: allows product sharing on social media. You can customize its props to control which options will be shown to the user.
Related products
After the flex-layout
rows, we declared the shelf.relatedProducts
block in our store.product
block. This block is a Shelf that displays products related to the one shoppers are browsing. These products are defined through the Catalog in the Admin.
"shelf.relatedProducts": {
"props": {
"recommendation": "view",
"productList": {
"titleText": "Who saw also saw",
"itemsPerPage": 3
}
}
}
When related products are identified, they are presented as in the following:
The shelf.relatedProducts
block accepts different recommendation types, such as similars
, view
, buy
, accessories
, viewAndBought
, suggestions
.