Product Details - Using Display Page Template
Accelerators like Minium and Speedwell have a product details page that uses the product details widget. Instead of using the product details widget on a widget page, you can use a display page template to create the same page. This gives you more flexibility to customize individual elements as well as improve maintainability.
Creating a Display Page Template for Products
-
Open the Product Menu () and navigate to Design → Page Templates.
-
Go to Display Page Templates and click New.
-
Select Blank.
-
Enter the name as Product Details and set Content Type as Product.
-
Click Save.
This creates the new display page template for products and opens it in edit mode.
Adding the Product Image and Name
-
Drag and drop a container into the drop area.
-
Drag and drop a grid into the container.
-
In the General tab on your right, set the Number of Modules to
2
for the grid. -
In the Styles tab on your right, set the Margin Bottom to
3
tokens or16px
. -
Search for the Image Gallery fragment and drag and drop it into the first module.
-
Search for the Heading fragment and drag and drop it into the second module.
-
In the Browser tab on your left, find the Heading fragment and rename it to Product Name.
-
Select element-text from the Browser and select Source as Product and Field as Name.
Adding Product Metadata
-
Search for the Availability fragment and drag and drop it below the product name.
-
In the Styles tab on the right, set the Margin Bottom to
3
tokens or16px
. -
Drag and drop a grid fragment below the availability fragment.
-
In the General tab on the right, set the Number of Modules to
2
for the grid. -
In the Styles tab on the right, set the Margin Bottom to
3
tokens or16px
. -
Resize the grid so that the first module has two columns and the second has the rest.
-
Drag and drop a paragraph fragment inside the first module.
-
In the Browser tab on your left, find the Paragraph fragment and rename it to Product Fields.
-
Edit the paragraph fragment and enter the following content:
STOCK: SKU: MPN: GTIN:
-
Select the content and click Bold in the toolbar that pops up.
-
In the second module, drag and drop four Dynamic Field fragments one below the other.
-
Set the first one’s Field as Inventory, the second as SKU, the third as Manufacturer Part Number, and the last as GTIN.
-
Below the grid, drag and drop the Option Selector fragment, Price fragment, and the Add to Cart fragment.
Adding the Product Description and Specifications
-
Below the initial grid, drag and drop a Tabs fragment.
-
In the General tab on your right, set the Number of Tabs to
3
for the grid. -
Rename the first tab to Description, the second tab to Specifications, and the third to Attachments.
-
Drag and drop a paragraph fragment inside the first tab.
-
In the Browser tab on your left, find the Paragraph fragment and rename it to Product Description.
-
Select element-text from the Browser and select Source as Product and Field as Description.
-
Drag and drop a Collection Display fragment inside the second tab.
-
Set the Collection field to Product Specifications from the Related Items Collection Provider tab.
-
Set the Style Display to Bordered List.
-
Drag and drop a Collection Display fragment inside the third tab.
-
Set the Collection field to Product Attachments from the Related Items Collection Provider tab.
-
Set the Style Display to Bordered List.
-
Click Publish.
Go back to the Display Page Templates page, click Actions (), and choose Mark as Default. You now have a product details page using a display page template that is almost identical to the one present in Minium.