To create dynamic tables on product pages that display changing nutritional information, you need to structure your Webflow CMS and Product Template page to support flexible and scalable table data.
1. Create a “Product” CMS Collection
- Go to the CMS panel and click Add New Collection.
- Name it something like Cakes or Products.
- Add standard fields like:
- Name (Plain Text)
- Main image (Image)
- Description (Rich Text)
- Any other cake-specific info (ingredients, pricing, etc).
2. Create a “Nutritional Facts” Multi-Reference Collection
- Go to CMS > Add New Collection and name it Nutritional Facts.
- Add these fields:
- Label (Plain Text) — e.g., "Calories", "Sugar", "Fat", etc.
- Amount (Plain Text or Number) — e.g., "200 kcal", "14g", "5g".
- Add a Reference Field back to the Product (Cake) collection.
Use a Single Reference if each fact only relates to one product, or a Multi-Reference if facts can apply to multiple.
3. Structure Your Product Template Page
- Open the Product Template Page for your CMS Collection (e.g., Cakes).
- Under the product content, add a Collection List and connect it to the Nutritional Facts collection.
- Use a Filter to only show nutritional facts where Product equals Current Product.
- Inside the Collection List:
- Add a 2-column layout (like a Grid or Flexbox row).
- In the first column, insert a Text Block bound to the Label (e.g., "Calories").
- In the second column, bind another Text Block to the Amount (e.g., "200 kcal").
4. Optional: Style the Table
- Use Div Blocks or Grid to visually resemble a traditional table format with horizontal lines or clear cell-like columns.
- Add bottom-border styles to rows to simulate table rows (since Webflow CMS doesn’t support native tables).
5. Client-Friendly Option
- If your client needs to edit or add nutritional data frequently, ensure they can easily:
- Access the CMS > Nutritional Facts.
- Add new entries and assign them to the corresponding cake via the reference field.
Summary
Create a Product collection for each cake, and a linked “Nutritional Facts” collection with a relationship field to the Product. On the Product Template page, use a Collection List filtered by the current product to display dynamic, CMS-driven table rows representing nutritional data.