Overview
The product detail page (PDP) serves to display information about the product to the user. From a business perspective it job is to inform, and ‘nudge’ the user towards the ‘add to cart’ button. It consists of several functionalities:
Basic layout of a PDP
General thinking
The product detail page is part of a continuous loop of ‘exploration’. It is the page where a user inspects the product, and considers the purchase decision.
Therefore, it is important to strike a balance between offering the information the customer is looking for, but also creating a truthful ‘expectation’ around the product. This is because if a customer does decide to purchase, there cannot be too much discrepancy between what the customer is expecting to receive, and what he actually receives.
Implementation notes
- By default the PDP is available at the URL of structure
https://www.domain.com/products/product-name-sku1234
- SKU is included as part of the default URL structure to create editable product slugs, that by default work with internationalisation.
- The SKU is prefixed with
-sku
, and as such identified by the backend - The backend first queries for the SKU and returns product information, if the SKU is not part of the URL, it will query for the product slug and return the information. If either product slug or SKU is incorrect or missing, this is updated in the front-end on loading the page.
Supported functionalities
- Basic product information
- Add to cart
- Add to list
- Product variant / option saelect
- Image gallery
- Detailed product info (semisupported)