Hiding Disclaimers for External Applications
This document provides a guide on how to hide disclaimers when the TryNow toggle is activated.
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
- A script can be injected into any file used to render disclaimers. It is usually your main product template file.
- At the end of the file or before the
schema
liquid tags, openscript
tags for Javascript. - 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.
Updated 2 months ago