Help with popup inside a collection list

Hi everyone.

I’m looking to create a modal popup inside a collection list. Is this possible?

Here’s the page: http://hwtk.webflow.io/offers/eurocamp-discount-code

I’d like to be able to click ‘View terms’ on the voucher. Then have a popup, but pull the ‘terms’ info from the voucher collection.

I added a div inside the collection item and quickly placed that in centre to test, and was thinking to add an interaction when ‘view terms’ is clicked to show pop up and make background dark etc.

But, as it’s in a collection list i’m pretty sure that it’s displaying all the popups underneath each other, which isn’t great. Btw I’ve put the display setting for the ‘modal wrapper’ as none for now, just so it was out of the way. You can toggle that on within the read only link below.

Thank you for reading and please feel free to advise on any tips / corrections to help me improve. This is my first website attempt, so would love to know if i’m structuring things correctly and using the grid appropriately or if it’s just a big mess haha.

Thank you!!


Here is my public share link: LINK
(how to access public share link)

Ok, I’m pretty sure I know exactly what you mean. So check this out, in the photo below you can see I have the “Collection List” selected which is what you will do.

Then if you notice the other green box… it is highlighting an option in the settings panel which gives you the option to control how many and which items to show.

In my case I am limiting how many items I want to show to 3. Then the first number says which one (in order) do I want to show from my collection. If I chose 2 then it would show the items starting from the second item in the collection list.

So in your case you can choose 1 for “Limit Items to:” then for the first number choose which voucher in your collection. If you have three vouchers total then the last voucher you added in your collection would be number 1. Second to newest would be 2 and so on.

I hope this is what you are referring to. :call_me_hand:

1 Like

Hey dude,

Thank you for your reply.

For some reason on my collection list, I don’t have the options for visibility like you.

Even if I set the visibility options to show 1 for example, it’s only going to show 1 voucher. I don’t want that to happen. I’m happy to show all the vouchers on the list, as shown on the design, but wanted to limit the amount of modal popups, which is pulling from the same collection list.

I don’t even know how to explain it hahaha

@Noah-R I just want to be able to display the T&C’s for a voucher in a pop up, when clicked.

Each voucher will have it’s own unique T&C’s. These T&C’s are in the same list, along with the voucher name, date, link, etc (the info you see on the voucher).

Hahaha, dang yeah Im trying to understand. So you want a different popup for each voucher is what you’re saying?

Or just one voucher but the info on it such as the T&C’s dynamically change depending on which one you clicked?

Currently (for this example) there’s 5 vouchers per retailer. But going forward there could be 5, 6, 10, 15+ vouchers per retailer. The amount of vouchers isn’t a problem. Happy to list/display whatever amount of vouchers a retailer has at any time.

But i’d like to be able to click ‘View terms’ on any voucher (shown in red), and for this to show the T&C’s for that particular voucher, within a popup. Each voucher has its own T&C’s.

So 1 popup, but, different T&C info for each one.

Hope that makes sense :slight_smile:

I gotcha… have you tried creating a reference or multi-reference collection?

The reason I ask is because maybe you can create a collection just for the different T&C info and then add a reference in each of the different vouchers so you can pull the different info dynamically.

that makes sense, but i will be a nightmare to manage, we’d have to upload the terms to a new collection and title each one every time etc.

Currently we have the following set up…

A collection of All Discount Codes (image1), then within there, all the details relating to that individual code (image 2).

Yeah, so I think the reference collection would work fine. I know it seems like more work but you would only have to set it up one time. Then in the future you would just have to upload it into the T&C collection. I know it’s in a different spot but that is the only way I can see that getting done other than resorting to custom code (javascript) or something.

1 Like

Thank you for taking the time to respond dude.

I have a feeling that might be a nightmare long term :sob: - maintaining and uploading etc.

How do we get others to notice these forum posts?? :grinning:

@PixelGeek do you have any help / tips for this dude?

Yeah definitely. I wish I could come up with a better solution for you man. I would suggest maybe making a video to post here so you can be extra clear how it’s suppose to work so others can get a firm grasp on what you need this way we can better help you.

1 Like

@Noah-R Hi I read the complete thread and want to achieve exactly the thing you suggested.
So 1 popup, but content inside this pop up depends which product was choosen.

I created the reference field. But now in the pop up i can only specify the exact value of the reference field, meaning i can only specify to reference to exactly 1 product. But this content should be dynamically.

What I try to achieve

Team member 1 button, team member pop up with content 1
Team member 2 button, team member pop up with content 2