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?
TL;DR
- Store schedule images in a CMS Collection for each location using an Image field.
- Build a Collection List with buttons that trigger individual modals, each bound to its location’s schedule image.
- Design and bind each modal within the Collection List item, and use Webflow Interactions to open/close them dynamically.
- Clients can easily update images directly in the Webflow Editor without needing design changes.
To dynamically show schedule information (like an image) for each location in a popup modal, you can connect CMS data to the popup using Webflow’s native Collection Lists and conditional visibility.
1. Store Schedule Info in the CMS
- Add a Collection (if not already created) for your locations.
- Include a Schedule Image field using the Image field type (or File if it's a PDF).
- Optionally, add fields like Location Name, description, etc.
2. Create the Collection List on the Page
- Drag a Collection List onto your page and bind it to the Locations Collection.
- Inside each item, add a Button or Link Block that opens the popup modal.
3. Design Your Popup Modal
- Design the Popup Modal somewhere on the page (usually positioned fixed and hidden via interactions).
- Inside the modal, add elements for dynamic content — for example, an Image Element to display the schedule image.
- Bind the image element to the Schedule Image field using Webflow’s CMS bindings.
4. Use Filters and Interactions for Dynamic Popups
- Since Webflow doesn’t support dynamic filtering of a single modal based on clicked item (without custom code), create one modal per item inside the same Collection List.
- Each location item will then contain its own hidden modal, pre-filled with that location’s schedule image.
- When a user clicks the Open button, it triggers the interaction to reveal that specific modal.
5. Add Interactions to Manage Show/Hide
- Use Webflow Interactions to:
- Show the modal when the "View Schedule" button is clicked.
- Hide the modal when the close button is clicked or when clicking outside the modal.
6. Enable Client-Friendly Updates via the Editor
- Once set up, your client can log into Webflow Editor, go to the Locations Collection, and simply replace the Schedule Image field for any location.
- No design or development steps required for them.
Summary
Create a CMS Collection with a Schedule Image field, design a popup within each Collection List Item, and use Webflow bindings to dynamically show the schedule. This allows your client to easily update the schedule image for any location via the Webflow Editor.