Hello, I’m interested with E-Commerce functionality here how someone could implement a quickshop modal window with Webflow seeing as the content inside the modal would have to be dynamic as well. I don’t have a current project but thought it would be good to have an idea how to for future use.
Here is an example of what I’m talking about.
Here is my public share link: LINK
(how to access public share link)
Hi @parkerwest 
This is one of the free templates I was testing while product variants was in development. It’s possible to build a modal entirely in Webflow so that a user can make choices without leaving the collection page.
Here’s the live version (not perfect, just a quick play) https://coffe-mugs-0403a72cda8929-21706790acba4.webflow.io
If enough users are interested then I’ll be happy to build a site for cloning and a tutorial too 
That’s awesome! Thank you so much! Do you have the read only link so I could poke around to see how it’s done?
Sorry for the delay @parkerwest
Here is the preview link for the above:
https://preview.webflow.com/preview/coffe-mugs-0403a72cda8929-21706790acba4?preview=fea81d9790e7720d9efd46f88efb6e91
As you’ll see, the modal is nested inside the collection item, but only that products modal is triggered when clicking. You’ll need to make sure to use “only siblings with this class” in the interactions panel to make sure all of the images don’t open up.
Let me know how you get on! The template I’m using is free so you can always add it to that yourself I look forward to seeing what you create with it.
Hey Mark!
I know its been a while since this subject but I just find this usefull for an ongoing project, and i’ve been trying out what you did here. Somehow I can’t manage to get the modal “show” after clicking the “compra rápida/quick buy” button I designed, I did everything step by step and triple checked everything. Is there any chance you could get a look to my file?
I would really appreciate it, thanks!
Hey @grrdgscn
You made me so hungry! What a great looking site :D 
So on the button, you have it set to affect parent elements except that the Modal you created is not a parent of the button, it is a great-grandparent (long lost ancestor 
). The solution I provide in the video is to make the modal a sibling of the button, this will also help you to locate it easier in the future if they’re close by.
Update the interaction to affect only siblings and you’re good to go.
You will need to delete the z-index on the div block 18 which is currently set to 0 anyway.
Here’s a video 1m 30s to explain it. Excuse the kids television in the background! 
https://share.getcloudapp.com/WnuE2oQD
Let me know if you have any further issues 
Haha I know right? welcome to my daily hungry struggle with my client 
Thanks a lot for your advice, it worked out! I didn’t notice that obvious mistake. I’ll try to get you some bread samples for real reward 
I’ll keep going with these and in any case i’ll get back to you, have a great day!
Hey @magicmark
I’m trying to implement the above concept as per the guide but also running into a little problem.
My modal is working but opens inside the same parameters as the product itself, ive tried to work it out but going in a circle.
Here is my link if you would be able to assist ?
@magicmark Thanks for sharing this and it looks both beautiful and functional. I am thinking about implementing almost identical behavior but the challenge I have is that we want the modal to actually dynamically populate the collection list page for the collection item rather than showing/hiding a div and the url also show in the browser. Is this possible from your experience? Have you seen this approach anywhere?
@magicmark, you are a lifesaver mate it’s been near impossible to find a decent resource or a use case that properly explains and demonstrates this. It took me half the day and a fair bit of tweaking but managed to make it work in the end
Thanks again!