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?
TL;DR
- Create a "Cakes" CMS Collection for each product's basic info.
- Create a "Nutritional Info Items" Collection with fields for nutrient data and a reference to the corresponding cake.
- On the cake template page, add a Collection List filtered to show only the linked nutrition items and style it as a table.
To dynamically display changing nutritional information per product (such as cakes) in Webflow, you’ll need to structure your CMS to support this data type and connect it to the product detail pages.
1. Create the Main CMS Collection (e.g., Cakes)
- Go to CMS and create a new Collection called something like Cakes.
- Add basic fields for each cake, such as:
- Name (Plain text)
- Description (Rich text or plain text)
- Image (Image field)
- Price (Number or text)
- Slug (Auto-generated for page URLs)
2. Create a Multi-Reference Nutritional Info Collection
- Create a second Collection called Nutritional Info Items.
- This collection will contain individual nutrition facts rows, with fields like:
- Nutrient Name (e.g., Calories, Sugar, Protein)
- Amount (e.g., 220, 10g)
- Daily Value % (Optional if your client needs it)
- Reference to Cake (Use a Reference field linking to the Cakes collection)
This allows each cake to have multiple nutritional entries that are easily editable and reusable.
3. Connect Nutritional Info to Each Cake
- In the Nutritional Info Items collection, select the correct cake in the reference field.
- This ties each nutrition fact to a specific cake without hardcoding the data.
4. Add a Collection List on the Cake Template Page
- Open the Cake template page in Webflow Designer.
- Drag a Collection List into the page.
- Connect it to Nutritional Info Items.
- Add a filter: Only show items where the cake reference equals the current cake.
5. Style the Collection List as a Table
- Use a grid, flexbox, or columns to simulate a table layout.
- Each row in the Collection List represents one nutrition fact.
- Add text elements for:
- Nutrient name (e.g., “Calories”)
- Amount (e.g., “220 kcal”)
- Optional: Daily value %
Summary
To display dynamic nutritional tables on each cake product page:
- Create a “Cakes” Collection.
- Create a “Nutritional Info Items” Collection with a reference back to Cakes.
- Use a Collection List on the product page to display only the relevant nutrition items.
This CMS structure gives your client full flexibility to update nutrition data for each cake individually.
