Contributor I

Solved

Hide signup form when cart slides in

Forum|Forum|1 year ago
December 31, 2024
5 replies
388 views

Hi everyone,

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!

Thanks in advance!

Sign-up forms

Best answer by Christiannoerbjerg

Hi @freshtape

Thank you for posting in the Community!

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

MANSIR2094

Expert Problem Solver IV

Hello @freshtape

To resolve this issue, you can use custom JavaScript to detect when the cart slider is open and then hide the Klaviyo popup. Here’s a solution:

1. Identify the Cart Slider Element: Check the HTML structure of your website to find a unique class or ID for the cart slider (e.g., .cart-slider).

2. Modify the Popup Display: Use JavaScript to monitor the visibility of the cart slider. If it becomes visible, hide the Klaviyo popup.

Here’s an example code snippet:

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'] });

});

3. Test the Functionality: Add this script to your theme (e.g., in the theme’s JavaScript file) and verify the behavior.

This approach ensures the signup form doesn’t block the cart slider with

out needing to exclude a URL.

If you need help with implementing this, kindly give me a PM for more guidance.

Mansir Digital Portfolio

ali786

Expert Problem Solver I

You can avoid showing the form on cart page

ali raza -🔎www.aliXemail.com

ChristiannoerbjergAnswer

2025 Champion

Hi @freshtape

Thank you for posting in the Community!

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

talhahussain

Expert Problem Solver I

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.

Talha Hussain - Email Marketing Specialist - talhahussain1100@gmail.com

Christiannoerbjerg

2025 Champion

Hi @freshtape

Did you get this solved? :-)

Christian Nørbjerg Enger
Partner & CPO
Web: Segmento.dk
LinkedIn: @christianfromsegmento
Voldbjergvej 22b, 8240 Risskov

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials