Enable Klip Coupons in Quick View Modals

Enable Coupons in Quick View Modals

You can display coupons directly inside Quick View modals from your Klip settings. This allows customers to discover and apply discounts instantly while browsing products, creating a smoother shopping experience and improving engagement 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. Open the Advanced tab
  4. Enable Coupons in Quick View Modals
  5. Click Save

💡 Once enabled, coupons will appear inside Quick View product modals if your theme supports it. If they don’t appear immediately, additional setup may be required (see selector setup below).

Step 2: Enable Dynamic Checkout Compatibility (Required)

To ensure coupons work correctly with Quick View and dynamic checkout buttons:

  1. Go to Klip Coupons Settings
  2. Navigate to Advanced Settings
  3. Scroll to Buy Now Compatibility
  4. Click Regenerate Token


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


Step 3: Verify Coupons in Quick View

Open a product Quick View modal on your storefront and confirm that:

  • The coupon appears inside the modal
  • A badge is shown on eligible products (if enabled)


💡 The badge helps customers quickly identify discounted products.


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


  1. 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.

Updated on: 27/04/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!