Hiding Disclaimers for External Applications

On certain occasions, you may need to hide disclaimers for external applications like Klarna, Affirm, and Shop Pay when the TryNow toggle is activated. A guide on how to do this is provided below.

📘

Hint

This guide assumes familiarity with the structure of the theme you are using, as well as a basic understanding of JavaScript and Liquid coding.

Steps

1. A script can be injected into any file used to render disclaimers. It is usually your main product template file.
2. At the end of the file or before the schema liquid tags, open script tags for Javascript.
3. Inside the tags a mutation observer can be added to the window to hide the disclaimers as long as the TryNow CTA is visible. Add any event to the listener that applies more usefully to your theme.

window.addEventListener('load', function() {  
   const tryNowButton = document.querySelector('trynow-cta-button');
   const disclaimer = document.querySelector('[DISCLAIMER_SELECTOR]');
   const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            if(tryNowButton.style.display != 'none'){
              disclaimer.style.display = 'none';
            } else {
              disclaimer.style.display = 'block';
            }
        }
    }
  });
 observer.observe(tryNowButton, { attributes: true });
});

Remember to change the placeholder [DISCLAIMER_SELECTOR] for the actual selector of the element you want to hide.