How can I pass the schedule information of a location to a collection popup in Webflow, so that the client can update the schedule images?

To pass schedule information (images) from a Collection (CMS) item to a popup modal, you need to bind the image field from the CMS to the popup using Webflow’s CMS capabilities and interactions.

​

1. Structure Your CMS Collection

​

• Go to CMS → Collections, and make sure your Location collection includes an Image field for the schedule.
• Upload the corresponding schedule image for each location item.

​

2. Create the Popup Element Inside the Collection List

​

• Inside a Collection List, design your popup element (a div for the modal) within the same Collection Item wrapper.
• Add an Image element inside that modal and connect it to the CMS Schedule Image field.

​

3. Design the Trigger Button

​

• Add a button or link inside the Collection Item (e.g., “View Schedule”).
• This will serve as the trigger to open the popup for that specific location.

​

4. Set Up Interactions for the Popup

​

• Use Webflow’s Interactions (IX2) to trigger the modal:
• Set the modal div to display: none by default.
• Add a click interaction on the “View Schedule” button that sets the modal’s display to flex (or block).
• Add a close button in the modal with a reverse interaction to hide the modal.

​

5. Ensure Dynamic Content Updates Correctly

​

• Because the popup is nested within each Collection Item, Webflow automatically binds the correct image to the modal.
• No extra code is needed as long as the modal is inside the Collection Item.

​

Summary

​

Embed the popup modal directly inside the same Collection Item where the schedule image is pulled from the CMS. This ensures each modal displays the correct image, and your client can easily update schedules via the CMS without touching any layout or interactions.