Build a Shopify quick view modal without an app

Ask any AI assistant to build a quick view for a Shopify collection page and you will get the same answer nearly every time: fetch /products/handle.js, then build the modal's HTML from the JSON in a template literal. It works. You can ship it this afternoon. And you have just created the bug that will find you in four months, when a merchant asks why the quick view still shows the old badge layout that you removed from the product page in March.

The problem is not the fetch. The problem is that your product markup now lives in two places: once in Liquid, where the theme renders it, and once in a JavaScript string, where the modal renders it. Two copies of the same UI always drift. The one nobody looks at drifts faster.

Shopify has a native answer that most theme developers never reach for, and it removes the second copy entirely: the Section Rendering API.

How the Section Rendering API works

Every Shopify page can render any one of its sections in isolation. Add ?section_id=<id> to a URL and instead of the full page you get back just that section's HTML, rendered server-side by Liquid with the page's normal context. On a product URL, that context includes the product object.

1# The whole product page2curl https://shop.myshopify.com/products/ethiopian-yirgacheffe3 4# Just the quick-view section, rendered with that product in scope5curl "https://shop.myshopify.com/products/ethiopian-yirgacheffe?section_id=quick-view"

The response is HTML, not JSON. That trips people up on the first attempt, because the reflex with any fetch is to call .json() on it. Read it with .text() and set it as innerHTML.

This is the same mechanism behind infinite scroll, live cart drawers, and filtered collection grids that update without a reload. Learning it once pays for itself across all of them.

Step 1: the section

Create sections/quick-view.liquid. It never appears on a page through a template; it exists purely to be fetched. Keep it lean, because the point of a quick view is to be faster than the product page, not to be the product page in a box.

1{% comment %}2  Rendered standalone via /products/<handle>?section_id=quick-view3{% endcomment %}4<div class="quick-view">5  <img6    src="{{ product.featured_image | image_url: width: 640 }}"7    alt="{{ product.featured_image.alt | escape }}"8    width="640"9    height="640"10    loading="lazy"11  >12  <h2 class="quick-view__title">{{ product.title }}</h2>13  <p class="quick-view__price">{{ product.price | money }}</p>14 15  {% form 'product', product %}16    <select name="id">17      {% for variant in product.variants %}18        <option19          value="{{ variant.id }}"20          {% unless variant.available %}disabled{% endunless %}21        >22          {{ variant.title }} ({{ variant.price | money }})23        </option>24      {% endfor %}25    </select>26    <button type="submit" {% unless product.available %}disabled{% endunless %}>27      {{ 'products.product.add_to_cart' | t }}28    </button>29  {% endform %}30</div>31 32{% schema %}33{34  "name": "Quick view"35}36{% endschema %}

Two details in that section are doing real work. The {% form 'product', product %} tag generates Shopify's standard product form, which means add-to-cart from the modal goes through the same path as the product page rather than a hand-rolled fetch. And the money filter renders the price in the shop's configured format instead of you formatting cents by hand.

Step 2: the trigger

On each product card, add a button carrying the product URL. Use one delegated listener on a container rather than binding per card, so cards added later (by filtering, by pagination, by infinite scroll) keep working without rebinding.

1<button2  type="button"3  class="quick-view-trigger"4  data-quick-view-url="{{ product.url }}"5>6  Quick view7</button>

Step 3: fetch and open

Use the native <dialog> element. It gives you focus trapping, Escape to close, and a backdrop, all of which you would otherwise write badly by hand. Accessibility is where most homemade modals fall down, and this is the cheapest possible fix.

1<dialog id="quick-view-modal">2  <button type="button" data-close aria-label="Close">&times;</button>3  <div id="quick-view-body"></div>4</dialog>

1const modal = document.getElementById("quick-view-modal");2const body = document.getElementById("quick-view-body");3 4document.addEventListener("click", async (event) => {5  const trigger = event.target.closest("[data-quick-view-url]");6  if (!trigger) return;7 8  body.innerHTML = "<p>Loading…</p>";9  modal.showModal();10 11  try {12    const url = trigger.dataset.quickViewUrl + "?section_id=quick-view";13    const res = await fetch(url);14    if (!res.ok) throw new Error(res.status);15    // HTML, not JSON. This is the step people get wrong first.16    body.innerHTML = await res.text();17  } catch {18    // Never strand the shopper in an empty modal.19    body.innerHTML =20      '<p>Could not load this product. <a href="' +21      trigger.dataset.quickViewUrl +22      '">Open the full page</a>.</p>';23  }24});25 26modal.addEventListener("click", (event) => {27  // Close on backdrop click, and on the close button.28  if (event.target === modal || event.target.closest("[data-close]")) {29    modal.close();30  }31});

Note the order: the modal opens before the fetch resolves, showing a loading state. Opening after the response feels broken on a slow connection, because the shopper clicks and nothing happens for a second. Opening immediately makes the same second feel like loading rather than like a dead button.

The gotchas that cost an afternoon

Why not just install an app

Sometimes an app is the right call, and a developer who reflexively hand-builds everything is not being senior, they are being expensive. But quick view is a poor candidate for one. A quick view app injects a script on every page to serve a feature used on one, renders product markup it templated itself (so it drifts from your theme in exactly the way described at the top), and adds a vendor between your merchant and their own add-to-cart path.

The version above adds one section file, one small script, and no third party. It renders whatever your product page renders because it literally is your product page's markup. When you restyle the product card in six months, the quick view restyles itself.