A Product Detail page displays detailed information about a specific product. It includes details like size, color, price, shipping options, and other relevant information to help customers make an informed purchase decision.
To design your product details page, navigate to CMS > Project Settings > Shop > Templates and click on the "Edit" icon next to "Product Template".
Add Global Header and Footer
To add the global header and footer to your product template and other shop templates, kindly add the following Display Condition to your header and footer.
Add the Product element
Drag the Brizy "Product" element to the template to display product details
Set Product to Auto
For the product element to display appropriate product details for each product, the "Auto" option next to "Product" in the Product element must be selected.
Select Product Details
Details that should be shown on your product details page can be selected under the "Display" tab of the "Product" element.
Main Product Image size
The width of the main image in the product gallery can be set by clicking on the image, selecting the cog icon and dragging the percentage slider.
Product Gallery alignment
The product gallery can be aligned to the left, center or the right by selecting the main product image and then the alignment icon.
Product Gallery Thumbnail settings
You can select the thumbnail style, aspect ratio, and configure few other details by clicking on any thumbnail and selecting the thumbnail icon.
Customize product details
Each detail within the "Product" element can be customized. Click on any detail and set typography, color and spacing for the element using the toolbar that pops up.
Add Related Products
If you would like to display "Related Products" at the bottom of your product details page, kindly enable this option in the specific product under the "Related Products" tab.
The related products will appear at the bottom of the product page like below.