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.
By clicking “Accept All Cookies,” you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.
Privacy Preference Center
Your Privacy
Strictly Necessary Cookies
Performance Cookies
Functional Cookies
Targeting Cookies
Site Analytics
Your Privacy
When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.
Privacy Notice
Strictly Necessary Cookies
Always Active
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.
Performance Cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.
Functional Cookies
These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.
Targeting Cookies
These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising.
Site Analytics
These cookies record your visit to our website, and are used to track your visit including information such as: web page interactions (clicks, hovers, focus, mouse movements, browsing, zooms and other interactions), referring web page/source through which you accessed the Sites, heatmaps and scrolls, screen resolution, ISP, and statistics associated with the interaction between device or browser and the Sites. If you are accessing our Services with a European IP address, you have been asked to consent to the use of these cookies (you are free to deny your consent).