Task IntentTheme
Quick View Modal for Products
Add a quick-view modal that lets shoppers preview product details without leaving the page.
What This Sidekick Query Does
Add a quick-view modal that lets shoppers preview product details without leaving the page.
Prompts
Copy, adapt, and run this directly in Shopify Sidekick.
Create a quick-view modal system for my store. When a customer clicks a Quick View button on any product card in a collection or grid, a modal overlay should appear showing: a product image gallery (with thumbnail navigation), product title, price, variant selectors (size, color, etc.), quantity selector, Add to Cart button, and a View Full Details link to the product page. The modal should load product data dynamically via the Shopify Product AJAX API (/products/[handle].js). Include a close button and allow closing by clicking outside the modal or pressing Escape. The modal should be accessible with focus trapping. Style it with a [MODAL_STYLE] look (options: minimal, rounded, full-screen on mobile). Generate the Liquid snippet, JavaScript, and CSS needed.
Expected Output
Add a quick-view modal that lets shoppers preview product details without leaving the page.
Tips to Improve Results
Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions