How to add footer link instead of sticky icon

Most of the features will be available just by installing the app and then enabling it. The following code is not always needed.

Setting Up Accessibility Toolkit in Your Theme

Follow these detailed steps to customize your theme and add an accessibility toolkit link in the footer navigation.

1. Add the Link in the Footer Navigation

   • Navigate to your theme's footer navigation section and add a link with the identifier #accessibility-toolkit.

2. Create the Accessibility Script File

   • In your theme's snippets directory, create a new file named ac-accessibility.liquid.

3. Add the Accessibility Script

   • Open the ac-accessibility.liquid file and add the following script:

<script type="text/javascript">

  document.addEventListener("DOMContentLoaded", function () {
    let elements = document.querySelectorAll('[href*="#accessibility-toolkit"]');
    elements.forEach(element => {
      element.addEventListener("click", function (event) {
        acaClick(event);
      });
    });
  });

  function acaClick(event) {
    event.preventDefault();

    let classList = top.document.querySelector(".aca_card").classList;
    let acaLink = top.document.querySelector(".aca_ui_container");
    acaLink.style.display = acaLink.style.display == "block" ? "none" : "block";
    setTimeout(() => classList.remove("DisplayNone"), 20);
  }
</script>

4. Include the Script in theme.liquid

   • Open your theme.liquid file and include the ac-accessibility.liquid snippet by adding the following line where appropriate:

{% render 'ac-accessibility' %}

5. Add Custom CSS

   • To ensure the accessibility container is hidden by default, add the following CSS to your app's admin custom code section:

.aca_ui_container {
  display: none;
}

Summary of Steps

1. Add Link: Insert the #accessibility-toolkit link in your footer navigation.
2. Create Script File: Create a new file ac-accessibility.liquid in the snippets directory.
3. Add Script: Copy and paste the provided script into ac-accessibility.liquid.
4. Include Script in Theme: Add {% include 'ac-accessibility' %} to theme.liquid.
5. Add CSS: Add the provided CSS to hide the accessibility container by default.

These steps will ensure that your accessibility toolkit is properly integrated and can be toggled on and off through the footer link.

Contact Us at [email protected]

Learn more and install our app Appify - Accessibility Toolkit for your shopify store.