Skip to main content
When a customer adds a product to their cart from the Quizify result page, the product is successfully added to the Shopify cart — but if your theme uses a cart drawer (a slide-out cart panel) instead of redirecting to the cart page, the drawer will not automatically open or refresh to show the new item.

​
Why This Happens

Quizify’s “Add to Cart” button on the result page currently supports the standard Shopify cart page — after adding a product, Quizify can redirect the customer to /cart or update the cart count, depending on your settings. Cart drawers are different. Every Shopify theme builds its cart drawer with its own custom code, markup, and JavaScript — there is no standard Shopify API that all themes share for opening or refreshing a drawer. Because of this, Quizify cannot automatically trigger every theme’s cart drawer out of the box. To solve this, Quizify fires a custom browser event every time a product is added to cart from the result page. A theme developer can listen for this event and use it to open and refresh the cart drawer using the theme’s own code.

This only affects themes using a cart drawer. If your theme redirects to the cart page (or the customer is on the cart page) after adding to cart, no extra code is needed — the cart will already reflect the added product.

​
The quizifyAddToCart Event

Whenever a customer adds a product to cart from the quiz result page, Quizify dispatches a quizifyAddToCart event on the browser window object. Any script on the page can listen for it and run custom code in response — most commonly, to open the cart drawer and refresh its contents. Here is the basic listener: 
window.addEventListener("quizifyAddToCart", function () {
  // Insert your custom cart drawer code here
});
This fires after the item has already been added to the Shopify cart, so by the time your listener runs, the cart total and line items are already up to date on Shopify’s side — your code just needs to reflect that in the drawer UI.

​
Where to Add This Code

The listener needs to run on every page where the Quizify quiz can be embedded (product pages, homepage, popup, etc.), since a customer can reach the result page and add to cart from any of them. The most reliable place to add it is:
  1. Open your Shopify theme code editor: Online Store → Themes → Edit Code
  2. Open your theme’s main layout file — usually layout/theme.liquid
  3. Add your listener inside a <script> tag just before the closing </body> tag, or link to a custom .js asset file loaded on every page
  4. Save the file

If your theme already has a custom JavaScript file that loads sitewide (for example, assets/global.js in many themes), it’s cleaner to add the listener there instead of inline in theme.liquid.

​
Example: Shopify Dawn Theme

Dawn (and most Dawn-based themes) renders its cart drawer through a custom element called <cart-drawer>, which already has built‑in methods for opening itself and can be refreshed by re-fetching the cart drawer’s section markup. Here’s an example that listens for quizifyAddToCart, re-fetches the drawer’s HTML so it reflects the new item, and then opens it: 
window.addEventListener("quizifyAddToCart", function () {
  var cartDrawer = document.querySelector("cart-drawer");

  if (!cartDrawer) {
    // Theme doesn't have a cart drawer on this page — nothing to do
    return;
  }

  fetch(window.Shopify.routes.root + "?section_id=cart-drawer")
    .then(function (response) {
      return response.text();
    })
    .then(function (html) {
      var parser = new DOMParser();
      var doc = parser.parseFromString(html, "text/html");
      var refreshedDrawer = doc.querySelector("cart-drawer");

      if (refreshedDrawer) {
        cartDrawer.innerHTML = refreshedDrawer.innerHTML;
        cartDrawer.classList.remove("is-empty");
      }

      // Dawn's cart-drawer.js exposes an open() method on the element
      if (typeof cartDrawer.open === "function") {
        cartDrawer.open();
      }
    })
    .catch(function (error) {
      console.error("Quizify cart drawer refresh failed:", error);
    });
});
What this code does:
  • Finds the <cart-drawer> element that Dawn renders on the page
  • Re-fetches the current cart drawer section markup from Shopify (?section_id=cart-drawer), which includes the newly added product
  • Replaces the drawer’s contents with the refreshed markup
  • Calls Dawn’s own open() method on the drawer to slide it into view

Shopify themes are updated frequently and heavily customized by merchants. Selectors like cart-drawer, the open() method, and the is-empty class are accurate for the default Dawn theme at the time of writing, but may differ if the theme has been customized. Always test this in the theme editor before publishing.

​
Adapting This for Other Themes

If your store uses a different theme, the same pattern applies — only the selectors and method names change:
  1. Find the element or web component your theme uses to render the cart drawer (inspect it in your browser’s developer tools while opening the drawer manually)
  2. Find the function your theme already uses to open the drawer (look in the theme’s cart or drawer JavaScript file, often named something like cart-drawer.js, cart-notification.js, or similar)
  3. Find how your theme refreshes drawer contents — most themes either re-fetch a cart section via fetch(), or call /cart.js and re-render the line items with their own JavaScript
  4. Combine those two pieces inside the quizifyAddToCart listener: refresh the contents first, then call the open function

​
Testing Your Implementation

After adding the code:
  1. Open a page with the Quizify quiz embedded and complete the quiz to reach the result page
  2. Click Add to Cart on a recommended product
  3. Confirm the cart drawer opens automatically and shows the newly added product
  4. Open your browser’s developer console and check for any errors if the drawer does not open or refresh as expected
If you’re not comfortable editing theme code, a Shopify developer or theme expert can implement this for you using the event and example above as a starting point.