Dynamically generated pop up modal or lightbox on product page

Store Design

Topic summary

Goal: implement a customizable pop-up modal/lightbox on product pages (Vantage theme) that includes an Add to Cart button, similar to a quick view.

Current state: A CSS-only modal based on a W3Schools example was implemented, but with many products on the page it becomes resource-intensive.

Proposed direction: Use AJAX (loading content on demand without a full page reload) to dynamically generate modal content per product to reduce overhead. The author seeks guidance on the best implementation approach for this.

Latest update and outcome: Another participant asked if a solution was found. No solutions, code, or detailed approaches were shared. The discussion remains unresolved.

Open questions: Best AJAX pattern for per-product modals, how to integrate Add to Cart within the modal efficiently, and performance optimization for pages with many products.

References: The W3Schools modal example link is central to understanding the current approach.

Summarized with AI on January 12. AI used: gpt-5.
1

Hello, I’m looking for making pop up modal or light box on product page like quick view but I want to customize it.

I use “Vantage” theme and I would like to add “Add to Cart” button on it. I succeeded to implement https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal example but there are a lot of products in my page and it uses too many resources. It seems I should use AJAX to generate the specific code dynamically but I have no idea what is the best implementation for this features. Any idea?

1 Like
2

Did you get any solution for this problem??