Streaming live at 10am (PST)

Comparison Tables with CMS. Is it possible?

I am working on a website where I want to show some product comparisons. I am still trying to figure out how to make it. I tried some ideas but they didn’t work as I was hoping for.

Is there anybody who managed to make a decent comparison table? (I checked some old forum posts about it, but they were not very useful) I am looking to make something like this: https://bestreviews.com/best-home-printers

What I’ve tried is;
I created a CMS collection with the information that goes into each cell of the comparison table. Like;

  • Product name
  • Product model
  • Product photo
  • Product link to buy
  • Product details
    (I added the same fields 3 times, for 3 different products)

I created a new CMS entry for each comparison table. I tried adding a Multi-Reference field to my Blog Post CMS, where I linked it to my “Comparison Table” CMS. And I created a table on my blog template and put the Comparison table CMS Collection List in this table. Everything looked great. But the problem was this table was showing all the Comparison Table entries from the CMS. I just wanted it to show the Comparison Table entry that I choose from my Blog’s multi-reference field. Let’s say the blog post is about “Best Printers”. And I want this blog post to show my comparison table ! that I choose from the multi-reference field, not to show the whole CMS collection entries. I am not sure if multi-reference field works for this, or maybe I am not getting multi-reference field purpose.

Please see this image: webflow comparison table help|690x388

I don’t know if I am on a right track, or if it is possible to do this with Webflow. But I really appreciate your help to fix my work or show me another way to create a comparison table.

Thanks!

Hi @cakeantidote, I think you can break the products down to their own CMS Item and then use a Collection list & filter to get the products you want to show. I have done the same here if you scroll to the bottom of the page where there is a variant comparison: https://www.suprabaru.id/boats-collection/armada-plastomer. I think it’s the same structure as what you’re looking for.

Also, it’ll be best for you to share the read-only link? See how here: https://webflow.com/feature/share-a-read-only-link-of-your-project-from-the-designer

Hi @dennyhartanto, Thanks for the reply.

Here is my read-only link. Almost everything is a place-holder. I am still trying setup the design first. So, sorry for the messy page.
https://preview.webflow.com/preview/upperreview?utm_medium=preview_link&utm_source=designer&utm_content=upperreview&preview=96ba17df4eee9a6a4ba412fedcc27000&pageId=5f47deaee6e3b3071e9d069c&itemId=5f47deaee6e3b373e09d0966&mode=preview

Can you share a read-only link to your page? I want to see how you made that table in the CMS. The way you described it sounds ok. But my concern is, if I start adding hundreds of products separately, my CMS collection item limit will be busted sooner. So I would really want to find a way to keep all the items together in the same CMS collection and have them pulled and showed on the related blog post. In my case, 3 items in the same CMS entry.

Do you think that’s possible?

Hi @cakeantidote, sure heres the r-o link: https://preview.webflow.com/preview/supra-baru?utm_medium=preview_link&utm_source=designer&utm_content=supra-baru&preview=4b4a7e23b137ffedb400b52bb5bdabb1&mode=preview

Well if you’re concerned with the number of CMS items then it makes sense to bundle them up into 1. In that case, you just need to add a reference/multi-reference to the article into the Comparison Tables CMS. You can then use the conditional visibility to show just the Table related to the article.

1 Like

Thanks for your reply!
I think I will give up on the comparison table for now. Maybe I will work on it later.

Thank you so much for the example, this is what I was looking for!
Is it possible to dynamically add a parameter to a table? Like dropdown to add a parameter or something. Maybe you can advise me in which direction to look. Thanks again for the link.

I did add a parameter via Interactions (hide/unhide). But perhaps there is an easier method.