Our best-selling course is back! Enrollment for No-Code Fundamentals cohort 5 now OPEN –>

How to format your Webflow collection list pages for a product template

Become a Pro member to access all content

240+ instructional videos led by professionals
Weekly expert workshops and replays
1-1 consultation with the Makerpad team
Over $50k in discounts for tools
Private peer community
Profile for tracking progress and sharing your work
Yearly pricing
$249/year
Start your 7 day free trial*
Get PRO Yearly
Lifetime pricing
$600billed once
Start your 7 day free trial*
Get PRO Lifetime

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.

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>

  1. Move to the right side of the page and select the "Intro Container Copy".
  2. Add in a heading and call it "Related Products".
  3. Add in a Div and give it a class of Product Detail.
  4. Add in Collection list and bind to Products collection.
  5. Add in a div block give it a class and set to display flex horizontal, align stretch and justify left, don't wrap.
  6. Add in a div block give it a class and set to 50 px w 50px h, choose get BG image from Products.
  7. Add in a div block.
  8. 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.
  9. Add in three text blocks, style accordingly and link to;
  10. Product NameTagDescription
  11. 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.


Become a Pro member to access all content

240+ instructional videos led by professionals
Weekly expert workshops and replays
1-1 consultation with the Makerpad team
Over $50k in discounts for tools
Private peer community
Profile for tracking progress and sharing your work
Yearly pricing
$249/year
Start your 7 day free trial*
Get PRO Yearly
Lifetime pricing
$600billed once
Start your 7 day free trial*
Get PRO Lifetime

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.

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.

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.

Get help and discuss

Open community forum

Featured Live Course

No-Code Fundamentals: Getting started with no-code

Build a business, launch a side-project, or finally start that idea you've been sitting on, without writing code.
Learn more
Close

Sign up for our weekly updates

Get an update every Sunday with new content, news and a behind-the-scenes of what our community are building.
Join over 18,000 others
You're in 😍- check your email to get started. Tweet me what you want to build to see how to do it without code.
Oops! Something went wrong while submitting the form.

Related Tutorials

view all ⭢