Hiding Disclaimers

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 an event listener can be added to the window to hide the disclaimers after the page loads. Add any event to the listener that applies more usefully to your theme.

window.addEventListener('load', function() {
    const disclaimer = document.querySelector('[DISCLAIMER_SELECTOR]');
    const tryNowToggle = document.querySelector('.tn-gate-toggle-input');

    // Function to update the display of the disclaimer
    function updateDisclaimerDisplay() {
        disclaimer.style.display = tryNowToggle.checked ? 'none' : 'block';
    }

    if (tryNowToggle) {
        // Initial check on page load
        updateDisclaimerDisplay();
        // Event listener for changes on the toggle
        tryNowToggle.addEventListener('change', updateDisclaimerDisplay);
    }
});

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