Articles on: Klip Features

How to Enable Coupons in Quick View Modals

You can enable coupons to appear inside quick view modals from your Klip settings. This lets customers discover and use coupons instantly while browsing products, creating a smoother shopping experience and helping increase engagement directly from product previews.


Step 1: Enable Coupons in Quick View Modals (Required)


  1. Go to Klip Coupons in your Shopify admin
  2. Click Settings.
  3. Select the Advanced tab.
  4. Check or select Enable coupons in quick view modals.
  5. Click Save to apply your changes.



Once enabled, coupons will appear inside quick view product modals where supported by your theme. If it doesn’t show right away, our team can help set it up by configuring the required selectors for your theme.


Step 2: Enable Dynamic Checkout Compatibility (Required)

To ensure coupons work properly with quick view and dynamic checkout buttons:

  1. Go to Klip Coupons Settings
  2. Navigate to Advanced Settings
  3. Scroll down to the Buy Now Compatibility section
  4. Click Regenerate token



💡 This token is automatically generated for most stores. If it's already present, no further action is needed.


Step 3: Verify the Coupon on the Quick View



Step 4: (If Needed) Configure Quick View Selectors

If coupons are not appearing, your theme may require manual selector configuration.


Tool Required

Use your browser’s Developer Tools
(Open with F12 → Elements / Inspector)


Step 4.1: Open the Quick View Modal

  • Go to a collection page
  • Click Quick View on any product
  • Keep the modal open while inspecting


Step 4.2: Find the Modal Selector

This selector identifies the active (open) Quick View modal.
How to find it:

  1. Inspect an element inside the popup
  2. Move up the DOM tree to locate the modal wrapper
  3. Look for identifiers such as:
    • dialog[open]
    • .modal.is-open
    • .quick-view.active
    • .popup--visible

Test in Console:

document.querySelector('YOUR_SELECTOR')
// Should return an element (not null)


→ Paste this into the Modal Selectors field


Step 4.3: Find the Container Selector

This defines where the coupon will be injected.
How to find it:

  1. Locate the Add to Cart form:
<form action="/cart/add">


  1. Move up 1–3 levels to find a container that includes:
    • Product details
    • The form
  3. Common examples:
    • .product-form
    • .product__info
    • .quick-view__content
    • .modal__product


Test in Console:

document.querySelector('YOUR_CONTAINER').contains(
  document.querySelector('form[action*="/cart/add"]')
)
// Should return true


→ Paste this into the Container Selectors field

Related Guide

Instructions for collection page coupons:
https://klip.crisp.help/en/article/how-to-show-coupons-on-collection-pages-5dhvy3/
💡 Installing the collection page code is required for full functionality. The badge feature is optional.

Need Help?

If you need assistance or want help configuring selectors, contact support or start a live chat:
https://go.crisp.chat/chat/embed/?website_id=03c76f82-2974-4752-973a-70cf3cd6881b
Our team is happy to help you get everything working smoothly.


Note: Instructions for setting up collection page coupons can be found in the guide below: https://klip.crisp.help/en/article/how-to-show-coupons-on-collection-pages-5dhvy3/


Installing the collection page code is required for full functionality, while enabling the badge is optional.


Need Help?

If you need assistance or would like help setting this up, contact us or start a live chat. Our team is happy to help you get everything working smoothly.

Updated on: 13/07/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!