With some simple formatting, you can have individual product pages that include product info, plus 'Related products' and 'See what's shipped' sections. With this tutorial you'll learn how to fully format your product template page.

You'll want to highlight each individual product that gets submitted to your site, and you'll do that with a Product Template page. Using the member home page as a starting point, we'll copy the same layout to our Product Template page and remove out the extra products, add in commenting, and show similar products on the right.

Here are the steps to follow;

1. Copy and paste the navbar and section directly below the navbar from your member home page to the Product Template page on the leftmost column.
2. Move the "Product Container" to just below the "Dropdown Flex".
3. Move the "html embed" to just below the "Product Container".
4. Delete the Product List Wrapper CMS.
5. Add in form block and name form "Product Comments".
6. Keep one field label and call it "Discussion".
7. Add in a Text Area just below the label.
8. Submit button — style accordingly and alter success message by following these steps;
   1. Adjust and style text to read 'Submitting your product, please wait...' or similar.
   2. Add in a Lottie file of three dots or a spinner to indicate the page is reloading; be sure to set it to loop.
   3. Return to normal state for form
   4. Add the below success message script to before </body> tag section of your products template page settings.

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
$(document).on('submit', 'form', function() {
setTimeout(function() { location.reload(true); }, 3000);
});
});
</script>

9. Move to the right side of the page and select the "Intro Container Copy".
10. Add in a heading and call it "Related Products".
11. Add in a Div and give it a class of Product Detail.
12. Add in Collection list and bind to Products collection.
13. Add in a div block give it a class and set to display flex horizontal, align stretch and justify left, don't wrap.
14. Add in a div block give it a class and set to 50 px w 50px h, choose get BG image from Products.
15. Add in a div block.
16. Add in a div block under this div, give it a class and set to display flex, align horizontal, center, justify left, bottom margin 4px.
17. Add in three text blocks, style accordingly and link to;
18. Product NameTagDescription
19. Go back to Collection List and add a filter if you wish to limit the related products to a specific tag or platform.

Special thanks to NoCodeQuest for this fantastic tutorial which we adapted to show you how to add commenting to your Webflow site.

‍