I'm experiencing an issue with my Klaviyo signup form. On my website, the cart slides in from the side when a customer adds a product. However, the signup form popup appears in front of the cart, blocking the checkout button (see the image attached).
I would like the signup form to NOT show whenever the cart is open. I have tried to exclude the /cart url but appereantly there is no url, because the cart slides in on the page. Is there a way to hide the Klaviyo popup when the cart element is visible? If anyone has dealt with a similar issue or has ideas on how to fix this, I’d appreciate your help!
As @MANSIR2094 and @ali786 mentioned. There is a way to go about this.
I have tried the following on one of our clients, which worked. I hope it works for you - It’s individual from client to client.
Identify the cart element Class or button ID:
Inspect the cart slide-in element on your website using your browser's developer tools (right-click the cart > Inspect).
Note down the unique class or ID of the cart element.
Modify Klaviyo signup form behavior:
Klaviyo allows you to use custom JavaScript to control when a form appears. You'll need to check for the visibility of the cart element and disable the form if it's open.
Add custom JavaScript to your Sites
Insert the following script into your site's custom JavaScript file or theme file where you manage your site-wide scripts:
document.addEventListener('DOMContentLoaded', function () { // Select the cart element var cartElement = document.querySelector('.cart-slide-in'); // Replace with your cart's class or ID // Function to check if the cart is visible function isCartVisible() { return cartElement && cartElement.offsetWidth > 0 && cartElement.offsetHeight > 0; } // Listen for the Klaviyo form display event document.addEventListener('klaviyoFormRender', function (event) { if (isCartVisible()) { // Prevent the form from displaying event.preventDefault(); } }); // Monitor cart visibility dynamically (if needed) var observer = new MutationObserver(function () { if (isCartVisible()) { Klaviyo.hideForms(); // Hide any currently visible Klaviyo forms } }); if (cartElement) { observer.observe(cartElement, { attributes: true, childList: true, subtree: true }); } });
Hope that helps! :-)
Christian Nørbjerg Enger Partner & CPO Web: Segmento.dk LinkedIn: @christianfromsegmento Voldbjergvej 22b, 8240 Risskov
As @MANSIR2094 and @ali786 mentioned. There is a way to go about this.
I have tried the following on one of our clients, which worked. I hope it works for you - It’s individual from client to client.
Identify the cart element Class or button ID:
Inspect the cart slide-in element on your website using your browser's developer tools (right-click the cart > Inspect).
Note down the unique class or ID of the cart element.
Modify Klaviyo signup form behavior:
Klaviyo allows you to use custom JavaScript to control when a form appears. You'll need to check for the visibility of the cart element and disable the form if it's open.
Add custom JavaScript to your Sites
Insert the following script into your site's custom JavaScript file or theme file where you manage your site-wide scripts:
document.addEventListener('DOMContentLoaded', function () { // Select the cart element var cartElement = document.querySelector('.cart-slide-in'); // Replace with your cart's class or ID // Function to check if the cart is visible function isCartVisible() { return cartElement && cartElement.offsetWidth > 0 && cartElement.offsetHeight > 0; } // Listen for the Klaviyo form display event document.addEventListener('klaviyoFormRender', function (event) { if (isCartVisible()) { // Prevent the form from displaying event.preventDefault(); } }); // Monitor cart visibility dynamically (if needed) var observer = new MutationObserver(function () { if (isCartVisible()) { Klaviyo.hideForms(); // Hide any currently visible Klaviyo forms } }); if (cartElement) { observer.observe(cartElement, { attributes: true, childList: true, subtree: true }); } });
Hope that helps! :-)
Christian Nørbjerg Enger Partner & CPO Web: Segmento.dk LinkedIn: @christianfromsegmento Voldbjergvej 22b, 8240 Risskov
To prevent a Klaviyo signup form from displaying when your cart slides in, implement custom JavaScript that detects the cart's visibility and hides the form accordingly. Here's how:
Identify the Cart Slider Element: Inspect your website's HTML to find the unique class or ID of the cart slider (e.g., .cart-slider).
Modify the Popup Display: Use JavaScript to monitor the cart slider's visibility and hide the Klaviyo popup when the cart is open.
Example code snippet:
Copy code
document.addEventListener('DOMContentLoaded', function () { const cartSlider = document.querySelector('.cart-slider'); // Replace with your cart slider class const klaviyoPopup = document.querySelector('.klaviyo-form'); // Replace with your Klaviyo popup class const observer = new MutationObserver(() => { if (cartSlider && getComputedStyle(cartSlider).display !== 'none') { if (klaviyoPopup) klaviyoPopup.style.display = 'none'; } else { if (klaviyoPopup) klaviyoPopup.style.display = ''; } }); observer.observe(cartSlider, { attributes: true, attributeFilter: ['style'] }); });
Test the Functionality: Add this script to your theme's JavaScript file and verify that the signup form hides when the cart is open.
This approach ensures the signup form doesn't obstruct the cart slider without relying on URL exclusions.
