How can I structure the Webflow CMS to create dynamic tables for each product page that display changing nutritional information for a client that sells cakes?

To display dynamic nutritional tables for individual products like cakes in Webflow, you need to structure the CMS Collection to support row-by-row flexibility. Here's how to do it.

1. Create Two CMS Collections

• Products Collection: Will contain each cake as an item (e.g., Chocolate Cake, Vanilla Cake, etc.).
• Nutrition Facts Collection: Will contain each nutrient as a row (e.g., Calories, Fat, Sugar, etc.).

Each nutrition fact item will include:

• Name: The name of the nutrient (e.g., "Calories")
• Value: Nutritional value (e.g., "250g")
• Reference Field: A reference or multi-reference field linking each nutrition fact to its relevant Product.

This structure allows each product to have a dynamic list of associated nutritional items.

2. Populate the CMS with Nutritional Rows

• Manually (or via CSV import) create nutrition rows for each cake.
• For example:
• Item Name: "Calories", Value: "250", Product Linked: "Chocolate Cake"
• Item Name: "Fat", Value: "12g", Product Linked: "Chocolate Cake"
• Item Name: "Calories", Value: "180", Product Linked: "Vanilla Cake"

Each row is its own CMS item so it remains fully dynamic.

3. Design the Dynamic Table Using a Collection List

Inside the Product Template Page:

• Add a Collection List bound to the Nutrition Facts Collection, filtered where the referenced Product = Current Product.
• Inside the list, use two Text Blocks:
• One bound to the Nutrient Name.
• The other bound to the Nutrient Value.
• Use Flexbox or Grid to format it like a table (two columns, multiple rows).

4. Style Responsively

• To mimic a table:
• Set a two-column Grid or a horizontal Flex layout.
• Ensure text wraps nicely for longer names or values.
• Adjust layout for mobile (e.g., stack labels above values).

5. Optional: Use Rich Text or JSON Embed (Advanced)

If your client insists on complete flexibility:

• Alternative approach: Use a Rich Text field in the Product CMS for a manually entered table (less dynamic).
• Advanced option: Store nutritional info as JSON in a Text Field, then render using custom code (requires Webflow’s Embed Component plus JavaScript).

Summary

To create dynamic nutritional tables in Webflow, set up a Nutrition Facts CMS Collection that links each nutrient row to its parent Product via a reference field. Use Collection Lists on product pages to dynamically display table rows, ensuring scalability and easy data management.