Place add to cart buttons within product grids

<p>Now you can add an add to cart button within Collection Lists to let customers get to checkout even faster. Simply drag the add to cart button element from the add panel into your list and style as needed, then boom: you’ve done it.</p><figure class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c717Asgl1DZ31re2EcI4U9nPjjwEG7x7sd1o49IOQq4CF81oTRjsI2li5IoSQDpX3-iLpqPw44BI49p5tnt3xMq96AmcW6kYx-hG6rKwHg2XwdVMIIIes-B-Jc5CYXeyG8wFp7ACawG.jpeg>"></div><figcaption>Drag the add to cart element into your Collection Lists to let customers get to checkout faster.</figcaption></figure><p>But wait, this unlocks more! If you’re feeling fancy, you can build a modal interaction within a Collection List to create a custom “quick view” experience.</p><figure class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c5c6LGrefvCGkuhOubH2FkopyRI556Yfvw6Ahwocjmr7RETQEebZa738sbgl0v7yHygvetF98RBduxCDzjOlzLphYn03iIpbmm2FnWcaGUppSdQCGbIdaH9hUkko-GbsOlcjMmj.gif>"></div><figcaption>Advanced example: build a custom “quick buy” modal with interactions.</figcaption></figure><p>This example requires some advanced knowledge of interactions, but has the following basic structure. Within the Collection List cell, create a new element for the overlay, and <a href="<https://university.webflow.com/article/absolute-position>" data-rt-link-type="external">position it absolutely</a>, relative to the larger Collection List so it occupies the full screen — regardless of which cell it is from. Within that element, add all the elements (and of course, an add to cart button) that you’d like to live within your modal.</p><figure class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c71bSMmOiV0IgZtd59H5oRmXvuJ5MT7kM9ev-BSWxcWJffMPMM4TSQQfG9v7bVNLacQ1yps-CCj7grbQ5S8vXlbek-NaXiIYaqoDagUvxnq2TaM2jId4nBoaUGuASWxZmnSVdsoMPf.png>"></div><figcaption>The structure of elements in this example.</figcaption></figure><p>Then, the interactions piece is actually two parts: first, create the interaction that shows the modal on click from the magnifying glass icon (done here by setting display to block and switching opacity from 0 to 100).</p><figure class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c76fCLHmoHxl9qtvTEU87xBlMegCWCeUE5yiNsf57nchAY0hkNwB8xX7A6ywolD0YkJoPbo94sLeK7tUfGRi9do9xE9Ilt2X7ymPgZZBEU2CXtNm4viQf5yRHy11tolDAMlpb7nyax.png>"></div><figcaption>A closer look at the “open modal” interaction.</figcaption></figure><p>Part two is basically the inverse: create the opposite click interaction for the X icon in the modal, fading opacity back to 0 and resetting the display to none, so you have a way to “reset” the state of the modal to before it was opened. </p><p>These two interactions create a loop of sorts that you can use to open and close the modal to your heart’s desire.<br></p>