This "quick-view" style product-preview modal allows users to view more information about a product without leaving the page. And better still, without having to stuff a bunch of hidden content into the page.
Update: 03/31/2023 - Revised the modal for better responsive behavior. Added ESC key support for closing the modal.
1. Create a 🟦 Products collection with fields for all the desired product data.
2. Create a 🟦 Products collection list on a static page and place a Product Link link block inside the collection item, linking to the item's corresponding collection page where the modal content will live. Style the clickable product preview inside this link block.
3. Create a div on the 🟦 Products collection template page with the ID #modal-content. Place & style the data you'd like to appear in the modal inside that div.
4.Create a modal on the static page (outside of the 🟦 Products collection) containing a div with the ID #ajax-container, which defines where the modal content will be injected on click.
5. Apply an interaction to the Product Link class that will trigger the modal. Set preload to prefetch.
6. Create a Modal Trigger element inside the modal wrapper but behind the modal content, so that the user will click on it whenever they click outside of the modal itself. Apply an interaction that will close the modal on click.
7. Add the Close Modal class to the Modal Trigger element to re-enable scrolling when the modal is dismissed.
9. Treat yourself to an ice cold glass of Yoo-Hoo chocolatey drink. You are done.