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, dont 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:

1. Navigate to the Collection page template or section where customers trigger the Quick View modal.
2. Add a Custom HTML block.
3. 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

1. Open your stores collection page.
2. Trigger the quick view feature on a subscription product.
3. 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.