Showing the customize button on quick preview.
Qstomizer can be integrated into AJAX/quick‑view modals. The Customize button that appears on the standard product page is loaded by our Theme App Extension block (App Block or App Embed), which Shopify only renders when the full product section is on the page — that's why it doesn't appear inside quick views (AJAX fragments don't run App Blocks).
You can add it manually by dropping the snippet below anywhere inside your quick‑view template (typically the section/snippet your theme uses for ?view=quick-view or the JS quick‑add drawer). It uses the same metafield/tag logic as our official block, points to the same App Proxy endpoint, and requires no additional JS:
{%- comment -%} Qstomizer — Customize button for quick view / AJAX modals {%- endcomment -%}
{%- liquid
assign qsmz_show = false
if product.metafields.qstomizer.customizebutton
assign qsmz_show = true
endif
if product.tags contains 'qstomizer-product-tag' or product.description contains 'qstomizer-product-tag'
assign qsmz_show = true
endif
assign qsmz_variant = product.selected_or_first_available_variant
-%}
{%- if qsmz_show -%}
<a href="/apps/qstomizer?qstomizer-product-id={{ product.id }}&variantid={{ qsmz_variant.id }}&qstomizer-locale={{ request.locale.iso_code }}"
class="btn qstomizer-product-button"
data-qstomizer-quickview
data-product-id="{{ product.id }}">
Customize
</a>
<script>
// Keep the variant id in sync when the shopper changes options inside the quick view
(function () {
var btn = document.currentScript.previousElementSibling;
var modal = btn.closest('form')
|| btn.closest('.quick-view, [data-quick-view], dialog, .modal')
|| document;
modal.addEventListener('change', function (e) {
if (!e.target.matches('[name^="options"], [name="id"]')) return;
var idField = modal.querySelector('[name="id"]');
var vid = idField && idField.value;
if (!vid) return;
var url = new URL(btn.href, location.origin);
url.searchParams.set('variantid', vid);
btn.href = url.pathname + url.search;
});
})();
</script>
{%- endif -%}Notes
- If your quick view uses the
productobject under a different name (card_product,qv_product, etc.), just replaceproductaccordingly. /apps/qstomizeris our App Proxy — it must remain unchanged; it's what launches the customizer session for that product+variant.- The tiny inline script only keeps
variantidcurrent if the user swaps variants inside the modal. If your quick view has no variant picker, you can drop the<script>block entirely. - Style the button however you like (
class="btn qstomizer-product-button"is a suggestion so it inherits your theme's primary button styles).
