Footer Link Toggle

Edit the way to re-show the Consent Banner to your site visitors.

Overview

By default, Loginhood enables site visitors to re-show the Consent Banner with a fixed placement element that scrolls with the user on-page. This is the small icon that appears in the bottom left corner of your website, if the Consent Banner is installed. If you'd like, you can also disable this feature and enable it by adding a footer link to your website.

Shopify App

To remove the retoggle banner button, disable it under Optional Settings.

Loginhood Shopify App

Then, you'll need to make a small addition to your website to dynamically add a toggle element to your footer. This consists of a link with text, and the retoggle function:

<a href="javascript: __cmpLoginhood('displayConsentPopup')>CA Privacy Notice</a>

Implementing Your Own

If you have a custom frontend or custom method for adding footer elements/links, you may need to do some investigation on your own. If you normally implement footer items via the Shopify Admin, you will need to manipulate your site to add this to the exact location you want.

  1. One way to do this is by dynamically editing the HTML and adding an event listener - more on that here.

  2. Another way includes adding a <script> tag to your theme.liquid file, and making a few adjustments based on your website's specific layout. You can and should attempt this in a demo or staging environment before deploying in production:

<script>
function setPrivacyNoticeLink() {
// Get your footer list parents
var footerLinks = document.querySelectorAll('.footer--nav_links');
// Get the desired column of footer items
var secondListColumn = footerLinks[1];
if (secondListColumn) {
// Create new <li> element
var newFooterItem = document.createElement('li');
// Create new <a> element
var newFooterLink = document.createElement('a');
// Add retoggle href script
newFooterLink.href = 'javascript: __cmpLoginhood("displayConsentPopup")';
// Add any custom CSS classes
newFooterLink.classList.add('footer--nav_link');
// Define link text
newFooterLink.innerText = 'CA Privacy Notice';
// Append <a> tag to <li>
newFooterItem.appendChild(newFooterLink);
// Append new <li> to your footer list
secondListColumn.appendChild(newFooterItem);
}
}
// Run it
setCaPrivacyNoticeLink();
</script>
Dynamically Add Retoggle

Add the above script to your liquid.theme file and you save your template. Refresh your website and check to see if your Consent Banner re-toggle button exists.

If you have any specific questions on implementation or have any further questions about the Footer Link Toggle, please reach us at [email protected].