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, open the app, scroll to the Custom CSS section at the bottom of the Settings page, paste the CSS below and click Save (Custom CSS is available on the Basic plan and above):

.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: Paste the provided CSS into the app's Custom CSS section (Settings page, Basic plan and above) 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 support@appifycommerce.com

Learn more and install our app AC - Accessibility Toolkit for your Shopify store.