Using quick view with the Subscription Widget
Some Shopify themes have a quick view feature that lets customers view product details from a pop-up window or modal, without having to navigate to the full product page. The quick view feature is typically available with paid themes, however, there are apps like Quick View & Color Swatch by Globo, Quick View by Secomapp, or Product Quick View by qikify that let you use the feature on most Shopify themes. Paid themes that offer the quick view feature are currently developed by Archetype or Maestroo.
This guide explains how to ensure quick view works with the Recharge Subscription Widget.
How to use the Subscription Widget in Archetype themes that offer quick view
Archetype themes use JavaScript to dynamically load content in their Quick View modals. This means that scripts, including the Subscription Widget, don’t automatically run when the modal opens.
To ensure the Recharge widget loads correctly, follow these steps:
Step 1 - Add custom HTML content to the collection page
In your Shopify theme editor:
- Navigate to the Collection page template or section where customers trigger the Quick View modal.
- Add a Custom HTML block.
- Paste the following code into the HTML block:
<script>
(function () {
// Watch for the Archetype event for the quickview loading
document.addEventListener("quickview:loaded", function (evt) {
const widget = document.querySelector(".recharge-subscription-widget");
// redo leading all the widget scripts
reExecuteScripts(widget);
// reload the web component reRenderWebComponent(widget.querySelector("recharge-subscription-widget"));
});
// generic function that reloads a dom element on the page
function reRenderWebComponent(element) {
if (!element) return;
const newEl = element.cloneNode(true);
element.replaceWith(newEl);
}
// generic function that re-appends script tags on the page to force them to reload
function reExecuteScripts(container, attrReplace = (attr) => attr.value) {
const scripts = container.querySelectorAll("script");
scripts.forEach((oldScript) => {
const newScript = document.createElement("script");
// Copy attributes
for (const attr of oldScript.attributes) {
newScript.setAttribute(attr.name, attrReplace(attr));
}
// Copy inline code if any
if (oldScript.textContent) {
newScript.textContent = oldScript.textContent;
}
// Replace the old script with the new one
oldScript.parentNode.replaceChild(newScript, oldScript);
});
}
})();
</script>
This forces the widget to reload all the scripts and re-render the widget.
Step 2 - Save and test the Quick View
- Open your store’s collection page.
- Trigger the quick view feature on a subscription product.
- Confirm that the Subscription Widget works as intended.
How to use the Recharge widget in Maestroo themes that offer quick view
Maestroo themes are fully compatible with Recharge out of the box. No additional setup is needed for the widget to work inside Quick View modals..
How to use the Recharge widget with quick view apps
The Subscription Widget is not officially compatible with third-party Quick View apps. Some apps may support the widget out of the box, while others require additional integration work:
- If an app uses the product detail page (PDP) for its modal content, the Recharge widget may work automatically.
- If an app does not use the PDP, it typically won't support the Recharge widget without customization.
- If the app dynamically loads content without reloading scripts (like Archetype themes), you need to manually trigger script reloading to render the widget.
Updated about 16 hours ago