Different Pop-Ups for collection items

Hello, everyone!

I’m trying to figure something out and can’t seem to wrap my head around it.

I’ve created a collection. And each item in the collection has a Learn More button. Clicking the Learn More button on each item should trigger a pop-up with information related to each specific item.

I’ve created for a test 2 pop-ups but can’t figure out how to link each specific item in the collection with its specific pop-up.

Here’s the read-only link.

Would highly appreciate some help.

Thanks in advance!

1 Like

Hello @Lavinia_Mehedintu so what you have to do is add a pop up inside the collection item, where the content for the pop up is populated by information from the collection, that way each individual item will have a collection pop up with content from the CMS. Does that make sense? you can reference this clonable for a better understanding of what I mean clone-cms-modal-pop-up-aaron-ocampo - Webflow I hope this helps.

2 Likes

Hi @Pablo_Cortes ! Thanks a lot. The clone definitely helped. I’m still doing something wrong though. Basically when clicking one of the items in the collection opens the pop-ups for all items [when items are paginated and shown 2/page]. I’ve looked around in the clone but can’t figure out exactly what’s wrong.

Hello @Lavinia_Mehedintu, yes so your project is not exactly as the project from the example. So what you have to do to only show one pop-up at the time is to change your interaction from targeting the class to targeting the element


I hope this helps!

Thank you so much, @Pablo_Cortes! It worked perfectly! :pray:

1 Like

Im glad it worked out for you @Lavinia_Mehedintu, please mark the issue as solved so somebody with a similar problem can reference this post. Take care.

Hi Pablo,
Hope you are doing well. I was wondering if you could help me out, I am missing something here.

I am using CMS for the blogs, so I have got multiple blogs. I want 2 different pop ups for 2 different blogs to show up. Rest of the blogs will not have any pop ups. Can you help me with this please?

I want the pop up in my blog: General Retail industry award and Storage services

https://preview.webflow.com/preview/paidright-website-6fc00f?utm_medium=preview_link&utm_source=designer&utm_content=paidright-website-6fc00f&preview=5c9c170c4ad8a8081497f44048d3466d&pageId=62bd04ba0820273b0fd59ce2&itemId=63226dd9ba92ca40e015d10f&workflow=preview

Cheers,
Anam

1 Like

Hey @Anamul_Choudhury, so for pop ups for specific blogpost you have you use conditional visibility, place a div on your page, give it a class something like pop-up wrapper, then go to the div settings and set the conditional visibility to something related to the pop up, in your case the switch
Screen Shot 2024-05-02 at 6.30.37 PM
This way the pop up wrapper will only show on blog posts with the hospo pop-up turned on on the collection settings, from there you can build your pop up interaction however you want. I hope this helps!